Parsing error with complex custom properties

[DavidHenri008]

I am using postcss-preset-env which use this plugin and I am getting a parsing error when I have a "complex" custom property.

When a css file hat the following code:

:root{
  --myColor: green,
  --myInnerStyle: {
    font-family: "Open Sans", 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
}

I am getting this error:

ERROR in ./src/components/MyThemeOverride.css (./node_modules/css-loader??ref--10-1!./node_modules/postcss-loader/lib??postcss!./node_modules/sass-loader/lib/loader.js??ref--10-3!./src/components/MyThemeOverride.css) Module build failed: Error: Expected a pseudo-class or pseudo-element. at Root._error (C:\Git\client-react\node_modules\postcss-attribute-case-insensitive\node_modules\postcss-selector-parser\dist\parser.js:173:24) at Root.error (C:\Git\client-react\node_modules\postcss-attribute-case-insensitive\node_modules\postcss-selector-parser\dist\selectors\root.js:43:25) at Parser.error (C:\Git\client-react\node_modules\postcss-attribute-case-insensitive\node_modules\postcss-selector-parser\dist\parser.js:561:25) at Parser.expected (C:\Git\client-react\node_modules\postcss-attribute-case-insensitive\node_modules\postcss-selector-parser\dist\parser.js:879:25) at Parser.pseudo (C:\Git\client-react\node_modules\postcss-attribute-case-insensitive\node_modules\postcss-selector-parser\dist\parser.js:673:25) at Parser.parse (C:\Git\client-react\node_modules\postcss-attribute-case-insensitive\node_modules\postcss-selector-parser\dist\parser.js:843:22) at Parser.loop (C:\Git\client-react\node_modules\postcss-attribute-case-insensitive\node_modules\postcss-selector-parser\dist\parser.js:812:18) at new Parser (C:\Git\client-react\node_modules\postcss-attribute-case-insensitive\node_modules\postcss-selector-parser\dist\parser.js:165:14) at Processor._root (C:\Git\client-react\node_modules\postcss-attribute-case-insensitive\node_modules\postcss-selector-parser\dist\processor.js:47:22) at Processor._runSync (C:\Git\client-react\node_modules\postcss-attribute-case-insensitive\node_modules\postcss-selector-parser\dist\processor.js:83:25) @ ./src/components/MyThemeOverride.css 2:14-220 21:1-42:3 21:218-42:2 22:19-225 @ ./src/components/Root.js @ ./src/index.js @ multi ./src/webpack-public-path react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/index.js

[chriseppstein]

@DavidHenri008 What version of postcss-selector-parser did this occur with?

[DavidHenri008]

@chriseppstein I cannot recall. I understand that my original post lack details in order to reproduce it. Honestly I do not remember the exact environment/project in which I saw this behavior. If you cannot reproduce it on your side you may consider this issue closed.

[alexander-akait]

/cc @jonathantneal what do you think about this? postcss interpreted --foo: {} as rule so we have selector, i think we should interpreted this as non standard tag selector instead throw error