Astro Info
Astro v5.10.2
Node v22.14.0
System macOS (arm64)
Package Manager pnpm
Output static
Adapter none
Integrations none
If this issue only occurs in one browser, which browser is a problem?
n/a
Describe the Bug
When I pass a class to a shared component, you expect to be able to target the root element and its children.
This works fine in vanilla Astro, but is breaking as soon as you turn on the LightningCSS transformer in astro.config.ts:
vite: {
css: {
transformer: "lightningcss",
},
},What's the expected result?
Expected Output
Astro by default produces the expected output:
<nav data-astro-cid-j7pv25f6="">
<ul class="nav" data-astro-cid-j7pv25f6="true" data-astro-cid-6bqx7lls="">
<li data-astro-cid-6bqx7lls="">
<a href="#hello" data-astro-cid-6bqx7lls="">Hello
</a>
</li>
<li data-astro-cid-6bqx7lls="">
<a href="#bye" data-astro-cid-6bqx7lls="">Bye
</a>
</li>
</ul>
</nav>.nav[data-astro-cid-j7pv25f6] {
a {
color: deeppink;
}
}Astro - LightningCSS
Meanwhile, enabling LightningCSS transformer causes this output:
<nav data-astro-cid-j7pv25f6="">
<ul class="nav" data-astro-cid-j7pv25f6="true" data-astro-cid-6bqx7lls="">
<li data-astro-cid-6bqx7lls="">
<a href="#hello" data-astro-cid-6bqx7lls="">Hello
</a>
</li>
<li data-astro-cid-6bqx7lls="">
<a href="#bye" data-astro-cid-6bqx7lls="">Bye
</a>
</li>
</ul>
</nav>.nav[data-astro-cid-j7pv25f6] a[data-astro-cid-j7pv25f6] {
color: #ff1493;
}Link to Minimal Reproducible Example
https://stackblitz.com/~/github.com/altano/astro-scoping-lightningcss-bug
Participation
Astro Info
If this issue only occurs in one browser, which browser is a problem?
n/a
Describe the Bug
When I pass a class to a shared component, you expect to be able to target the root element and its children.
This works fine in vanilla Astro, but is breaking as soon as you turn on the LightningCSS transformer in astro.config.ts:
What's the expected result?
Expected Output
Astro by default produces the expected output:
Astro - LightningCSS
Meanwhile, enabling LightningCSS transformer causes this output:
Link to Minimal Reproducible Example
https://stackblitz.com/~/github.com/altano/astro-scoping-lightningcss-bug
Participation