[Feature Request] @important rule

[martinszeltins]

PostCSS has this really useful plugin called postcss-important-startstop that adds an @important rule and everything inside becomes !important. This is very useful when you need to override 3rd party library CSS. Sometimes libraries like Bootstrap define their own !important rules and it is only possible to override them with another !important rule and this is the reason why such a plugin is very useful to have.

Example Input:

@important {
  .card {
    color: red;
  }

  .a {
    color: black;
  }
}

Example Output:

.card {
  color: red !important;
}

.a {
  color: black !important;
}

This should be implemented in Rust as part of Lightning CSS itself (not as a JavaScript plugin) as it says in the docs - LightningCSS docs:

Custom transforms (JavaScript plugins) have a build time cost: it can be around 2x slower to compile with a JS visitor than without. This means visitors should generally be used to implement custom, non-standard CSS extensions. Common standard transforms such as compiling modern standard CSS features (and draft specs) for older browsers should be done in Rust as part of Lightning CSS itself. Please open an issue if there's a feature we don't handle yet.

[devongovett]

A more modern alternative to this would be to use cascade layers, which are now supported in every browser.

If you want to re-create this exact syntax though, you'll need to write a JS transform plugin. I try not to add syntax extensions to CSS in the default implementation.

[martinszeltins]

A more modern alternative to this would be to use cascade layers, which are now supported in every browser.

If you want to re-create this exact syntax though, you'll need to write a JS transform plugin. I try not to add syntax extensions to CSS in the default implementation.

I could be wrong but I don't think cascade layers can easily solve the issue of a 3rd party library that has CSS using !important and I need to override it. Isn't the idea of lightningcss to have all the main plugins that people used to install using postcss now be directly inside of the lightningcss Rust core for fast parsing? Otherwise we're back to parsing CSS with JavaScript which is so much slower. If I need to write a custom JS transform plugin then might as well keep using PostCSS.