NPM package build not behaving the same as the CDN version

[Luis Martins]

Hi, I’m trying to use the library by including on my Webpack build, which uses SASS for css, but for some reason I’m not being able to get it to work with that setup.

When I instantiate EQCSS in JS like this:

const ElementQueries = require('css-element-queries/src/ElementQueries');
ElementQueries.listen();

It will only work if my CSS rules look like this:

.parent{
  &[min-width~='400px'] {
    opacity: 1;
    grid-template-columns: 1fr 1fr;
  }
}

If however I use the utility helpers for SCSS that I’ve also included on the project, nothing happens:

.parent{
   @include element(
       (
         min-width: 400px
       )
     ) {
       eq_this {
         opacity: 1;
         grid-template-columns: 1fr 1fr;
       }
     }
   }

I’ve noticed that in this scenario, the generated CSS looks like this:

/**/'@element '.parent' and (min-width: 400px) {/**/
  eq_this {
    opacity: 1;
    grid-template-columns: 1fr 1fr; }

/**/}'/**/

Am I missing a step here?

[Tommy Hodgins]

Hi @lmartins, in the first two example it looks like you're using marcj/css-element-queries plugin and not EQCSS.js, and in the SCSS utility helpers it looks like there's EQCSS syntax inside of SCSS. Unless you include EQCSS.js on the page where this CSS ends up the EQCSS-powered queries won't run, but then it sounds like you might be running two different element query plugins at the same time.

[Luis Martins]

@tomhodgins dang it! That would explain it 😂
Sorry about the confusion Tommy. I went looking for your package in NPM and somehow got the two mixed up. Again, sorry about that and thank you for confirming it.