postcss/postcss-custom-properties

Unknown word error when attempting to parse valid CSS

mbaumbach opened this issue · 3 comments

mbaumbach commented

This was found and detailed in another project, but I suspect this is a bug with this project (or perhaps one of its dependencies). The following line:

.Polaris-RangeSlider-SingleThumb__Output { position: absolute; z-index: 20; bottom: var(--p-range-slider-thumb-size-base); left: var(--Polaris-RangeSlider-progress); transform: translateX(calc(-50% + var(--Polaris-RangeSlider-output-factor)*var(--p-range-slider-thumb-size-base))); opacity: 0; visibility: hidden; pointer-events: none; transition-property: opacity, visibility, bottom; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }

Throws the following error:

Syntax error: postcss-custom-properties: <css input> Unknown word (1:1)
> 1 | -50% + var(--Polaris-RangeSlider-output-factor)*var(--p-range-slider-thumb-size-base)
    | ^

When I manually modify the CSS to include a space around the asterisk between the two custom properties, everything compiles correctly. This code looks like valid CSS to me though, so I think this is a bug in the parser. This code does correctly parse:

.Polaris-RangeSlider-SingleThumb__Output { position: absolute; z-index: 20; bottom: var(--p-range-slider-thumb-size-base); left: var(--Polaris-RangeSlider-progress); transform: translateX(calc(-50% + var(--Polaris-RangeSlider-output-factor) * var(--p-range-slider-thumb-size-base))); opacity: 0; visibility: hidden; pointer-events: none; transition-property: opacity, visibility, bottom; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }

The link above provides steps to reproduce the error. This is part of a create-react-app 5.0.0 project using the Shopify Polaris 7.5.0 framework.

mbaumbach commented

And just to confirm, the pulled in postcss-custom-properties dependency is v12.0.0.

mbaumbach commented

This appears to be fixed in the latest commits, perhaps with the change to the new parser. I created a sample test in basic.css:

.test--calc-no-spaces {
	transform: translateX(calc(-50% + var(--xxx, 1)*var(--yyy, 10px)));
}

That resulted in:

.test--calc-no-spaces {
	transform: translateX(calc(-50% + 1*10px));
	transform: translateX(calc(-50% + var(--xxx, 1)*var(--yyy, 10px)));
}

Is there any way to get a new release out to NPM with the new parser in place or is there more work to do there?

mbaumbach commented

Confirmed this is fixed in 12.0.1.