marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

attrs is not defined #183

Closed cristian-gabbanini closed 6 years ago

cristian-gabbanini commented 6 years ago

Dear Marcj, I would like to report the following issue I am experiencing using the release available here on GitHub.

When I run ElementQueries.init(), I get the following error:

Uncaught ReferenceError: attrs is not defined
    at extractQuery (vendor3-a0c724437a.js:13836)
    at readRules (vendor3-a0c724437a.js:13864)
    at ElementQueries.init (vendor3-a0c724437a.js:13888)
    at Function.2.ElementQueries.init (vendor3-a0c724437a.js:13968)
    at <anonymous>:1:19

I am using the following simple stylesheet (which appears to be correct):

form[min-width~="400px"] div {
    background-color: red;
}

As I can see, it seems that the first regex used in extractQuery cannot find a match for the rule I've pasted (i.e. var match equals null) thus throwing the error above. But the same regex with the same css rule seems to work here: https://regex101.com/ Perhaps you could give me some advice on how to solve this problem. Many thanks, Cristian

EDIT: ElementQueries 0.4.0 from https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.js works fine.

stephanepericat commented 6 years ago

i have the same problem... i cannot use the cdn version, what other option do I have ?

robertwbradford commented 6 years ago

Any update on this one?

robertwbradford commented 6 years ago

@marcj It looks like this is a problem on 0.4.0. In extractQuery of src/ElementQueries.js, only match and smatch are getting initialized. Need to add the following before the while statement:

var attrs;
var attrMatch;
robertwbradford commented 6 years ago

@marcj I now see this is part of https://github.com/marcj/css-element-queries/pull/167.

However, when doing a fresh npm i -S css-element-queries we get 0.4.0 which does not include the fix.

Are you able to straighten out the versioning on NPM so a default install will include this fix? Thanks.

robertwbradford commented 6 years ago

For anyone else seeing this, if you install from Github it seems to work: npm i marcj/css-element-queries

marcj commented 6 years ago

Should be fixed, will be part of the next version 1.0.0 in the next hours.