Apakah maksud Anda selektor semu :empty ?

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

Tidak, mungkin saya seharusnya menyebutnya "aturan" ;)
maksud saya ini

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

Mereka dihapus saat dikompilasi ke css

Mengapa Anda ingin menyimpannya? Mereka tidak melakukan apa pun yang kosong di file CSS yang dihasilkan. Anda mengatakan Anda mencoba melakukan penataan melalui Firebug, tetapi saya tidak mengerti apa pendekatan Anda.

1. Saya membuat aturan kosong di file less untuk elemen atau sekelompok elemen.
2. Saya membuka pembakar, pilih elemen yang ingin saya kerjakan, dan saya dapat melihat aturan kosong yang saya buat
3. Saya menulis gaya di dalam aturan kosong itu
4. Plugin https://github.com/ronniekk/css-x-fire menyinkronkan kembali perubahan yang saya buat di firebug ke file yang lebih sedikit, ia menemukan aturan kosong, dan meletakkan di sana gaya yang saya tentukan di firebug.

Persyaratannya adalah aturan harus sudah ada agar plugin dapat menyinkronkan kembali dengan benar, dan jelas, jika elemen belum memiliki gaya sebelumnya, saya harus membuat aturan kosong untuk pertama kalinya. Ini berfungsi ketika saya menggunakan CSS murni, tetapi sekarang, ketika saya beralih ke KURANG, saya menyadari bahwa kompiler menghapus aturan kosong, dan plugin tidak dapat menyinkronkan kembali gaya.

Saya menyadari bahwa itu adalah kasus penggunaan yang cukup sempit ...

Ini sepertinya kasus penggunaan khusus _very_. Dalam kebanyakan kasus, orang lebih suka KURANG mengoptimalkan CSS mereka dan _tidak_ meninggalkan aturan kosong.

Saya sarankan menggunakan less.watch() untuk secara otomatis menyegarkan gaya Anda:

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

atau tambahkan #!watch ke URL Anda.

Jika Anda memiliki masalah, ada beberapa saran di sini: http://www.paulsprangers.com/2011/04/quick-tip-less-js-in-development-and-watch-mode/

Saran bagus dari @Soviut. juga jika Anda tidak suka itu, untuk mengatasinya tambahkan aturan palsu misalnya

temp: ruleset;

Sepakat. Solusi @agatronic melakukan apa yang Anda butuhkan tanpa menyebabkan setiap file KURANG lainnya menghasilkan CSS yang tidak efisien.

@agatronic itulah yang saya lakukan selama 2 minggu terakhir sejak saya mulai menggunakan KURANG, tetapi beberapa kali aturan palsu tersebut masuk ke produksi karena saya lupa menghapusnya, jadi saya pikir mungkin ada cara yang lebih jelas untuk memperbaikinya :(

@Soviut sayangnya itu alur kerja yang sama sekali berbeda, saya belum siap untuk menyerah karena menggunakan Lebih Sedikit ... juga menggunakan lebih sedikit kompiler di browser menyebabkan beberapa masalah kinerja yang serius, pemuatan halaman meningkat dari 500-700 md menjadi 2-3 dtk..

Saya mengerti bahwa opsi ini tidak akan ditambahkan, dan saya setuju dengan Anda, tetapi Jika itu bukan masalah, dapatkah Anda memberi tahu saya di file kode sumber mana saya dapat mengubah perilaku sendiri?

coba ganti ini

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

@chetzof Saya menemukan solusi untuk ini. itu bukan cara TERBAIK, tetapi bekerja untuk apa yang Anda cari.

saya telah mengatakan seperti itu:

pemilih { /**/ }

itu akan tampak kosong di pembakar.

@d4ng3rmax Poin keren!
saya pikir saya memiliki alur kerja dev yang sama yang disebutkan @chetzof .
Terima kasih.

Hal ini harus dimiliki untuk digunakan selama pengembangan dengan css-modules .
Sangat melelahkan untuk memanaskan semua selektor selama perancah dan kemudian berhasil menghapusnya.

.main {
/*! keep */
}

.loading {
/*! keep */
}

.button {
/*! keep */
}

.form {
/*! keep */
}

@garkin Apa alasan/kasus penggunaan Anda untuk menulis pemilih Anda seperti itu dengan modul CSS?

Jika tidak, mereka akan menjadi undefined selama fase impor.

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>
    }
}

Ini mengarah ke pengecualian runtime dan merusak penggantian modul panas. Mencegah penyeleksi menghapus perbaikan semua masalah itu.
Tetapi selama scaffolding Anda harus selalu ingat bahwa penyeleksi akan dihapus dan Anda harus melawan kompiler untuk mencegahnya. Dan kemudian semua komentar /*! keep */ perlu dihapus suatu saat nanti.

