Customizing the CSS identifiers (scope, hash etc)

Feature request

Problem

Our Selenium tests rely on a specific naming of class names in the HTML. E.g. class="Header__link", where Header is the name of a component, and link is a class in the component’s CSS module).

With the current experimental CSS support in Next.js, there’s no apparent way to customize the outputted CSS identifiers.

With next-css, we used to simply override the Webpack config with our own css-loader options localIdentName and getLocalIdent).

Proposed solution

Please allow to override the Webpack config like it was the case with next-css. Thanks!

Related to #8626.

[Timer]

tl;dr: To set expectations, we’re probably not going to ship with this ability by default. Read on for testing alternatives.

---

Customizing the emitted CSS identifiers is a footgun, as uniqueness is no longer guaranteed and we may optimize them in the future.

For example, we may explore these optimizations:

• Single Character Class Names: Using single-character class names are a suggested practice that produce smaller application output (all considered, JS bundles and CSS files, Gzip, etc).
• Deduping of Styles: If multiple classes define common sets of attributes, we may hoist those attributes out into a new class and then transparently compose the emitted classes (think Atomic CSS).

Our new CSS support is extremely focused on correctness — allowing this option may undermine that correctness and our flexibility to innovate in the future.

We can reconsider this when it’s released stable if there’s significant demand. IMO, there’s better options here:

• Unit Tests or Snapshot Tests (e.g. Jest): you can eliminate CSS Module exports or use identity-obj-proxy to get stable class names. The emitted class name is an implementation detail that shouldn’t be tested.
• Integration Tests: You should be using getComputedStyle() — not class names.

[morganfeeney]

tl;dr: To set expectations, we’re probably not going to ship with this ability by default. Read on for testing alternatives.

@Timer when you say not ship with the ability to do this, are you referring to what has been requested in this issue, or the ability to turn on the experimental CSS features (which would Customize the CSS identifiers)?

I’m using BEM and next-css and well… this is a big change, I’m using a well documented system for creating components (BEM), and I’m concerned that the new CSS features are going to mean that we’ll end up having to re-invent the wheel by creating something that works with a CSS module based approach. The ability to change the ident structure would be useful, as it would enable me to possibly get around changing the file structure:

I could maybe do this: [exportName]__[hash] for more uniqueness, or if forced, do this: [exportName] to allow me to carry on doing what I’m currently doing, but then you’d wonder why the ident name would be better as an option to turn off/on to allow some flexibility?