I'm not sure if this is a bug or feature.

/*Input*/
.a { font-size: large; }
#b { color: aqua; }
.a { padding: 0.5rem; }

/*Output*/
.a{font-size:large}#b{color:#0ff}.a{padding:.5rem}

But if we have the same class adjacent to each other

/*Input*/
#b { color: aqua; }
.a { font-size: large; }
.a { padding: 0.5rem; }

/*Output*/
#b{color:#0ff}.a{padding:.5rem;font-size:large}

I would expect both inputs to produce the same output (the second one).

I'm looking for a CSS parser that will replace CSS variables with their values (accounting for the cascade) for performance reasons.

I have CSS that looks like this throughout my stylesheets:

input.email-field-input {
  border: var(--email-input-border,
    var(--input-border,
      var(--border,
        1px solid red
      )
    )
  );
}

If in a theme file I define only one of these (for example):

:root {
  --input-border: 2px dotted blue;
}

Then I want to be able to run the parser and end up with:

input.email-field-input {
  border: 2px dotted blue;
}

Variables gone – correct values substituted.

But then if I define the same variable further down, say:

input {
  --input-border: 3px dashed yellow;
}

Then I would expect the compiled CSS to change accordingly:

input.email-field-input {
  border: 3px dashed yellow;
}

And, of course, if I defined none of the variables at all, I'd expect the final default:

input.email-field-input {
  border: 1px solid red;
}

Does Parcel-CSS do this? If not, is it or can it be under consideration as an enhancement?

I am still working out the kinks in this idea for theming a site, but however it works out, CSS variables are a performance hit I'd like to avoid. And unless they are dynamically generated, there is no point in not doing substitution in a static CSS file.

Thanks!

https://github.com/parcel-bundler/parcel-css/blob/master/LICENSE says this project uses the MIT license, but the CSS parser code is built on the implementation in Firefox/Servo, which both use the MPL 2.0. See Q9 in https://www.mozilla.org/en-US/MPL/2.0/FAQ/. https://www.mozilla.org/en-US/MPL/license-policy/ mentions that the MIT license is compatible with the MPL 2.0, but that doesn't mean that it can be relicensed entirely.

Original issue: evanw/esbuild#1821 (esbuild has been resolved).

.foo {
  width: calc(100% / 3);
}

lightningcss minifier output

.foo{width:33.3333%}

esbuild(old version) minifier output

.foo{width:33.33333%}

Any attempt to calculate and then simplify the percentages in calc() can be dangerous! Please turn off this feature by default.

Demo: https://codepen.io/yisi/pen/OJxVXYo

Although a new version of Chrome switched to TableNG to fix this issue, there are still many other browsers that use older versions of Blink.

Please make sure that the CSS minifier does not break the page layout, in which case the number of compressed bytes is not that important.

See also: https://stackoverflow.com/questions/31719624/displaytable-div-with-percentage-width-1px-bug

Not really an issue but i've been trying to figure out how to install this and the instruction aren't exactly clear

I'd like to minify my stylesheet in-memory, since in my app, it's generated from CSS-in-RS using stylist and then the app is pre-rendered in SSR, so the CSS is never kept on-disk.

Maybe if a trait was used that parsed either a Path on-disk or &str (for CSS in-memory) for this function:
https://docs.rs/parcel_css/1.0.0-alpha.11/parcel_css/stylesheet/struct.StyleSheet.html#method.parse

The latest version of autoprefixer should remove the need for the workaround for file selector button data.

Hi @devongovett ! 👋 First of all, thanks for all of your effort on this, really amazing for the community to have such a great tool!

I was looking for a feature of @parcel/css that would allow for removal of duplicate properties.

For example:

Input

div {
  color: green;
  color: red;
}

@parcel/css Output (Playground Link)

div{color:green;color:red}

Expected Output

div{color:red}

However, it could be a problem with my understanding of the CSS spec somehow, because I see that some duplicated properties do indeed get dropped:

Input

div {
  background: green;
  background: red;
}

@parcel/css Output (Playground Link)

div{background:red}

I have a use case where I'd like to construct a new StyleSheet with an already populated CssRuleList. Is this something you would consider the libary to support?

https://drafts.csswg.org/css-nesting-1/

It should be behind an option to enable parsing and compiling to flattened selectors, like https://github.com/csstools/postcss-nesting.

css.transform({
  // ...
  drafts: {
    nesting: true
  }
});

There have been some requests for a simple CLI for use cases where you aren't using another build tool:

