Expected a pseudo-class or pseudo-element

See original GitHub issue

Hi,

This is my first time raising an issue.

I am studying Git a Web Developer and added post css library. Now, facing error as follow -

`Error in plugin “gulp-postcss” Message: Expected a pseudo-class or pseudo-element. Details: fileName: /Users/Vikram/Documents/DevLab/travel-site/app/assets/styles/styles.css

Stack: Error: Expected a pseudo-class or pseudo-element. at Root._error (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:182:24) at Root.error (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/selectors/root.js:43:25) at Parser.error (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:666:25) at Parser.expected (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:994:25) at Parser.pseudo (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:799:25) at Parser.parse (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:955:22) at Parser.loop (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:923:18) at new Parser (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:174:14) at Processor._root (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/processor.js:47:22) at Processor._runSync (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/processor.js:83:25) at Processor.processSync (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/processor.js:177:27) at parse (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-nested/index.js:9:9) at /Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-nested/index.js:39:18 at Array.forEach (<anonymous>) at /Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-nested/index.js:38:21 at Array.forEach (<anonymous>)`

The stack clearly mentions the error to be found in postcss-nested/index.js. I tried reinstalling the postcss but it doesn’t help.

Due to this error, any styles further added are not working.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

17reactions
hirenkeraliyacommented, Sep 8, 2021

I have also got this error and I am trying to solve this for the last 3 days.

And, Today I got the solution.

.revenue-cards{
   @apply p-3 lg: p-4 rounded-xl h-auto;
}

In my CSS there is a simple space between lg: and p-4. I have changed it to lg:p-4 and it’s working fine.

And this would be done by the vs code.

0reactions
aicommented, Feb 25, 2019

I fixed postcss-nested, not it prints much better error on syntax errors like this.

  1. Update postcss-nested in your package.json: "postcss-nested": "^4.1.2".
  2. Install the update by npm install command.
  3. Run your Gulp again. PostCSS will print better error (you have missed ;)

Thanks for the report. It helped make our DX really better.

Read more comments on GitHub >

github_iconTop Results From Across the Web

create-react-app build error "Expected a pseudo-class or ...
Error message 'Expected a pseudo-class or pseudo-element.' may suggest some syntax error of pseudo-classes in one of the CSS files imported.
Read more >
Pseudo-classes and pseudo-elements - MDN Web Docs
Pseudo-classes enable you to target an element when it's in a particular state, as if you had added a class for that state...
Read more >
Code_Split - error: expected a pseudo-class or ... - Facebook
Nextjs / React / Angular … Simple space may produce an error so we can configure this type of error by removing the...
Read more >
@font-family error: "expected pseudoclass or pseudoelement"
Why am I getting this error in Compass? Invalid CSS after " @font-family:": expected pseudoclass or pseudoelement, was " "Megalopolis";".
Read more >
An Ultimate Guide To CSS Pseudo Classes And Pseudo ...
The :default pseudo-class will target the default element in a form in a group of similar elements. In case you need to target...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found