postcss / postcss-custom-properties

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

Regression from 7.0.0: Fails with nested custom properties #144

Closed simono closed 5 years ago

simono commented 5 years ago

Hi,

thanks for this wonderful Plugin! I've found a Bug that occurs since Version 8.0.0.

CSS file:

.test {
  background: var(--xxx, var(--yyy, 1));
}

Works with Version 7.0.0:

npx postcss-cli test.css
.test {
  background: 1;
  background: var(--xxx, var(--yyy, 1));
}

Fails with 8.0.6:

npx postcss-cli test.css
{ RangeError: Maximum call stack size exceeded
    at /Users/simon/Development/cmag/y/controlpanel/test.css:2:3
    at Function.assign (<anonymous>)
    at asClonedNode (/Users/simon/Development/cmag/y/controlpanel/node_modules/postcss-custom-properties/index.cjs.js:350:31)
    at array.map.node (/Users/simon/Development/cmag/y/controlpanel/node_modules/postcss-custom-properties/index.cjs.js:338:60)
    at Array.map (<anonymous>)
    at asClonedArray (/Users/simon/Development/cmag/y/controlpanel/node_modules/postcss-custom-properties/index.cjs.js:338:48)
    at asClonedArrayWithBeforeSpacing (/Users/simon/Development/cmag/y/controlpanel/node_modules/postcss-custom-properties/index.cjs.js:328:23)
    at root.nodes.slice.forEach.child (/Users/simon/Development/cmag/y/controlpanel/node_modules/postcss-custom-properties/index.cjs.js:303:32)
    at Array.forEach (<anonymous>)
    at transformValueAST (/Users/simon/Development/cmag/y/controlpanel/node_modules/postcss-custom-properties/index.cjs.js:286:24)
    at root.nodes.slice.forEach.child (/Users/simon/Development/cmag/y/controlpanel/node_modules/postcss-custom-properties/index.cjs.js:304:11)
  postcssNode:
   Declaration {
     raws: { before: '\n  ', between: ': ' },
     type: 'decl',
     parent:
      Rule {
        raws: [Object],
        type: 'rule',
        nodes: [Array],
        parent: [Root],
        source: [Object],
        selector: '.test',
        lastEach: 1,
        indexes: [Object] },
     source: { start: [Object], input: [Input], end: [Object] },
     prop: 'background',
     value: 'var(--xxx, var(--yyy, 1))' } }

I'm happy to send a PR if you can give me some hints, what exactly fails.

Thanks!

jonathantneal commented 5 years ago

Thanks for reporting this and I’m sorry about the issue. I’ve verified your issue using https://postcss.github.io/postcss-custom-properties/

I’ll take a look as soon as I can, which is probably tonight.

jonathantneal commented 5 years ago

The issue was with the values parser api, which I do not control. However, I was able to circumvent the api and manually fix the problem in 8.0.8. Thank you for reporting this.