• https://twitter.com/chriscoyier/status/1481350761183420421
• https://twitter.com/WickyNilliams/status/1481378796439752707
• https://twitter.com/Benoit_Chantre/status/1481374449819697152

We could build something super simple using Rust. I think just adding a main.rs should be enough to get a binary target.

Unsure if this is how unusedSymbols is intended to work.

But say I have the following:

const { code } = css.transform({
    filename: 'style.css',
    code: Buffer.from(`
        .foo .bar {
            color: red;
        }

        .bar {
            color: green;
        }

        #foo {
            color: blue;
        }
    `),
    minify: true,
    unusedSymbols: ['#foo'],
})

The resulting code is:

.foo .bar{color:red}.bar{color:green}#foo{color:#00f}

Whereas

const { code } = css.transform({
    filename: 'style.css',
    code: Buffer.from(`
        .foo .bar {
            color: red;
        }

        .bar {
            color: green;
        }

        #foo {
            color: blue;
        }
    `),
    minify: true,
    unusedSymbols: ['foo'],
})

Produces:

.bar{color:green}

I would expect to be able to pass selectors to unusedSymbols as the typedocs mention as such https://github.com/parcel-bundler/parcel-css/blob/40868cbb111a13551a508629aa0d11c5e9204c64/node/index.d.ts#L30-L35

I'm trying to replace sass with css + nested selectors. Everything looks fine in my production build, but the development build isn't providing valid styles to the browser. Looking at the browser's network tab, it seems the css that it's being served has nesting built into it. No browser currently supports nesting so I was expecting it to be transpiled.

parcel command:

parcel serve ./public/index.html --dist-dir .parcel-dev --public-url / --port 3000

.parcelrc:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.css": ["@parcel/transformer-css-experimental"]
  },
  "optimizers": {
    "*.css": ["@parcel/optimizer-css"]
  }
}

@parcel/transformer-css config in package.json:

  "@parcel/transformer-css": {
    "drafts": {
      "nesting": true
    }
  }

