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

[etsystoyan]

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)

[mischnic]

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

[etsystoyan]

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

[mischnic]

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

lightningcss/src/targets.rs

Lines 54 to 74 in baa1a2b

	/// Finds browserslist configuration, selects queries by environment and loads the resulting queries into LightningCSS targets.
	///
	/// Configuration resolution is modeled after the original `browserslist` nodeJS package.
	/// The configuration is resolved in the following order:
	///
	/// - If a `BROWSERSLIST` environment variable is present, then load targets from its value. This is analog to the `--targets` CLI option.
	/// Example: `BROWSERSLIST="firefox ESR" lightningcss [OPTIONS] <INPUT_FILE>`
	/// - If a `BROWSERSLIST_CONFIG` environment variable is present, then resolve the file at the provided path.
	/// Then parse and use targets from `package.json` or any browserslist configuration file pointed to by the environment variable.
	/// Example: `BROWSERSLIST_CONFIG="../config/browserslist" lightningcss [OPTIONS] <INPUT_FILE>`
	/// - If none of the above apply, then find, parse and use targets from the first `browserslist`, `.browserslistrc`
	/// or `package.json` configuration file in any parent directory.
	///
	/// When using parsed configuration from `browserslist`, `.browserslistrc` or `package.json` configuration files,
	/// the environment determined by:
	///
	/// - the `BROWSERSLIST_ENV` environment variable if present,
	/// - otherwise the `NODE_ENV` environment varialbe if present,
	/// - otherwise `production` is used.
	///
	/// If no targets are found for the resulting environment, then the `defaults` configuration section is used.

[etsystoyan]

Interesting, I thought it's last 10 browser versions and further tweaking, happening during build time:

lightningcss/scripts/build-prefixes.js

Lines 33 to 42 in baa1a2b

	const latestBrowserVersions = {};
	for (let b in browsers) {
	let versions = browsers[b].versions.slice(-10);
	for (let i = versions.length - 1; i >= 0; i--) {
	if (versions[i] != null && versions[i] != "all" && versions[i] != "TP") {
	latestBrowserVersions[b] = versions[i];
	break;
	}
	}
	}