क्या आपका मतलब :empty छद्म चयनकर्ता है?

http://reference.sitepoint.com/css/pseudoclass-empty

नहीं, शायद मुझे इसे "नियम" कहना चाहिए था;)
मेरा मतलब यह है

.selector {}
a.nother{
   .selector {}
}

वे सीएसएस को संकलित करने पर हटा दिए जाते हैं

आप उन्हें क्यों रखना चाहेंगे? वे जेनरेट की गई सीएसएस फ़ाइल में खाली पड़े कुछ भी नहीं कर रहे हैं। आप कहते हैं कि आप फ़ायरबग के माध्यम से स्टाइल करने की कोशिश कर रहे हैं, लेकिन मुझे समझ में नहीं आता कि आपका दृष्टिकोण क्या है।

1. मैं किसी तत्व या तत्वों के समूह के लिए कम फ़ाइल में खाली नियम बनाता हूं।
2. मैं फायरबग खोलता हूं, उस तत्व का चयन करता हूं जिस पर मैं काम करना चाहता हूं, और मैं अपने द्वारा बनाए गए खाली नियम देख सकता हूं
3. मैं उस खाली नियम के अंदर शैलियाँ लिखता हूँ
4. https://github.com/ronniekk/css-x-fire प्लगइन फ़ायरबग में किए गए परिवर्तनों को कम फ़ाइल में वापस सिंक करता है, यह खाली नियम ढूंढता है, और वहां फ़ायरबग में निर्दिष्ट शैलियों को रखता है।

आवश्यकता यह है कि प्लगइन को सही ढंग से वापस सिंक करने के लिए नियम पहले से मौजूद होना चाहिए, और जाहिर है, यदि तत्व में पहले शैली नहीं है, तो मुझे पहली बार एक खाली नियम बनाना होगा। यह तब काम करता था जब मैंने शुद्ध सीएसएस का उपयोग किया था, लेकिन अब, जब मैंने कम पर स्विच किया, तो मुझे एहसास हुआ कि कंपाइलर खाली नियमों को हटा देता है, और प्लगइन शैलियों को वापस सिंक करने में असमर्थ है।

मुझे एहसास है कि यह एक बहुत ही संकीर्ण उपयोग-मामला है ...

यह एक _very_ विशिष्ट उपयोग के मामले की तरह लगता है। ज्यादातर मामलों में, लोग अपने सीएसएस को कम अनुकूलित करना पसंद करेंगे और खाली नियमों को _did't_ नहीं छोड़ेंगे।

मैं आपकी शैलियों को स्वचालित रूप से रीफ्रेश करने के लिए less.watch() का उपयोग करने का सुझाव दूंगा:

<script type="text/javascript">
     less.env = "development";
     less.watch();
</script>

या अपने URL में #!watch संलग्न करें।

यदि आपको कोई समस्या है, तो यहां कुछ सुझाव दिए गए हैं: http://www.paulsprangers.com/2011/04/quick-tip-less-js-in-development-and-watch-mode/

@ सोवियत से अच्छी सलाह। अगर आपको यह पसंद नहीं है, तो कामकाज के लिए एक नकली नियम जोड़ें, उदाहरण के लिए

temp: ruleset;

माना। @agatronic का समाधान वह करता है जो आपको हर दूसरी कम फ़ाइल को अक्षम सीएसएस उत्पन्न करने के बिना आवश्यक है।

