Wrong CSS generated

[tqwewe]

I am using a simple css file:

.btn:is(input[type="checkbox"]),
.btn:is(input[type="radio"]) {
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

However, when building with cargo leptos build, it generates the following css in target/site/pkg/app.css:

.btninput[type="checkbox"], .btninput[type="radio"] {
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

[aperepel]

Hi, what's your project set up like? Is there Sass processing configured or anything like that?

[tqwewe]

It's using tailwind with postcss, using npx tailwind. The tailwind install is essentially default with DaisyUI, though I don't think the preprocessors would be causing any issues as the CSS snippets I posted are after any preprocessing is done.

To fix it temporarily, I cloned cargo leptos and added a new config to ignore processing css, so it simply copies the file without any browserquery or anything.

[aperepel]

I don't believe this has anything to do with cargo leptos. Tried a quick test, and tailwindcss doesn't mangle it either. Something is going on with pre-/post-processing in your config, I'd look there. Here's a quick rundown of what I tried:

❯ cat input.css
.btn:is(input[type="checkbox"]),
.btn:is(input[type="radio"]) {
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
❯ /Users/agrande/Library/Caches/cargo-leptos/tailwindcss-v3.3.3/tailwindcss-v3.3.3/tailwindcss-macos-arm64 -i input.css -o output.css

Rebuilding...

Done in 59ms.
❯ ll
total 16
-rw-r--r--  1 agrande  wheel   154B Aug 20 11:12 input.css
-rw-r--r--  1 agrande  wheel   154B Aug 20 11:12 output.css
❯ cat output.css
.btn:is(input[type="checkbox"]),
.btn:is(input[type="radio"]) {
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
❯ diff -u input.css output.css
❯ ll
total 16
-rw-r--r--  1 agrande  wheel   154B Aug 20 11:12 input.css
-rw-r--r--  1 agrande  wheel   154B Aug 20 11:12 output.css

[prscoelho]

Does https://github.com/leptos-rs/cargo-leptos/pull/194 fix your issue?

EDIT: nevermind, it shouldn't. Regardless, it's lightningcss that converts the names: playground

[prscoelho]

Coming back to this, I think this would be the more "standard" css:

input[type="checkbox"].btn, input[type="radio"].btn {
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

And then when you add :is():

:is(input[type="checkbox"], input[type="radio"]).btn {
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Lightningcss parses these correctly. Your version as is works in the browser, but is a bit unusual, the class selector goes after the attribute usually while yours is reversed.

[tqwewe]

Thank you for the input @prscoelho The CSS I posted is actually generated from tailwind with DiasyUI. Even if it might be "unusual", it's still correct accoring to the spec I believe, so should still be considered a bug within lightningcss

[benwis]

Closing as this is an issue with lightningcss and not us. Feel free to open an issue there