Closed tqwewe closed 9 months ago
Hi, what's your project set up like? Is there Sass processing configured or anything like that?
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.
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
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
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.
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
Closing as this is an issue with lightningcss and not us. Feel free to open an issue there
I am using a simple css file:
However, when building with
cargo leptos build
, it generates the following css intarget/site/pkg/app.css
: