It breaks on “space toggle hack”

[Hypnosphi]

See https://css-tricks.com/a-dry-approach-to-color-themes-in-css/ and https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

Example code:

:root {
  --OFF: ;
}

error:

TypeError: Cannot read property 'raws' of undefined
    at /Users/filippriabchun/IdeaProjects/ring-ui/src/global/variables.css:2:3
    at Parser.space (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss-values-parser/lib/parser.js:387:25)
    at Parser.parseTokens (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss-values-parser/lib/parser.js:223:14)
    at Parser.loop (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at replaceValueSymbols (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss-modules-values-replace/index.js:22:60)
    at /Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss-modules-values-replace/index.js:193:20
    at /Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss/lib/container.js:55:18
    at Rule.each (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss/lib/container.js:41:16)
    at Rule.walk (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss/lib/container.js:52:17)
    at /Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss/lib/container.js:60:24
    at Root.each (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss/lib/container.js:41:16)
    at Root.walk (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss/lib/container.js:52:17)
    at /Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss-modules-values-replace/index.js:190:8
    at async LazyResult.runAsync (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss/lib/lazy-result.js:396:11)
    at async Object.loader (/Users/filippriabchun/IdeaProjects/ring-ui/node_modules/postcss-loader/dist/index.js:97:14)

[princed]

I can't reproduce this on my end. Would you mind contributing a failing test case?

[777PolarFox777]

I faced the same issue during the integration of Tailwind, the bug is a bit tricky since it won't appear if the css was written in file, it only works when other PostCSS plugin emits a declaration with an empty string value .

You can try to run a test like this one:

test.only('tailwind', async (t) => {
  const tailwind = postcss.plugin('tailwind', () => (root) => {
    root.walkAtRules('tailwind', (atRule) => {
      atRule.replaceWith(postcss.decl({ prop: '--tw-props', value: ' ' }));
    });
  });

  const input = '@tailwind base;';
  const processor = postcss([tailwind, plugin]);
  const result = await processor.process(input);

  console.log(t, result);
});

The error will be as follows:

TypeError {
    postcssNode: Declaration {
      parent: Root {
        indexes: Object { … },
        lastEach: 3,
        nodes: Array [ … ],
        raws: Object { … },
        source: Object { … },
        type: 'root',
      },
      prop: '--tw-props',
      raws: {},
      type: 'decl',
      value: ' ',
    },
    message: 'Cannot read properties of undefined (reading \'raws\')',
  }

  Parser.space (node_modules/postcss-values-parser/lib/parser.js:388:25)
  Parser.parseTokens (node_modules/postcss-values-parser/lib/parser.js:224:14)
  Parser.loop (node_modules/postcss-values-parser/lib/parser.js:132:12)
  Parser.parse (node_modules/postcss-values-parser/lib/parser.js:51:17)
  replaceValueSymbols (index.js:23:60)
  callback (index.js:195:20)
  callback (node_modules/postcss/lib/container.es6:110:18)
  Root.each (node_modules/postcss/lib/container.es6:76:16)
  Root.walk (node_modules/postcss/lib/container.es6:107:17)
  index.js:191:8

And it looks like updating postcss-values-parser package to the latest version is fixing the issue.