Likelihood of working with CSS injected with React + CSS Modules?

[brandondurham]

My CSS is injected as style tags with React and using CSS Modules. I don’t want all CSS processed with viewport-units-buggyfill. I saw the tip to add data-viewport-units-buggyfill="ignore" to the <link /> tag which made me believe that injected CSS wouldn’t be supported, but I didn’t see mention of it.

Possible?

[rodneyrehm]

<style data-viewport-units-buggyfill="ignore"> should work as well, if I'm reading this right. Does that answer your question?

[marcoribeiroweb]

I see the point and i think have the same issue, but im not using React or something, i just use CSS and i dont want all CSS being processed by viewport-units-buggyfill, just want a specific elements. Your tip <style data-viewport-units-buggyfill="ignore"> doesnt work if you only have just one style css. Is there any way to prevent this? Tell to buggyfill to apply style elements just to a specific elements? @rodneyrehm

[rodneyrehm]

@marcoribeiroweb sounds like you want to "select selectors"? the buggyfill doesn't support that and I'm not sure how we'd even go about providing such a feature. Weird hacks like html:not(.viewport-units-buggyfill-ignore) <your actual selector> to exclude (or inverse to include) come to mind, but I don't know how big of a pandora's box that would be.

[marcoribeiroweb]

Hmm, yes maybe. But is would be awesome if there is a workaround.
If there is not, for me it comes to mind that the only way to do this without weird hacks is to work with 2 css styles, one with only all VW/VH units that i want viewport-units-buggyfill work and the other with the data-viewport-units-buggyfill attribute to ignore.
Thank you.