Transform within default variables

[bart-jaskulski]

Transforming px values to rem is not working inside default values in custom properties.

CSS below would be sufficient to reproduce the issue.

body {
  padding: var(--site-padding, 16px) 
}

Desired outcome should be:

body {
  padding: var(--site-padding, 1rem)
}

Nonetheless, such piece of code is not transformed. Is this a flaw possible to fix or design choice?

[NikolayMakhonin]

Yes, it is a design choise, see this regexp

/"[^"]+"|'[^']+'|url\([^)]+\)|var\([^)]+\)|(\d*\.?\d+)px/g

it ignored all the var statements, I think it's because of the variable names, which can include something like --1px. We just need to improve regexp and there will be no such problem:

/"[^"]+"|'[^']+'|url\([^)]+\)|((?<=^|[^\w-])-?\d*\.?\d+)px\b/g

[AAAAAAAAAdai]

是的，这是一种设计选择，请参看此正则表达式

/"[^"]+"|'[^']+'|url\([^)]+\)|var\([^)]+\)|(\d*\.?\d+)px/g

它忽略了所有的var语言句子，我认为这是因为变量名，它可以包含类似的--1px。我们只需要改变进入正则表达式就不会出现这样的问题：

/"[^"]+"|'[^']+'|url\([^)]+\)|((?<=^|[^\w-])-?\d*\.?\d+)px\b/g

left: -10px; not working

[citrus327]

any progress?

[dimitry-blinov]

@yangmingshan @cuth Please add the ability to convert px to em inside var in the callback ignoring custom variables. Can u merge and release a new version?