Eliminating unused classes

[BaoDelta]

Let's say I have the following code:

/* test.css */

.roundedBorder {
  border-radius: 5px;
}

.redBorder {
  border: 1px solid red;
}

.roundedAndRedBorder {
  composes: roundedBorder;
  composes: redBorder;
}

/* test.js */
import styles from './test.css'

console.log(styles)

When I run the code with style loader and css loader, the output is:

{
  "roundedBorder": "test__roundedBorder",
  "redBorder": "test__redBorder",
  "roundedAndRedBorder": "test__roundedAndRedBorder test__roundedBorder test__redBorder"
}

and the style element added into DOM is:

<style type="text/css">
.test__roundedBorder {
  border-radius: 5px;
}

.test__redBorder {
  border: 1px solid red;
}

.test__roundedAndRedBorder {
}
</style>

The class roundedAndRedBorder is used here only to compose the two other classes. Therefore, I think we should not have the class test__roundedAndRedBorder in the output. What do you think?

[joeybaker]

@BaoDelta It's not a bad idea. But, you could use something like cssnano to eliminate the empty classes. Though, it's a good argument that removing empty classes could be added to CSS Module's list of core modules. I can't think of any "unsafe" behavior that would occur.

[BaoDelta]

Thanks for your answer @joeybaker

If I add minimize to css-loader query, the class test__roundedAndRedBorder is not in the style element anymore but is still referenced in styles.roundedAndRedBorder. In addition, if I have a css file with only compose-only classes, then I will have an empty style element in the DOM.

My situation is that I'm using purecss in my project but I want to hide that fact from my React components. They should not know which css framework I'm using so that I can change and tweak the css. Therefore, I have a lot of css modules with compose-only classes like this:

/* Button.css */

.button {
  composes: pure-button from global;
}

That produces a lot of empty and unused real classes.

[joeybaker]

Hmm… why wouldn't you want to have styles.roundedAndRedBorder? That's the shortcut CSS Modules gives you for referencing both classes at once, no?

[BaoDelta]

@joeybaker I want to have styles.roundedAndRedBorder but I expect it to be just "test__roundedBorder test__redBorder" instead of "test__roundedAndRedBorder test__roundedBorder test__redBorder"

[joeybaker]

Ah, I see. That's totally fair.

[navgarcha]

+1

[richardgorman]

Is there any progress on this?

[tivac]

I've been doing that in modular-css and it's really nice. 👍

[Benno007]

I agree, we have many levels of composition in our themed components and we end up with 5 or 6 empty classes and empty classes on the element attributes. The minimize flag on css loader DOES remove them from the CSS, but they are not removed from the HTML when its rendered. It would make our DOM considerably smaller to have these unused classes removed. Is there any way to achieve this?

[nicksyndicate]

A lot of empty class names rendered in html, anybody PR ?

[bitttttten]

Is it not possible to use getLocalIdent for this? It must be able to evaluate if the declaration is empty but I have had no luck finding out how to yet.

[felixsanz]

5 years old, has anyone come up with a solution?

[sjoqvist]

5 years old, has anyone come up with a solution?

@felixsanz Yes, I have proposed a solution (css-modules/postcss-modules-scope#32). It's currently being reviewed by @alexander-akait. If it's approved, then an option should also be added to css-loader to enable the feature.

[alexander-akait]

Yep, need to find time on review 😞 still in my TODO

[GitProdEnv]

Any update on this?