lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

(config question, not a bug) Config: default + Safari 14 support

Open etsystoyan opened this issue 1 year ago • 4 comments

I have a hard time with configuration. I went ahead with the default config but found rendering bugs in older Safari. So I'd like to support Safari >= 14 in addition to the default config. How do I go about that?

Seems like if I specify Safari using browserlist, all the smart lightningcss defaults go out the window and I'm in charge. So in effect specifying a target Safari >= 14 all the other browser tweaks are gone. No matter how I played with the browser targets (like last 2 versions, not dead) I couldn't match the defaults (e.g. various vendor prefixes are gone.) And I have a hard time finding what these defaults are. I'd like to be able to say "you do you but also support old safari" and can't figure out how to do it. I tried the concept of Features but even if I turn off all the features I still don't get the result I need.

From my cursory understanding the support is setup based on browser version during build time plus additional feature tweaking. I'd love to update the former without losing the latter

BTW, the Safari parts I'd love to have back in the output are due to its lack of support for

  • width>=0 (as opposed to min-width: 0)
  • text-decoration shorthand, e.g. text-decoration: underline dashed (I need -webkit-text-decoration)

etsystoyan avatar Apr 16 '24 16:04 etsystoyan

all the smart lightningcss defaults

Something is providing a default browserslist target list to Lightning CSS, so it really depends on how you're running Lightning CSS (as part of another build tool?)

Once you know that current value, you can just add your Safari range to it.

So it might just be that your browserslist config should be defaults, Safari >= 14

mischnic avatar Apr 19 '24 15:04 mischnic

I'm running it standalone from the CLI (and as a node library), so for example this is the default:

lightningcss --minify --error-recovery before.css -o after.css

then

lightningcss --minify --targets 'defaults' --error-recovery before.css -o after.css

... gives me a different output than no targets at all

One difference I see is when I specify a Safari >= 14 target a lot of old -webkit- prefixes are stripped. And these are kept when no target is given (LightningCSS defaults). I think this is cool, but makes me slightly nervous that default LightningCSS keeps them. Even though LightningCSS seems to assume a newer Safari by default (e.g. using inset property which is not in Safari 14)

Once you know that current value, you can just add your Safari range to it.

My plan exactly, except I cannot figure out that current value

etsystoyan avatar Apr 19 '24 16:04 etsystoyan

Strange, it should by default use defaults in that case according to this comment:

https://github.com/parcel-bundler/lightningcss/blob/baa1a2b7fa52eeb3827f8edcc2e14de33cd69ad0/src/targets.rs#L54-L74

mischnic avatar Apr 19 '24 18:04 mischnic

Interesting, I thought it's last 10 browser versions and further tweaking, happening during build time: https://github.com/parcel-bundler/lightningcss/blob/baa1a2b7fa52eeb3827f8edcc2e14de33cd69ad0/scripts/build-prefixes.js#L33-L42

etsystoyan avatar Apr 19 '24 20:04 etsystoyan