browserslist config in package.json:

  "browserslist": {
    "production": [
      "last 3 chrome version",
      "last 2 firefox version",
      "last 1 safari version",
      "firefox esr"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Full project: (Link is to the PR making these changes to add css): nattthebear/ff12characterplanner#28

I was trying to add @parcel/css to https://github.com/GoalSmashers/css-minification-benchmark

running this package complains about a missing detect-libc package.

(On a side note, I added the package manually and @parcel/css is indeed the fastest in all cases, it does seem to trigger a ParseError { kind: Basic(EndOfInput), location: SourceLocation { line: 18, column: 79 } } on gumby.css though)

Looking forward for the future of this library, it's very promising !

https://github.com/css-modules/css-modules

• local selectors by default
• local CustomIdent (e.g. animation names)
• :local(...)
• :global(...)
• :local (non-function syntax)
• :global (non-function syntax)
• :import
• :export
• @value
• composes property

Before:

    .a {
        background: none
    }
    .b {
        background: none center
    }
    .c {
        background: url("test.png") transparent none repeat scroll
    }

After:

.a{background:#0000}.b{background:50% 50%}.c{background:url("test.png") transparent none repeat scroll}

For .a we even have deoptimization (none vs #0000).

Possible optimised output (from csso):

.a{background:0 0}.b{background:center}.c{background:url(test.png)}

As of #44 we have a basic CLI. Currently it can minify and output to stdout or a file, but might be nice to add a few more features.

• --targets option. Could accept a browserslist and convert them to Parcel CSS targets with browserslist-rs (see #37).
• --sourcemap option. Should output a source map file in addition to a css file, and add a sourceMappingUrl comment to the CSS.
• --nesting option to enable parsing CSS nesting.
• --css-modules option to enable CSS modules. Output a JSON file in addition to compiled CSS?
• Ability to compile multiple files at once, either by passing file names or directories.

https://caniuse.com/css-logical-props

Only supported very recently. It can be down leveled, but might need to be opt-in because this changes the specificity of rules and requires a dir attribute to be placed on an ancestor element (since :dir(...) is not yet widely supported (https://caniuse.com/css-dir-pseudo).

.foo {
  margin-inline-start: 10px;
}

to

[dir="ltr"] .foo {
  margin-left: 10px;
}

[dir="rtl"] .foo {
  margin-right: 10px;
}

See https://github.com/csstools/postcss-logical and https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class

Before:

.a {
    font: normal normal 600 9px/normal Charcoal;
}
.b {
    font: normal normal 500 medium/normal Charcoal;
}
.c {
    font: normal normal 400 medium Charcoal;
}
.d {
    font: normal normal 500 medium/10px Charcoal;
}
.e {
    font: normal;
}
.f {
    font: bold;
}
.g {
    font: medium;
}

After:

.a{font:normal normal 600 9px/normal Charcoal}.b{font:normal normal 500 medium/normal Charcoal}.c{font:400px medium Charcoal}.d{font:normal normal 500 medium/10px Charcoal}.e{font:normal}.f{font:bold}.g{font:medium}

Possible optimised output (from csso):

.a{font:600 9px Charcoal}.b{font:500 Charcoal}.c{font:400 Charcoal}.d{font:500 medium/10px Charcoal}.e{font:normal}.f{font:700}.g{font:normal}

I'm starting to get my head around Rust, slightly. As a good little challenge and starter project I'm attempting to recreate https://github.com/FullHuman/purgecss using this library, find progress here https://github.com/deckchairlabs/purginator.

Is there an better way to get the Selector components into a string? I'm not sure how to do it correctly for the NestedRule

I'm currently doing the below:

https://github.com/deckchairlabs/purginator/blob/83a246d658e74bd02b5309ee6804d4f5ecdd6ed5/purginator/src/purger.rs#L8-L17

I was having a look at what postcss plugins can be replaced by @parcel/css

Since the documentation mentions that logical properties are supported, I tried it and got an incomplete result:

Input:

.banner {
    color: #222222;
    inset: logical 0 5px 10px;
    padding-inline: 20px 40px;
    resize: block;
    transition: color 200ms;
  }

Output according to https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical

.banner:dir(ltr) {
  padding-left: 20px;
  padding-right: 40px;
}
.banner:dir(rtl) {
  padding-right: 20px;
  padding-left: 40px;
}
.banner {
  color: #222222;
  top: 0;
  left: 5px;
  bottom: 10px;
  right: 5px;
  resize: vertical;
  transition: color 200ms;
}

Output of @parcel/css, with edge 18 as target browser

.banner {
  color: #222;
  inset: logical 0 5px 10px;
  resize: block;
  padding-left: var(--ltr, 20px) var(--rtl, 40px);
  padding-right: var(--ltr, 40px) var(--rtl, 20px);
  transition: color .2s;
}

[dir="ltr"] {
  --ltr: initial;
  --rtl: ;
}

[dir="rtl"] {
  --ltr: ;
  --rtl: initial;
}

I do get the trick with custom properties but inset should be converted into top left, bottom and right

Here's a link to the proposal : https://drafts.csswg.org/css-logical/#propdef-inset

Usually I'd propose to make a PR but I currently have no knowledge in Rust, I'll learn but that might take time.

.form-input:-moz-placeholder-shown {
  color: black;
}
.form-input:-ms-input-placeholder {
  color: black;
}
.form-input:placeholder-shown {
  color: black;
}

is merged into a single rule. But browsers ignore rules with invalid selectors, so the rule won't apply on any browser.

via https://github.com/evanw/esbuild/releases/tag/v0.13.14

The snippet .foo { border: 1px solid black; border-width: 1px 1px 0 0; } gets transpiled+minified to .foo{border-top:1px solid #000;border-bottom:0 solid #000;border-left:0 solid #000;border-right:1px solid #000}.

const css = require('@parcel/css');

const a = `.foo { border: 1px solid black; border-width: 1px 1px 0 0; }`
let { code } = css.transform({
  filename: 'style.css',
  code: Buffer.from(a),
  minify: true,
  sourceMap: true,
  targets: {
    // Semver versions are represented using a single 24-bit number, with one component per byte.
    // e.g. to represent 13.2.0, the following could be used.
    safari: (13 << 16) | (2 << 8)
  }
});

console.log(`${a} transformed to ${code}`);

Outputs: .foo { border: 1px solid black; border-width: 1px 1px 0 0; } transformed to .foo{border-top:1px solid #000;border-bottom:0 solid #000;border-left:0 solid #000;border-right:1px solid #000}

https://caniuse.com/css-any-link

https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-pseudo-class-any-link

const css = require('@parcel/css');

css.transform({
    filename: 'style.css',
    code: Buffer.from('.clearfix { *zoom: 1; }'),
    minify: true
});

results in

SyntaxError: Unexpected token Delim('*')
    at Object.<anonymous> (/home/dominikg/develop/vite-ecosystem-ci/parcel.cjs:3:5)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47 {
  fileName: 'style.css',
  source: '.clearfix { *zoom: 1; }',
  loc: { line: 1, column: 13 }
}

found via css-minification-benchmark. GoalSmashers/css-minification-benchmark#101

Some of their test data is old and still has them: https://github.com/GoalSmashers/css-minification-benchmark/blob/e1d52eaea8e1107e95ea06f5cc085227cd36b2c0/data/gumby.css#L1216

iirc they were used to add special treatment for ancient IE

https://stackoverflow.com/questions/1667531/what-does-a-star-preceded-property-mean-in-css

Not sure if it makes sense to live in this package but since we have the AST, would be easy to implement here.

The basic idea is that we could take a css file like this as input:

/* Set the background color of body to tan */
body {
    background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
    body {
        background-color: blue;
    }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
    body {
        background-color: olive;
    }
}

/* Show dark mode when user prefers it */
@media (prefers-color-scheme: dark) {
  body  { 
    background:  #333; 
    color: white;
  }
}

And then split it into 4 files, one for each unique media query included in the file:
Media: N/A

body {
    background-color: tan;
}

Media: screen and (max-width: 992px)

body {
    background-color: blue;
}

Media: screen and (max-width: 600px)

body {
    background-color: olive;
}

Media: (prefers-color-scheme: dark)

body  { 
  background:  #333; 
  color: white;
}

This list of split files could then be used by bundlers (like parcel) to generate multiple <link rel="stylesheet" media="..." href="..." /> in the HTML.

This would be a performance optimization as link tags with media queries are non-render blocking for the browser.

I'm attempting to print a StyleSheet that has a very simple rule defined.

a:hover {
  color: red;
}

Although I'm receiving panicked at 'internal error: entered unreachable code' from https://github.com/parcel-bundler/parcel-css/blob/49cbb536b71e17113c5726a1797a98c41a9f0016/src/selector.rs#L327

I don't really understand what the pseudo_classes option of PrinterOptions is for

.foo {
  -webkit-transition: background 200ms;
  -moz-transition: background 200ms;
  transition: background 230ms;
}

is transformed into

.foo {
  transition-property: background;
  -webkit-transition-duration: .2s;
  -moz-transition-duration: .2s;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-duration: .23s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

I would expect to keep the shorthand properties.

CSS playground

Please note that the vendor-prefixed properties being different is unlikely to be the author's intent in most cases and the tool could produce a warning.

Hi there,

I'm trying to use the crate parcel_css for a rust project on Windows 11 but face a link error related to napi.

I can reproduce the issue with an empty project importing parcel_css.

# File Cargo.toml
[package]
name = "plop"
version = "0.1.0"
edition = "2021"

[dependencies]
parcel_css = "1.0.0-alpha.13"

// File src/main.rs
use parcel_css::stylesheet::StyleSheet;

fn main() {
    let _style = StyleSheet::parse(
        "plop.css".to_owned(),
        "#hello { color: blue; }",
        Default::default(),
    )
    .unwrap();
}

$ cargo clean
$ cargo build
 # ...lot of stuff...
  = note: libnapi-41e4dc39fadfbdc1.rlib(napi-41e4dc39fadfbdc1.napi.6ae83a60-cgu.2.rcgu.o) : error LNK2019: unresolved external symbol napi_get_undefined referenced in function _ZN4napi3env3Env13get_undefined17hb7a6765f73f38a65E
 # ... more stuff...
  fatal error LNK1120: 11 unresolved externals

That being said, I looked a bit into ways to fix the issue and found out my builds would link correctly if I add a build script build.rs to my project (the one importing parcel_css):

# File Cargo.toml
# ...

# Add this build dep 👇
[build-dependencies]
napi-build = "1"

// File build.rs
extern crate napi_build;

fn main() {
    napi_build::setup()
}

$ cargo clean
$ cargo build
   Compiling plop v0.1.0 (C:\Users\Sam\Development\Rust\plop)
warning: cargo:rustc-cdylib-link-arg was specified in the build script of plop v0.1.0 (C:\Users\Sam\Development\Rust\plop), but that package does not contain a cdylib target

Allowing this was an unintended change in the 1.50 release, and may become an error in the future. For more information, see <https://github.com/rust-lang/cargo/issues/9562>.
warning: cargo:rustc-cdylib-link-arg was specified in the build script of plop v0.1.0 (C:\Users\Sam\Development\Rust\plop), but that package does not contain a cdylib target

Allowing this was an unintended change in the 1.50 release, and may become an error in the future. For more information, see <https://github.com/rust-lang/cargo/issues/9562>.
    Finished dev [unoptimized + debuginfo] target(s) in 2.02s

(the build yields warnings, but is successful)

I don't really get why napi is required when using the crate parcel_css, it seems to be a dependency of parcel_css_node but not the other crates.

A few thoughts:

• Should a build.rs script be added to parcel_css to be sure napi is always built?
• Could the issue be that the cargo workspace is declared in the same Cargo.toml as parcel_css?
• It might be a good idea to also run tests on a windows host (via github action).

What do you think?

https://www.w3.org/TR/css-color-4/

• lab
• lch
• oklab
• oklch
• color()

Only supported by Safari currently. We can downlevel by converting to RGB, but we should preserve the original as well because it will be displayed with a wider color gamut than RGB so we can't perfectly emulate it.

Are there any plans to support Deno? I've tried to import it, but get errors about missing ./pkg directory.

When importing from Skypack https://cdn.skypack.dev/@parcel/css...

@parcel/css/native.js
   Import "./pkg" could not be resolved from file.

• https://drafts.csswg.org/cssom/
• https://drafts.css-houdini.org/css-typed-om/

This could be the JS API for manipulating CSS, rather than inventing our own.

The Media Queries level 5 working draft supports "custom media queries". This is one of the features required to use open-props in a Rust application, but would be useful overall. Prior art exists in the PostCSS Custom Media plugin. It'd be great if parcel-css could support this too. Thanks!

Example

input

/* --modern targets modern devices that support color or hover */
@custom-media --modern (color), (hover);

@media (--modern) and (width > 1024px) {
  .a { color: green; }
}

output

@media ((color) or (hover)) and (width > 1024px) {
  .a { color: green; }
}

References

• Open Props
• Media Queries level 5 spec
• PostCSS Custom Media plugin

The :is selector is fairly new so we should probably downlevel it: https://caniuse.com/css-matches-pseudo. We use it currently to compile nesting as well.

In the general case, this is hard if not impossible to do correctly. It can easily explode in combinations and generate massive CSS, and in some cases might be challenging without knowing the DOM because it's essentially boolean logic (if this selector matches, AND this selector matches). But may work in simple cases. See also postcss/postcss-selector-matches#19 (comment) and https://github.com/csstools/postcss-is-pseudo-class.

Perhaps we could compile to the older :matches or :-webkit-any syntax at least.

I have seen that any input with comment is output without comments even when minification is disabled :

const css = require("@parcel/css");

const inputs = [
  "/* before */ rule { c: 1 } /*! after */",
  `/* before */
            rule { d: 1 }
            /*! after */`
];

inputs.forEach((input) => {
  const { code } = css.transform({
    filename: "",
    code: Buffer.from(input),
    minify: false
  });

  console.log({
    input,
    output: code.toString()
  });
});

Results in

{
  input: '/* before */ rule { c: 1 } /*! after */',
  output: 'rule {\n  c: 1;\n}\n'
}
{
  input: '/* before */\n            rule { d: 1 }\n            /*! after */',
  output: 'rule {\n  d: 1;\n}\n'
}

For most comments that shouldn't be a problem, but if the comment starts with /*! in general it should be preserved as it is used for licenses or other content that was specifically marked to remain in the code.

Is there a way to keep those comments ?

cssinset is not support for Safari, but it still convert to inset without fallback

=== package.json ===

"parcel": "^2.2.0",
"browserslist": [
  "last 2 versions",
  "> 1%",
  "safari >= 11",
  "ie >= 10"
],

=== .parcelrc ===
{
"extends": "@parcel/config-default",
"transformers": {
".html": ["...", "parcel-transformer-html-datasrc"],
".css": ["@parcel/transformer-css-experimental"]
},
"optimizers": {
"*.css": ["@parcel/optimizer-css"]
},
}

=== source code ===

.foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}

=== after parcel build ===
.foo{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:absolute;inset:0}

=== expect result ===
.foo{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:absolute;inset:0;top:0;right:0;bottom:0;left:0}

Hi, Parcel-CSS team. My name is Mike Hoye, and I work for Mozilla.

We've noticed that you've re-used a substantial amount of the Firefox style system code in parcel-css; for example, compare

• https://github.com/parcel-bundler/parcel-css/blob/9f93ab05672b06c9b71ab4a3edf1c4d1380f6953/src/media_query.rs#L192-L240
   
  and

• https://searchfox.org/mozilla-central/rev/5ce782034b736293836a2850ab698e149ca04657/servo/components/style/media_queries/media_condition.rs#96-144

While that's OK and we're always happy to see Mozilla code finding new life in new projects, we license it under the Mozilla Public License, rather than the MIT license parcel-css is using, and modified MPL-licensed code should remain covered by the MPL. I'm sure this was an unintentional oversight, but we'd appreciate it if you could make the necessary corrections in those files relying on Mozilla-created code..

Thank you, and you can reach me at mhoye at mozilla dot com if you have any questions.

• mhoye

Currently @parcel/css includes .node files for all platforms regardless of target platform, which results in ~32mb disk space usage.

Is there any reason for not selectively installing the platform-specific binary (via optional dependencies) like esbuild does? That could bring down the download size significantly to ~4mb (although results in more resolution http calls).

This is a newbie question, but maybe worth asking.

Is there now a way to extract CSS-in-JSS and process it in a way or another?

I am specifically thinking Lit styles, but I think this about about styles how I see them in any web components in general.

Should use the parcel_sourcemap crate from https://github.com/parcel-bundler/source-map.

I think it would be fine to just map the rules, and not individual declarations/values. That's all browser dev tools show anyway. Should be able to get location information from the parser already, store this in the rule nodes, and generate a source map from that in the printer.

There's already browserslist-rs, so we can consider switching to it.

Pros:

• It's written in Rust and "parcel-css" is also written in Rust, so integration can be easier.
• It doesn't rely on JavaScript, so if someone uses "parcel-css" as a Rust crate, he/she can also use "browserslist" feature. Also, online demo can also support this.

Cons:

• So far, "browserslist-rs" has implemented most of the features in JavaScript-based "browserslist", but not 100%, so some rarely used features can't be available.
• "Can I Use" data are bundled, while in JavaScript-based "browserslist" those data are installed as dependencies, so data statistics may not up-to-date.

First, thank you for making this library. It's wonderful to see something like this, especially as an independent library, and I know how much work it is to make one of these.

I looked into transforming CSS nesting in esbuild recently and I was wondering how this library does it. I think I've found a case where this implementation deviates from the CSS nesting specification:

.foo .bar {
  &div { color: red }
}

This library transforms that into this code (live link):

div.foo .bar{color:red}

However, if I'm reading it correctly the specification says this should be transformed into the following code instead (in this section):

div:is(.foo .bar){color:red}

These two code snippets are not equivalent. For example, the following HTML is supposed to render as black if the specification is followed, but renders as red with the output from this library:

<div class="foo">
  <span class="bar">stuff</span>
</div>

Just letting you know about this edge case. I don't need this edge case to work since I'm not using your library myself. Feel free to do what you want with this issue.

Potentially related: #19

Based on https://www.w3.org/Style/CSS/all-properties.en.html

CSS grid

• https://drafts.csswg.org/css-grid-2/
• Vendor prefixing
• <flex> unit

SVG properties

• Fill and stroke
• Markers
• Strokes

Masking

• Spec
• shape function
• path function

Columns

• Spec

Floats

• Spec

Fonts

Some already implemented. Some missing.

• Spec

https://drafts.csswg.org/css-cascade-5/#layering

https://caniuse.com/css-not-sel-list

Old browsers only support a single selector rather than a list. This could be easily down leveled:

:not(.a, .b) => :not(.a):not(.b)

This will be needed for Parcel to replace the current CSS transformer.

• Analyze @import rules (e.g. specifier + media etc.)
• Analyze url(...) references

I'm not sure if this is inline with project goals but I've noticed modern CSS has a lot of very long variable names. If variables are declared in the same file it is somewhat safe to rename the variable names to something shorter.

It's worth noting that shorter variable names are often not that useful for assets that are gzipped because Gzip does this optimization.

https://caniuse.com/css-focus-visible

It should become a class (e.g. .focus-visible) instead of a pseudo class so that a JS polyfill can be used. Should be opt-in. See https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible

Hey, just to let you know I've fixed the background-clip data in the MDN compat data repo so once the next release comes out the workaround you have in scripts folder won't be necessary anymore.

PR Link: mdn/browser-compat-data#14030

Unrecognized at rules should be skipped.

@-ms-viewport {
  width: device-width;
}

SyntaxError: Unknown at rule: @-ms-viewport

https://github.com/twbs/bootstrap/blob/3b558734382ce58b51e5fc676453bfd53bba9201/dist/css/bootstrap.css#L53-L55