search

postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
597 stars 77 forks source link

CSS variables with url() lead to an `Cannot read property 'value' of undefined` #258

Closed marcalexiei closed 2 years ago

marcalexiei commented 2 years ago

Description

We have updated postcss-preset-env

from 6.5.0 which uses ^8.0.0 (tested with 8.0.11) to 7.0.0 which uses ^12.0.0

We are are getting a Cannot read property 'value' of undefined when processing css variables which contains url(...):

const postcss = require("postcss");
const customProperties = require("postcss-custom-properties");

const YOUR_CSS = `
:root {
  --btn-close-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='rgb(0,0,0)'%3E%3Cpath%20d='M.293.293a1%201%200%20011.414%200L8%206.586%2014.293.293a1%201%200%20111.414%201.414L9.414%208l6.293%206.293a1%201%200%2001-1.414%201.414L8%209.414l-6.293%206.293a1%201%200%2001-1.414-1.414L6.586%208%20.293%201.707a1%201%200%20010-1.414z'/%3E%3C/svg%3E");
}

.btn-close {
  background: transparent var(--btn-close-image) center/0.75em auto no-repeat;
}
`

const result = await postcss([
  customProperties()
]).process(YOUR_CSS /*, processOptions */);

console.info(result.css);

You can reproduce it on this Runkit example

Complete stack trace:

    at new Quoted (****node_modules/postcss-values-parser/lib/nodes/Quoted.js:21:37)
    at cloneNode (****node_modules/postcss/lib/node.js:10:16)
    at Quoted.clone (****node_modules/postcss/lib/node.js:97:18)
    at new Node (****node_modules/postcss/lib/node.js:47:30)
    at new Container (****node_modules/postcss/lib/container.js:27:1)
    at new Container (****node_modules/postcss-values-parser/lib/nodes/Container.js:15:1)
    at new Func (****node_modules/postcss-values-parser/lib/nodes/Func.js:96:5)
    at asClonedNode (****node_modules/postcss-custom-properties/index.cjs:272:21)
    at ****node_modules/postcss-custom-properties/index.cjs:268:60

Expected behaviour

CSS is generated with fallback value stored inside --btn-close-image variable.

:root {
  --btn-close-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='rgb(0,0,0)'%3E%3Cpath%20d='M.293.293a1%201%200%20011.414%200L8%206.586%2014.293.293a1%201%200%20111.414%201.414L9.414%208l6.293%206.293a1%201%200%2001-1.414%201.414L8%209.414l-6.293%206.293a1%201%200%2001-1.414-1.414L6.586%208%20.293%201.707a1%201%200%20010-1.414z'/%3E%3C/svg%3E");
}

.btn-close {
  background: transparent url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='rgb(0,0,0)'%3E%3Cpath%20d='M.293.293a1%201%200%20011.414%200L8%206.586%2014.293.293a1%201%200%20111.414%201.414L9.414%208l6.293%206.293a1%201%200%2001-1.414%201.414L8%209.414l-6.293%206.293a1%201%200%2001-1.414-1.414L6.586%208%20.293%201.707a1%201%200%20010-1.414z'/%3E%3C/svg%3E") center/0.75em auto no-repeat;
  background: transparent var(--btn-close-image) center/0.75em auto no-repeat;
}

This was working in 8.0.x version: Runkit example

marcalexiei commented 2 years ago

After some investigation I found that the problem is related to postcss-values-parser.

I have opened an issue on that repo.

marcalexiei commented 2 years ago

Fixed via #260