Built-in Sass support not working. "Syntax error: Selector "body" is not pure" and other bullshit about non-pure selectors

[neeeeecka]

Bug report

I followed this explanation: https://nextjs.org/docs/basic-features/built-in-css-support

Tried to use built-in scss support but now I am getting the "Syntax error: Selector "body" is not pure" error when trying to compile a .module.scss file using built-in sass support.

Describe the bug

It happens when using pure css selectors like "body", "footer", "button" etc. (Also what the heck does "non-pure selector" even mean?? They seem pretty pure to me)

Though scss works fine if I am using class selectors instead of tag selectors.

To Reproduce

1. install node 14.2.0
2. install Next.js 9.5.1
3. create Next.js project
4. create a folder with .module.scss files in it, and add this code:

body {
  background: #101010;
}
.container {
  touch-action: none;
  height: 100vh;
}

5. install "sass"
6. import scss module into jsx component
7. shouldn't compile

Expected behavior

It should not fire these errors and compile to css without problems, because its just a simple selector.

System information

• OS: Windows10
• Browser: Any
• Version of Next.js: [9.5.1]
• Version of Node.js: [14.2.0]

Additional context

Tried to reinstall: Next, node and sass.

Doesn't work.

[stfnsr]

The pure thing is about it being a css-module, which is not meant to be applied globally, but scoped to specific components.
And for that, targeting body doesn't make sense.

You can leave the "module" part out (so, "style.scss") and import it your _app.js

[Yash-Singh1]

That doesn't work if I want it to apply for a certain page.

[GabenGar]

What "certain page" are you talking about?

[mattcarlotta]

By design, CSS modules are scoped CSS classes and you'll need to import them within a JS file and apply them to an HTML element’s className.

Example.module.scss

.exampleClassName {
  font-size: 12px;
}

Example.js

import { exampleClassName } from "./Example.module.scss";

const Example = () => 
  <div className={exampleClassName}>
    Scoped example
  </div>;

export default Example;

Selectors like html, body, button, etc are global (unscoped) selectors; in addition they also are not valid scoped classes (like how .exampleClassName is scoped to a div element in the example above). Next expects CSS modules to be pure in that they don’t produce side effects (like altering the body style based upon a page being loaded or a particular component being loaded -- in the example above, the body is outside of the component-level scope). The reason pure stylesheets are enforced/encouraged is because they allow CSS to be split chunked (when you land on a page, you only download the styles necessary to view that particular page, instead of downloading everything at once).

Imagine you have 2 components that both alter the body style, where one sets overflow: hidden; and the other sets overflow: scroll;. Which one takes precedence? On the same note, what if one component is loaded before the other component, which one should take precedence then? These global style overrides can produce inconsistent UIs based upon a user's action and/or when the stylesheets are downloaded. Therefore, using scoped modules helps eliminate these style collisions.

If you wish to use global selectors, then you should use a global stylesheet.

Please refer to the css-modules documentation for more information.

[neeeeecka]

Thank you, but its a weird transition from create-react-app since I could use scss however I wanted to there.

Though I believe forceful separation of files is a good practice.

[mizdra]

By design, CSS modules are scoped CSS classes

I think this is wrong. CSS Modules specification allows non-pure selectors using :global.

• https://github.com/css-modules/css-modules/tree/9922d6ec376261022fbdc461f3ca06e9623c82b3#exceptions

The constraint "do not allow non-pure selectors" is due to the css-loader option. This constraint can be optionally enabled or disabled. It is not a required constraint.

• https://github.com/webpack-contrib/css-loader/tree/0308067becc0b375b9174cd529f6b113409eee99#scope

So, instead of "non-pure selectors are not allowed because of the CSS Modules specification," I think it is correct to say "non-pure selectors are not allowed because Next.js uses css-loader in pure mode".

Tip: I don't think it's wrong for Next.js to impose this constraint. It is reasonable to impose the constraint for optimization.

[gidox1]

As @stfnsr rightly said, it's not meant to be applied globally. So you can simply apply your styles in your global.css file for Next.js version 11.1.0.

[kuriel-trivu]

Selector "html, body" is not pure

Why is this even being validated?

In my case in global.css we don't need html, body to be full height, ONLY for login page, wich is a module login.module.css.

[GabenGar]

Why is this even being validated?

The validation is the requirement by CSS modules spec which is implemented by webpack.

In my case in global.css we don't need html, body to be full height, ONLY for login page, wich is a module login.module.css.

How are you going to have a sticky footer without html and body not being at full height?

[devinwalter]

Is there not a way to ignore this rule at all? We have multiple outlets being used with a shared library that does exactly this, and it's blocking me from using that library in a next app. There's not an ability to change it as prescribed, I just want to allow it.

[reorx]

Same here, I just want to import a css file only in a component, but NextJS seems only allow this to happen in _app.tsx

[SouthLink]

I'm really fed up with rules like global css, Selector is not pure, can only use sass, which are boring restrictions for trying to migrate other frameworks to next