Hi @ctaepper, you can save the local hashed classes (returned by CSS Modules - or CSS Loader to be exact) and use it later anyway if you want. It is just a string. For example:

/* my-styles.css */
.myDiv { color: red; }

// index.js maybe, or any file in your build process
import styles from 'my-styles.css';
window.STYLES = styles;

// in your script tag
const myDivClassName = window.STYLES.myDiv;
// now you have a string which is "myDiv" class, locally hashed by CSS Module previously

Please note that: EQCSS is a JS plugin, it runs in browser, at run-time. CSS Modules is a part of the build process. They are 2 different enviroments/processes. Maybe someone can think of a better way to communicate between them, but for now my only way is to save to a global variable (which I think is not really good)

i am not sure how this helps me in any way? my code example is inside a css file. css modules is hashing the myDiv of the class selector, but not at @element ".myDiv".

What I said is that CSS Modules can not hash @element ".myDiv", because it is defined in a script tag (CSS Modules's "hashing" progress happens when you import a CSS file, by CSS loader for example).

Therefore, instead of hashing @element ".myDiv", you can use the hashed class name in your EQCSS, something like @element styles.myDiv, in which styles.myDiv is a string returned by CSS Modules of myDiv class, like myDiv_h38hs

@dvkndn @element .myDiv is defined in the CSS file. The reference to .myDiv below this line is also in the same CSS file and is being hashed, but not the first reference. He wants this:

/* input css */
@element ".myDiv" and (min-width: 300px) {  /* with or without quotes, whatever works */
  .myDiv {
    background: red;
  }
}

to become this:

/* output css */
@element .myDiv___3kd4u and (min-width: 300px) {  /* with or without quotes, whatever works */
  .myDiv___3kd4u {
    background: red;
  }
}

Does that make sense? Are we misunderstanding something? Is there any obvious reason why the second reference is being picked up, but not the first?

Please note that: EQCSS is a JS plugin, it runs in browser, at run-time. CSS Modules is a part of the build process. They are 2 different enviroments/processes. Maybe someone can think of a better way to communicate between them, but for now my only way is to save to a global variable (which I think is not really good)

Thats misleading. EQCSS operates at runtime, but it uses the CSS to learn about the target elements.

As @sunny-g pointed out, all that needs to be done, is for:

@element ".myDiv" and (min-width: 300px) {

to become transpiled into:

@element .myDiv___3kd4u and (min-width: 300px) {

This is the job of the postcss plugin.

@markdalgleish, @geelen should this be done in the main postcss plugin or does it require a separate plugin?

@sunny-g this is exactly it I want it to be, yes! i hope this will be done by someone. this is the only reason why I cannot use eqcss right now, even though I want to very much

@gajus I appreciate you moving this topic to eqcss repo... no idea, why i didn't do that too :)