Scrum / postcss-at-rules-variables

PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else and more...

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeError: Cannot read property 'includes' of undefined

Scrum opened this issue Β· comments

based on #181 (comment)

Nice πŸ˜„

However, I just tested it and I now get this error:

 ERROR  Failed to compile with 5 errors                                                                                                                                                                    15:59:33

 error  in ./src/views/ViewHomepage.vue

Module build failed: TypeError: Cannot read property 'includes' of undefined
    at hasVar (/home/max/Development/wearegenkicom/node_modules/postcss-at-rules-variables/lib/index.js:1:478)
    at resolveValue (/home/max/Development/wearegenkicom/node_modules/postcss-at-rules-variables/lib/index.js:1:536)
    at /home/max/Development/wearegenkicom/node_modules/postcss-at-rules-variables/lib/index.js:1:966
    at Array.reduce (<anonymous>)
    at circularReference (/home/max/Development/wearegenkicom/node_modules/postcss-at-rules-variables/lib/index.js:1:905)
    at /home/max/Development/wearegenkicom/node_modules/postcss-at-rules-variables/lib/index.js:1:1387
    at LazyResult.run (/home/max/Development/wearegenkicom/node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.asyncTick (/home/max/Development/wearegenkicom/node_modules/postcss/lib/lazy-result.js:192:32)
    at /home/max/Development/wearegenkicom/node_modules/postcss/lib/lazy-result.js:197:27
    at <anonymous>

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-0818d96d","scoped":false,"hasInlineConfig":false}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/ViewHomepage.vue 4:14-382 13:3-17:5 14:22-390
 @ ./src/views/ViewHomepage.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?https://localhost:4435 webpack/hot/dev-server ./src/main.js

...

@gitscrum , I've put together a minimal reproduction repo at https://github.com/MaxMilton/reproduce-postcssatrulesvars-bug.

I done some playing around and I think the culprit behind this bug is variables which are commented out. Sounds a bit strange, I know, but clone my repo and try running it with and without the comment in the CSS.

Upon more testing I've found it happen whenever there's a comment on the line, it doesn't matter if the variable itself is commented or if there's a trailing comment, both result in the error.

Example:

:root {
  /* --variable: true; */
}
:root {
  --variable: true; /* comment */
}

@maxmilton Thanks for your research, they help me to look in the right direction. I will try to understand this quickly.

@maxmilton Thank you for this bug. All is fixed. We will wait for you from new bugs / offers / pool of requests :)

Please do not forget to put the star projects that you like))

Nice! Thank you. Tested and it's now working as expected 🌟 πŸ’―