Can I disable processing of specific css features, e.g. logical properties or oklch processing?

[jools-r]

Is there a way to exclude certain css features, or alternatively portions of sass / css files from being processed (i.e. with a comment in the file à la stylelint)?

For example, I'd like to maintain my logical properties (padding-inline-start vs padding-left) and oklch color specifications. I've tried adding supports css-logical-props to my browserslist specification, but the css directives are still converted back to padding-left etc. The RTL conversion adds :lang(…) and :not(:lang(…)) blocks to the css output which raises the specificity of some selectors.

If I use oklch in my custom properties (CSS variables), I get nested @supports oklab blocks.

Any ideas welcome?

[jools-r]

I've seen in the meantime that LightningCSS does support excluding processing of certain CSS features through feature flags as described in the LightningCSS docs. Looking there, my two cases would be covered by:

exclude: LogicalProperties | Features.OklabColors

(or the Features.Colors shorthand which includes OKlabColors and others).

However, I'm at a loss as to how I can set these feature flags in package.json or .parcelrc (or elsewhere). I'm targeting my sass file directly as a source in package.json and not bringing it in via a js file. Again, any assistance welcome.

[jools-r]

This is not an answer to the specific question, but an interim partial solution:

Setting browserslist in package.json to include and fully supports css-logical-props raises the browser transpiling boundary high enough to prevent conversion of logical properties.

However I didn't find a corresponding caniuse-lite feature for oklch colours. I tried with css-lch-lab and with css-color-function but both result in the same initial problem of nested @supports oklab blocks in the compiled css.

I'd still be interested in a means of excluding certain features when compiling css from sass.