lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

Wrong selector output

Open lxsmnsyc opened this issue 8 months ago • 2 comments

Repro: https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Atrue%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*%20%2B%20*%20%7B%5Cn%20%20color%3A%20red%3B%5Cn%7D%22%2C%22visitorEnabled%22%3Atrue%2C%22visitor%22%3A%22%7B%5Cn%20%20Selector(node)%20%7B%5Cn%20%20%20%20return%20%5B%5Cn%20%20%20%20%20%20%7B%20type%3A%20'universal'%20%7D%2C%5Cn%20%20%20%20%20%20%7B%20type%3A%20'combinator'%2C%20value%3A%20'descendant'%20%7D%2C%5Cn%20%20%20%20%20%20%7B%20type%3A%20'combinator'%2C%20value%3A%20'next-sibling'%20%7D%2C%5Cn%20%20%20%20%20%20%7B%20type%3A%20'combinator'%2C%20value%3A%20'descendant'%20%7D%2C%5Cn%20%20%20%20%20%20%7B%20type%3A%20'universal'%20%7D%5Cn%20%20%20%20%5D%3B%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

I'm trying to convert a sequence of tokens (from a custom-function) into a selector list.

For example (as seen in the repro), if we have * + * parsed as a token list:

[
  { type: 'token', value: { type: 'delim', value: '*' } },
  { type: 'token', value: { type: 'white-space', value: ' ' } },
  { type: 'token', value: { type: 'delim', value: '+' } },
  { type: 'token', value: { type: 'white-space', value: ' ' } },
  { type: 'token', value: { type: 'delim', value: '*' } }
]

the output selector list should be

[
  { type: 'universal' },
  { type: 'combinator', value: 'descendant' },
  { type: 'combinator', value: 'next-sibling' },
  { type: 'combinator', value: 'descendant' },
  { type: 'universal' }
]

the expected output should be * + *, but it emits * *+.

Version-wise, this used to work in 1.19 and 1.20, stopped working in 1.21

Edit: it seems in <1.21, whitespace token is always skipped, whereas in >1.21, it is included.

lxsmnsyc avatar Oct 05 '23 04:10 lxsmnsyc

Right, this is invalid because you can't have more than one combinator in a row. Perhaps we should actually error here. You'll need to remove the white space tokens if they are next to a combinator when you do the conversion.

Having a config to define a custom function that parses its arguments as a selector is on my list of things to add at some point though, so maybe your use case will get easier.

devongovett avatar Oct 09 '23 05:10 devongovett

Having a config to define a custom function that parses its arguments as a selector is on my list of things to add at some point though, so maybe your use case will get easier.

This would be great. Another thing I'm thinking is, because I'm using the :global function, it would be great if it would be parsed as-is with or without the CSS modules flag.

lxsmnsyc avatar Oct 09 '23 05:10 lxsmnsyc