Next.js Discord

Discord Forum

Issue with Syntax error: Selector ":root" is not pure in a third-party package

Unanswered
Elkas posted this in #help-forum
Open in Discord
ElkasOP
Hello everyone!

I'm having issues with one third-party app required by my employee with Next.js 13+ (happens the same in v14).

One of Its something.module.css has this global style:
Syntax error: Selector ":root" is not pure (pure selectors must contain at least one local class or id)


The full error message is:
Syntax error: Selector ":root" is not pure (pure selectors must contain at least one local class or id)

  1 | /* stylelint-disable-next-line css-modules/no-global-scoped-selector */
> 2 | :root {
    | ^
  3 |   --account-button-min-width: 108px;
  4 |   --account-icon-width: 32px;

I've looked for a way to make it ignore third-party packages, but I couldn't find a solution. Can you help?

7 Replies

ElkasOP
I might be wrong, but I think ESLint is for dev rules (TS, JS, etc), not CSS
ElkasOP
Hi!
Sorry for the delay in response, I was seeking permission to share some console logs (tight security) and slow responses... -_-

This is from a 3rdparty lib causing the issue and I'm not aware of how to fix it:
 ⨯ ./node_modules/@something/the-lib/lib/components/Inputs/DateField/style.module.css:13:1
Syntax error: Selector "input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button" is not pure (pure selectors must contain at least one local class or id)

  11 | }
  12 | 
> 13 | input::-webkit-outer-spin-button,
     | ^
  14 | input::-webkit-inner-spin-button {
  15 |   -webkit-appearance: none;
It's a third party lib in node_modules causing the issue
riský
i cant remember exactly, but i think i got similar issue and fixed by adding that external package in [transpilePackages](https://nextjs.org/docs/architecture/nextjs-compiler#module-transpilation)
ElkasOP
I tried it as well. It didn't fix it , 😞
I was able to make some progress but I had to override a lot of webpack configs. I was able to build it, run and see the components. But I lost all CSS 🤣🤣🤣
Since I can use pages routes, we've set the app router to low priority and migrate to pages routes. Based on next documentation, we can then move to the app router easily when we find a way to make this worl