lightningcss

lightningcss copied to clipboard

I'm trying to use advanced `attr` using the `type()` function, like in https://una.im/advanced-attr/. However, ligthningcss seems to incorrectly format the `type()`-part of the declaration as the invalid value `type(< length>)`...

larrifax

[Lightning CSS Playground](https://lightningcss.dev/playground#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Afalse%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A7798784%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22%40layer%20one%2C%20one.a%2C%20one.b%3B%5Cn%5Cn%40layer%20one%20%7B%5Cn%20%20%40layer%20b%20%7B%5Cn%20%20%20%20.test1%20%7B%5Cn%20%20%20%20%20%20color%3A%20red%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn%40layer%20one.a%20%7B%5Cn%20%20.test1%20%7B%5Cn%20%20%20%20color%3A%20green%3B%5Cn%20%20%7D%5Cn%7D%5Cn%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D) ```css /* Input */ @layer one, one.a, one.b; @layer one { @layer b { .test1 { color: red; } } } @layer one.a { .test1 { color:...

kirk-loretz-fsn

support an option to keep invalid css in the output

6

This is a follow up issue of https://github.com/parcel-bundler/lightningcss/issues/209 and thank you support `errorRecovery` to make migration from postcss to lightningcss much easier. But there's still a pain point that user...

hardfist

In my project we would like to resolve CSS variables to their corresponding value at build time. However, it appears that as whitespace removal happens before the visitors run whitespace...

mikokofuyu

Support for `::highlight()` pseudo-element

1

Would love to see support for the [`::highlight()` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::highlight), which appears to be [not supported](https://lightningcss.dev/playground/index.html#%7B"minify"%3Atrue%2C"customMedia"%3Atrue%2C"cssModules"%3Afalse%2C"analyzeDependencies"%3Afalse%2C"targets"%3A%7B"chrome"%3A6225920%7D%2C"include"%3A0%2C"exclude"%3A0%2C"source"%3A"%40custom-media%20--modern%20(color)%2C%20(hover)%3B%5Cn%5Cn.foo%20%7B%5Cn%20%20background%3A%20yellow%3B%5Cn%5Cn%20%20-webkit-border-radius%3A%202px%3B%5Cn%20%20-moz-border-radius%3A%202px%3B%5Cn%20%20border-radius%3A%202px%3B%5Cn%5Cn%20%20-webkit-transition%3A%20background%20200ms%3B%5Cn%20%20-moz-transition%3A%20background%20200ms%3B%5Cn%20%20transition%3A%20background%20200ms%3B%5Cn%5Cn%20%20%26.bar%20%7B%5Cn%20%20%20%20color%3A%20green%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn%40media%20(--modern)%20and%20(width%20>%201024px)%20%7B%5Cn%20%20.a%20%7B%5Cn%20%20%20%20color%3A%20green%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn%3A%3Ahighlight(my-custom-highlight)%20%7B%5Cn%20%20color%3A%20green%3B%5Cn%7D"%2C"visitorEnabled"%3Afalse%2C"visitor"%3A"%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D"%2C"unusedSymbols"%3A%5B%5D%2C"version"%3A"local"%7D) at the moment.

hejhi

Add support for `::highlight`

2

Closes https://github.com/parcel-bundler/lightningcss/issues/861 Adds support for https://developer.mozilla.org/en-US/docs/Web/CSS/::highlight

lucasweng

[Playground](https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22.foo%20%7B%5Cn%20%20-webkit-mask-image%3A%20url(.%2Ffoo.svg)%3B%5Cn%20%20mask-image%3A%20url(.%2Ffoo.svg)%3B%5Cn%7D%5Cn%5Cn.bar%20%7B%5Cn%20%20-webkit-mask-image%3A%20var(--foo)%3B%5Cn%20%20mask-image%3A%20var(--foo)%3B%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D) Given this input: ```css .foo { -webkit-mask-image: url(./foo.svg); mask-image: url(./foo.svg); } .bar { -webkit-mask-image: var(--foo); mask-image: var(--foo); } ``` Expect output to be identical. However, actual output: ```css .foo...

wongjn

`:where` not being transpiled for older browsers

7

Using lightningcss and setting the browser targets to the last 5 years, the final CSS output contains `:where` selectors, which have only been supported for just over 4 years (https://caniuse.com/?search=%3Awhere)....

KieranP

lightningcss ate my precision

4

I have a line-height which I have defined as ``` line-height: calc(4 / 3); ``` sass (annoyingly) turns this to ``` line-height: 1.3333333333; ``` Lightningcss compiles this to ``` line-height:...

mrginglymus

Hello! I was looking at some of the open issues and would love to start submitting bugfixes. But looking at the test suite for Node.js I think it would help...

drwpow