I can't style any html/jsx tag in css, because it says 'h1 "selector" is not pure'

user_13099076 0
Viewed 4244
Syntax error: Selector "h1" is not pure (pure selectors must contain at least one local class or id)

  5 | }
  6 | 
> 7 | h1 {
    |              ^
  8 |   font-size: 48px;
  9 |   text-align: center

this is the error that I get when I try to style every selector that is not an id or a class, I've never got this problem before, and I can't find an answer, I've used Next.js for a long time, but that's the first time it appears, idk what to do.

jsx next.js reactjs css html
1 Answers

Next.js is utlising built-in css-loader that is configured so that all the selectors require to be pure - which means that you can not target elements by their tag. I think that this setting has been added in one of the releases after v9.0.

The topic is discussed in-depth here and in some other issues reported on their github repo. AFAIK it's working as intended and the only way to go around it is:

  1. Accept the limitation and don't use implicit HTML selectors
  2. Modify next.config.js to change the behaviour of css-loader

In the end the enforced limitation is good and pushes you to use better CSS practices, however it proves to be a big obstacle for bigger projects with lots of legacy stylesheets to migrate into Next.js.

user_64452720
Related