:empty疑似セレクターのことですか？

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

いいえ、おそらく私はそれを「ルール」と呼ぶべきでした;）
私はこれを意味します

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

それらはcssにコンパイルすると削除されます

なぜあなたはそれらを保持したいのですか？ 生成されたCSSファイルで空白の周りにあることは何もしていません。 Firebugを介してスタイリングを行おうとしているとのことですが、私はあなたのアプローチが何であるかを理解していません。

1. 要素または要素のグループのlessファイルに空のルールを作成します。
2. ファイヤーバグを開き、作業する要素を選択すると、作成した空のルールが表示されます
3. 私はその空のルールの中にスタイルを書きます
4. https://github.com/ronniekk/css-x-fireプラグインは、firebugで行った変更をより少ないファイルに同期し、空のルールを見つけて、firebugで指定したスタイルをそこに配置します。

プラグインが正しく同期するためには、ルールがすでに存在している必要があります。明らかに、要素に以前にスタイルがなかった場合は、初めて空のルールを作成する必要があります。 純粋なCSSを使用した場合は機能しましたが、LESSに切り替えると、コンパイラーが空のルールを削除し、プラグインがスタイルを同期できないことに気付きました。

それはかなり狭いユースケースだと思います...

これは_非常に_特定のユースケースのようです。 ほとんどの場合、人々はCSSをあまり最適化せず、空のルールを残さないことを望んでいます。

less.watch()を使用して、スタイルを自動的に更新することをお勧めします。

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

または、URLに#!watchを追加します。

問題がある場合は、ここにいくつかの提案があります： http ：

@Soviutからの良いアドバイス。 また、それが気に入らない場合は、回避策として、偽のルールを追加します。

temp: ruleset;

同意しました。 @agatronicのソリューションは、他のすべてのLESSファイルで非効率的なCSSを生成することなく、必要なことを実行します。

@agatronicは、LESSを使い始めてから過去2週間行っていたものですが、削除するのを忘れたために、このような偽のルールが数回

@Soviut残念ながら、これはまったく異なるワークフローです

このオプションが追加されないことを理解し、同意しますが、それが問題にならない場合は、どのソースコードファイルで自分で動作を変更できるか教えてください。

これを変更してみてください

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

@chetzof私はこれに対する解決策を

私はそのように言いました：

セレクター{/ ** /}

Firebugでは空のように見えます。

@ d4ng3rmaxクールポイント！
@chetzofが言及したのと同じ
THX。

これは、 css-modulesを使用した開発中に使用する必要があります。
足場の間にすべてのセレクターを定型化し、それからそれらをなんとか削除するのは本当に面倒です。

.main {
/*! keep */
}

.loading {
/*! keep */
}

.button {
/*! keep */
}

.form {
/*! keep */
}

@garkin CSSモジュールでそのようなセレクターを書き出すためのあなたの推論/ユースケースは何ですか？

それ以外の場合は、インポートフェーズで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うーん...あなたのスタイルシートを書き終えるだけの答えではありませんか？ 私はそれがこの開発アプローチによってのみ引き起こされる問題だと言っています。

たとえば、私が働いている場所では、チームに応じてLessとSassを使用し、現在のSassビルド設定では、空のセレクターはリンティングを通過しません（アプリはコンパイルされません）。 そのため、CSSモジュール/ Reactを使用してアプローチを変更することを余儀なくされました。

問題となっているのは、実際にはこのパターンです。

{
     [css.loading]: isLoading
}

このパターンに変更しても、例外は発生しません。

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

あなたの例では、未定義の可能性のある名前でオブジェクトプロパティを定義しようとしています。 ロジックを切り替えると、クラスが未定義になる可能性があり、例外はスローされません。

このいわゆる「スタイルシートの作成を終了する」には、特定の認知コンテキストが必要であり、かなりの時間がかかる可能性があります。 マークアップを使用して足場を作成し、HMRを手元で作業した後は、はるかに簡単に実行できます。

このパターンは、使用するための支配的で半公式のガイドラインであり、しばらく前にReactディストリビューションの一部でした。
そして、このサンプルは明らかに蒸留されています。 あなたの道は読めないし、呼びかけもできません。

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>

CSSモジュールは、今日のスタイルを実行するための主要なアプローチであり、将来的にはさらにそうなるでしょう。
空のセレクターの削除-css-modulesとともに使用すると、コードのセマンティクスが複雑に変化します。

この動作は、少なくとも構成によって回避できるはずです。

それは面白い。 そのユースケースのためだけでなく、LessがCSSの「クリーニング」のビジネスに従事するべきではないために再開します。 compressオプションは、同様の理由で非推奨になりました。つまり、セレクターを削除/圧縮/プレフィックスを追加するツールが多数維持されています。

この動作は、空のセレクターがブラウザーと無関係である場合に作成された可能性がありますが、CSSモジュールを考慮に入れると、データとして無関係ではないことはある程度有効です。

実際、誰かが反対しない限り、これはオプションとして実装しても安全だと思います。 IMOはremoveEmptyRulesets （セレクターではない）で、デフォルト値はtrueです。

編集：または、デフォルト値がfalse keepEmptyRulesetsである必要がありますか？ 🤔おそらく後者です。未定義の場合に誤ったチェックが簡単になるためです。

CSSモジュールを考慮に入れるとき

そして、それはそれらだけに限定されません。 CSSOMを介したプログラムによるアクセスなども検討して

keepEmptyRulesetsを追加するのが良いオプションだと思います。
多分、冗長な側面のほんの少し。 CLIにはあまり適していません： --keep-empty-rulesets

冗長な面で少し、多分

私は同意しませんが、別の提案がありますか？ これは非常に特殊な動作のように思われるため、明示的にすることが役立つ場合があります。 APIではkeepEmptyRulesets --keep-rulesets 、CLIでは--keep-empty

両方ともkeepEmpty必要がありますか？

私は使うだろう：

1. APIオプションとしてoutputEmptyRulesets : true|false ;
2. フルフォームCLIトグルとして--empty-rulesets ; と
3. 省略形のCLIトグルとして-erまたは場合によっては-empty 。

@rjgotten大丈夫です。 私は感情的に投資されていません笑。 @ garkin-これについてどう思いますか？

私には問題ないようです。

実際の実装が期待できるのはいつですか？
これは私たちにとっても問題です。

@orchidoris PRは大歓迎です！

回避策プラグイン...

すべてのセレクターに__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());      
    },                                                                
}; 

less-loaderを使用する場合：

    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'),                   
            ];                                                    
        });