Selector ":root" is not pure

[nihiluis]

What's the meaning of this?

error - ./styles/vars.css:1:1
Syntax error: Selector ":root" is not pure (pure selectors must contain at least one local class or id)

> 1 | :root {
    |                           ^
  2 | 	--primary-color: #d8d4ff;
  3 | }

This error message is not descriptive.

[jamesmosier]

Are you using CSS modules by any chance? How are you importing this css file?

[jamesmosier]

You cannot use impure selectors in CSS modules. Meaning that any CSS inside a CSS module must begin with a class or other selector that can be directly applied to a React element.

For example, these will not work in CSS modules:

div {
  color: red;
}

span {
  font-size: 12px;
}

body {
  margin: 0;
}

:root {
  --primary-color: #fff;
}

If you wanted to set some variables on the root then you could create a new app.css (or named anything) and import that in your _app.js file. That would then allow for those styles to be applied globally.

[leerob]

@jamesmosier I learn something from you every day 👏

[worker-py]

Is there a way to create and use module.css variables in the same module.css file?

[semijacks]

Worked like a charm. thanks @jamesmosier

[cristian-eriomenco]

You cannot use impure selectors in CSS modules. Meaning that any CSS inside a CSS module must begin with a class or other selector that can be directly applied to a React element.

For example, these will not work in CSS modules:

div {
  color: red;
}

span {
  font-size: 12px;
}

body {
  margin: 0;
}

:root {
  --primary-color: #fff;
}

If you wanted to set some variables on the root then you could create a new app.css (or named anything) and import that in your _app.js file. That would then allow for those styles to be applied globally.

is it possible to conditionally load app.css based on a prop. Think of multi-brand app.

[oimarcella]

[oimarcella]

Every selector I use causes a problem, how should I use them?

[hungify]

Thanks for your error.
I am currently working on vite and react.
I use the same code but in Next I get an error like this otherwise in Vite is works well.

[vankarchaitanya]

Thanks for your details answer. You saved my time