Skip to content

Parsing error with complex custom properties #147

Open

Description

@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

Activity

  1. chriseppstein commented on Sep 17, 2018

    @chriseppstein
    Contributor

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

  2. DavidHenri008 commented on Sep 18, 2018

    @DavidHenri008
    Author

    @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.

  3. alexander-akait commented on Feb 21, 2019

    @alexander-akait
    Collaborator

    /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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions