Search code examples
htmlcssmodulemodernizrcss-modules

Using CSS Modules with Modernizr (class names)

Modernizr adds classes to the document's <html> tag, e.g. <html class="no-touchevents">.

In my code, I used to write something like this.

.style { background: green; }
.no-touchevents .style { background: red; }

So the element would be green (OK) if the touch is supported and red (error) if it's not. Now with CSS modules, my .style class is defined in a single file and gets transformed into something like this.

.xR23A { background: green; }
.hjTT7 .xR23A { background: red; }

If I wrap my class in a :global clause, it should remain unchanged if I understand it correctly. However, this will apply to every nested class, so I will remain with this.

.xR23A { background: green; }
.no-touchevents .style { background: red; }

How do I solve this to arrive to the desired solution? This is what I am after.

.xR23A { background: green; }
.no-touchevents .xR23A { background: red; }
Solution

  • you should be able to use the paren version of global to only hoise the modernizr portion.

    i.e.

    .style { background: green; }
:global(.no-touchevents) .style { background: red; }