@agatronic यही वह है जो मैं पिछले 2 हफ्तों से कर रहा था जब से मैंने LESS का उपयोग करना शुरू किया था, लेकिन कुछ बार ऐसे नकली नियम उत्पादन में आ गए क्योंकि मैं उन्हें हटाना भूल गया था, इसलिए मैंने सोचा कि शायद इसे ठीक करने का एक और स्पष्ट तरीका है :(

@ सोवियत दुर्भाग्य से यह पूरी तरह से अलग वर्कफ़्लो है, मैं इसे कम उपयोग करने के लिए तैयार नहीं हूं ... ब्राउज़र में कम कंपाइलर का उपयोग करने से कुछ गंभीर प्रदर्शन समस्याएं हुईं, पेज लोड 500-700ms से 2-3 एस तक बढ़ गया ..

मैं समझता हूं कि यह विकल्प नहीं जोड़ा जाएगा, और मैं आपसे सहमत हूं, लेकिन अगर यह कोई समस्या नहीं है, तो क्या आप कृपया मुझे बता सकते हैं कि मैं किस स्रोत कोड फ़ाइल में अपने व्यवहार को बदल सकता हूं?

इसे बदलने का प्रयास करें

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L187

@chetzof मैंने इसके लिए समाधान निकाला। यह सबसे अच्छा तरीका नहीं है, लेकिन आप जो खोज रहे हैं उसके लिए काम करता है।

मैंने इस तरह रखा है:

चयनकर्ता {/**/}

यह फायरबग पर खाली दिखाई देगा।

@d4ng3rmax कूल पॉइंट!
मुझे लगता है कि मेरे पास वही देव वर्कफ़्लो है जिसका @chetzof ने उल्लेख किया है।
धन्यवाद।

css-modules साथ विकास के दौरान उपयोग के लिए यह चीज जरूरी है।
मचान के दौरान सभी चयनकर्ताओं को बॉयलरप्लेट करना और फिर उन्हें हटाने का प्रबंधन करना वास्तव में थकाऊ है।

.main {
/*! keep */
}

.loading {
/*! keep */
}

.button {
/*! keep */
}

.form {
/*! keep */
}

@garkin सीएसएस मॉड्यूल के साथ अपने चयनकर्ताओं को इस तरह लिखने के लिए आपका तर्क/उपयोग-मामला क्या है?

अन्यथा वे आयात चरण के दौरान undefined ।

import * as React from 'react'
import * as cx from 'classnames';
import css from './home.less';

export class Home extends React.Component {
    render() {
        const isLoading = true;
        return <div className={cx(css.main, {
            [css.loading]: isLoading
         })}>
            Home
        </div>
    }
}

यह रनटाइम अपवादों की ओर जाता है और हॉट मॉड्यूल प्रतिस्थापन को खंडित करता है। चयनकर्ताओं को हटाने से रोकना उन सभी मुद्दों को ठीक करता है।
लेकिन मचान के दौरान आपको हमेशा यह ध्यान रखना होगा कि चयनकर्ताओं को हटा दिया जाएगा और इसे रोकने के लिए आपको एक कंपाइलर से लड़ने की जरूरत है। और फिर उन सभी /*! keep */ टिप्पणियों को भविष्य में किसी समय निकालने की आवश्यकता है।

@garkin हम्म ... सिर्फ अपनी स्टाइलशीट लिखना खत्म करने का जवाब नहीं है? मैं कह रहा हूं कि यह केवल विकास के इस दृष्टिकोण के कारण होने वाली समस्या है।

उदाहरण के लिए, जहां मैं काम करता हूं, हम टीम के आधार पर कम और सैस का उपयोग करते हैं, और हमारे वर्तमान सैस बिल्ड सेटअप में, खाली चयनकर्ता लाइनिंग पास नहीं करेंगे (ऐप संकलित नहीं होगा)। इसलिए मुझे सीएसएस मॉड्यूल / रिएक्ट के साथ अपना दृष्टिकोण बदलने के लिए मजबूर किया गया है।

यह वास्तव में यह पैटर्न है कि समस्या है:

{
     [css.loading]: isLoading
}

यदि आप इस पैटर्न में बदल गए हैं तो यह अपवाद नहीं पैदा करेगा:

<div className={`${isLoading && css.loading}`}></div>

आपके उदाहरण में, आप किसी ऑब्जेक्ट प्रॉपर्टी को ऐसे नाम से परिभाषित करने का प्रयास कर रहे हैं जो अपरिभाषित हो सकता है। यदि आप तर्क स्विच करते हैं, तो आपकी कक्षा अपरिभाषित हो सकती है और कोई अपवाद नहीं फेंका जाएगा।

यह तथाकथित "अपनी स्टाइलशीट लिखना समाप्त करें" के लिए एक विशिष्ट संज्ञानात्मक संदर्भ की आवश्यकता होती है और इसमें काफी समय लग सकता है। मार्कअप के साथ कदम उठाने और हाथ में एचएमआर काम करने के बाद इसे करना बहुत आसान है।

यह पैटर्न उपयोग करने के लिए एक प्रमुख और अर्ध-आधिकारिक दिशानिर्देश है, यह कुछ समय पहले रिएक्ट वितरण का एक हिस्सा था।
और यह नमूना स्पष्ट रूप से आसुत है। आपका तरीका पढ़ने योग्य नहीं है और ना ही मापनीय है।

return <div className={cx(css.post, sharedCss.frame, {
    [css.support]: post.isSupport,
    [css.foreign]: showTranslation,
    [css.private]: post.isInternal,
    [css.cached]: post.status.isLoading
    ...
})}>...</div>

सीएसएस-मॉड्यूल इस दिन शैलियों को करने का प्राथमिक तरीका है और भविष्य में ऐसा ही होगा।
खाली चयनकर्ताओं को अलग करना - सीएसएस-मॉड्यूल के साथ उपयोग किए जाने पर कोड शब्दार्थ को बदल देता है।

कॉन्फ़िगरेशन के माध्यम से यह व्यवहार कम से कम परिहार्य होना चाहिए।

यह तो दिलचस्प है। केवल उस उपयोग के मामले के लिए इतना अधिक नहीं खोलना, लेकिन क्योंकि कम "सफाई" सीएसएस के व्यवसाय में नहीं होना चाहिए। compress विकल्प को इसी तरह के कारणों से हटा दिया गया था यानी बहुत सारे रखरखाव उपकरण हैं जो चयनकर्ताओं को अलग कर देंगे/संपीड़ित/उपसर्ग आदि जोड़ देंगे।

संभवतः यह व्यवहार तब बनाया गया था जब एक खाली चयनकर्ता ब्राउज़र के लिए अप्रासंगिक था, लेकिन यह कुछ हद तक मान्य है कि जब आप CSS मॉड्यूल में कारक होते हैं तो यह डेटा के रूप में अप्रासंगिक नहीं होता है।

दरअसल, जब तक कोई आपत्ति नहीं करता, मुझे लगता है कि इसे एक विकल्प के रूप में लागू करना सुरक्षित है। आईएमओ यह removeEmptyRulesets (चयनकर्ता नहीं) true डिफ़ॉल्ट मान के साथ होगा।

संपादित करें: या यह keepEmptyRulesets के डिफ़ॉल्ट मान के साथ false ? 🤔 शायद बाद वाला, क्योंकि यह अपरिभाषित होने पर आसान झूठी जांच करता है।

जब आप सीएसएस मॉड्यूल में कारक होते हैं

और यह केवल उन्हीं तक सीमित नहीं है। CSSOM के माध्यम से प्रोग्रामेटिक एक्सेस जैसी चीजों पर भी विचार करें।

मैं कहूंगा कि keepEmptyRulesets जोड़ने का एक अच्छा विकल्प है।
क्रिया पक्ष पर थोड़ा सा, शायद। सीएलआई के लिए बहुत अच्छा नहीं है: --keep-empty-rulesets

क्रिया पक्ष पर थोड़ा सा, शायद

मैं असहमत नहीं हूं, लेकिन क्या आपके पास कोई वैकल्पिक सुझाव है? यह एक बहुत ही विशिष्ट व्यवहार की तरह लगता है, इसलिए कभी-कभी यह स्पष्ट होने में मदद करता है। वहाँ जा रहा है जाने से रोके कुछ भी नहीं है keepEmptyRulesets एपीआई में और --keep-rulesets CLI में। या यहां तक ​​कि --keep-empty

क्या यह दोनों के लिए सिर्फ keepEmpty होना चाहिए?

मैं प्रयोग करूंगा:

1. outputEmptyRulesets : true|false एपीआई विकल्प के रूप में;
2. --empty-rulesets फुल-फॉर्म CLI टॉगल के रूप में; तथा
3. -er या संभवतः -empty शॉर्टहैंड सीएलआई टॉगल के रूप में।

@rjgotten मैं इसके साथ ठीक हूँ। मैं भावनात्मक रूप से निवेशित नहीं हूँ lol। @garkin - आप इसके बारे में कैसा महसूस करते हैं?

मेरे लिए ठीक लग रहा है।

हम इसके वास्तविक कार्यान्वयन की उम्मीद कब कर सकते हैं?
यह हमारे लिए भी एक मुद्दा है।

@orchidoris PRs का स्वागत है!

समाधान प्लगइन...

प्रत्येक चयनकर्ता में __NOOP__: 1; जोड़ता है, फिर कम होने के बाद उन्हें हटा देता है।

class NoopPreProcessor {      
    process = (css, extra) => css.replace(/}/g, ';__NOOP__: 1;}');                                                                      
}      

class NoopPostProcessor {      
    process = (css, extra) => css.replace(/__NOOP__: 1;/g, '');                                                                               
}                                                                                                                       

const NoopPlugin = {                                                                                                    
    install: (less, pluginManager) => {                             
        pluginManager.addPreProcessor(new NoopPreProcessor());        
        pluginManager.addPostProcessor(new NoopPostProcessor());      
    },                                                                
}; 

कम लोडर के साथ प्रीएक्ट के लिए:

    helpers.getLoaders(config)                                                             
        .filter(item => item.ruleIndex===1)      
        .map(item => {                           
            item.loaders[0].options.options.stictMath = true;      
            item.loaders[0].options.options.plugins = [            
                NoopPlugin,                                        
            ];                                                     

            item.loaders[0].options.options.paths = [      
                ...item.loaders[0].options.options.paths[0],      
                path.resolve(__dirname, 'src'),                   
            ];                                                    
        });