@garkin Hmm... bukankah jawabannya hanya untuk menyelesaikan penulisan stylesheet Anda? Saya mengatakan itu masalah yang hanya disebabkan oleh pendekatan pengembangan ini.

Misalnya, di tempat saya bekerja, kami menggunakan Less dan Sass bergantung pada tim, dan dalam pengaturan build Sass kami saat ini, penyeleksi kosong tidak akan melewati linting (aplikasi tidak akan dikompilasi). Jadi saya terpaksa mengubah pendekatan saya dengan modul CSS/Bereaksi.

Benar-benar pola inilah masalahnya:

{
     [css.loading]: isLoading
}

Jika Anda mengubah ke pola ini, itu tidak akan menyebabkan pengecualian:

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

Dalam contoh Anda, Anda mencoba mendefinisikan properti objek dengan nama yang mungkin tidak terdefinisi. Jika Anda mengganti logika, kelas Anda bisa tidak terdefinisi dan tidak ada pengecualian yang akan dilemparkan.

Ini disebut "selesaikan menulis stylesheet Anda" membutuhkan konteks kognitif tertentu dan bisa memakan banyak waktu. Jauh lebih mudah dilakukan setelah langkah scaffolding dengan markup dan mengerjakan HMR di tangan.

Pola ini adalah pedoman dominan dan semi-resmi untuk digunakan, itu adalah bagian dari distribusi React beberapa waktu lalu.
Dan sampel ini jelas disuling. Cara Anda tidak dapat dibaca dan tidak dapat diskalakan.

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-modul adalah pendekatan utama untuk melakukan gaya hari ini dan akan lebih baik lagi di masa depan.
Menghapus selektor kosong - mengubah semantik kode secara berbelit-belit saat digunakan dengan modul css.

Perilaku ini setidaknya harus dapat dihindari melalui konfigurasi.

Itu menarik. Pembukaan kembali tidak hanya untuk kasus penggunaan itu tetapi karena Less seharusnya tidak berada dalam bisnis "pembersihan" CSS. Opsi compress tidak digunakan lagi karena alasan yang sama yaitu ada banyak alat yang dipelihara yang akan menghapus pemilih/kompresi/tambahan awalan, dll.

Kemungkinan perilaku ini dibuat ketika pemilih kosong tidak relevan dengan browser, tetapi agak valid bahwa itu tidak relevan sebagai data saat Anda memasukkan modul CSS.

Sebenarnya, kecuali seseorang keberatan, saya pikir ini aman untuk diterapkan sebagai opsi. IMO itu akan menjadi removeEmptyRulesets (bukan penyeleksi) dengan nilai default true .

Sunting: atau haruskah keepEmptyRulesets dengan nilai default false ? Mungkin yang terakhir, karena memudahkan pemeriksaan kesalahan saat tidak ditentukan.

ketika Anda memperhitungkan modul CSS

Dan itu tidak terbatas pada mereka saja. Pertimbangkan juga hal-hal seperti akses terprogram melalui CSSOM .

Saya akan mengatakan keepEmptyRulesets adalah pilihan yang baik untuk ditambahkan.
Sedikit di sisi verbose, mungkin. Tidak terlalu bagus untuk CLI: --keep-empty-rulesets

Sedikit di sisi verbose, mungkin

Saya tidak setuju, tetapi apakah Anda memiliki saran alternatif? Sepertinya perilaku yang sangat spesifik, jadi terkadang membantu untuk menjadi eksplisit. Tidak ada yang menghentikannya dari menjadi keepEmptyRulesets di API dan --keep-rulesets di CLI. Atau bahkan --keep-empty

Haruskah hanya keepEmpty untuk keduanya?

saya akan menggunakan:

1. outputEmptyRulesets : true|false sebagai opsi API;
2. --empty-rulesets sebagai sakelar CLI bentuk lengkap; dan
3. -er atau mungkin -empty sebagai toggle CLI singkatan.

@rjgotten Saya baik-baik saja dengan itu. Saya tidak diinvestasikan secara emosional lol. @garkin - bagaimana perasaan Anda tentang ini?

Terlihat baik-baik saja untuk saya.

Kapan kita bisa mengharapkan implementasi aktualnya?
Ini juga menjadi masalah bagi kami.

@orchidoris PR selamat datang!

Plugin solusi...

Menambahkan __NOOP__: 1; ke setiap pemilih, lalu menghapusnya setelah lebih sedikit selesai.

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

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