0

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; }
lmenus
  • 604
  • 9
  • 27

1 Answers1

2

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; }
Patrick
  • 13,872
  • 5
  • 35
  • 53