Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Priority of js defined variables over css defined variables #86

Closed
2beers opened this issue Oct 9, 2018 · 5 comments
Closed

Priority of js defined variables over css defined variables #86

2beers opened this issue Oct 9, 2018 · 5 comments

Comments

@2beers
Copy link

2beers commented Oct 9, 2018

Is there an option that will enable priority for js defined variables over css ones?
For example in this css

:root {
    --first-color: red;
}
#box {
    background-color: var(--first-color);
}
cssvariables({
    variables: {
        "--first-color": "green"
    }
})

will output #box{background-color:red} and I expected to change the color to green as provided from js options

Thanks

@MadLittleMods
Copy link
Owner

MadLittleMods commented Oct 9, 2018

@2beers JS-defined variables just get put in a :root at the top

You can add the isImportant option the variable and I think it should take priority, https://github.com/MadLittleMods/postcss-css-variables#variables-default-

cssvariables({
    variables: {
        "--first-color": {
            value: "green",
            isImportant: true
        }
    }
})

@2beers
Copy link
Author

2beers commented Oct 9, 2018

Thanks @MadLittleMods . I've tried using isImportant but it returns an error. I tried with both postcss 7.0.5 and 6.0.23 and is the same error.
I'm using node v8.11.1

(node:8256) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'parent' of undefined
    at findNodeAncestorWithSelector (D:\work\htdocs\project\node_modules\postcss-css-variables\lib\find-node-ancestor-with-selector.js:11:20)
    at D:\work\htdocs\project\node_modules\postcss-css-variables\lib\resolve-value.js:86:33
    at String.replace (<anonymous>)
    at resolveValue (D:\work\htdocs\project\node_modules\postcss-css-variables\lib\resolve-value.js:44:34)
    at resolveDecl (D:\work\htdocs\project\node_modules\postcss-css-variables\lib\resolve-decl.js:90:44)
    at D:\work\htdocs\project\node_modules\postcss-css-variables\index.js:251:7
    at Array.forEach (<anonymous>)
    at D:\work\htdocs\project\node_modules\postcss-css-variables\index.js:248:33
    at Array.forEach (<anonymous>)
    at D:\work\htdocs\project\node_modules\postcss-css-variables\index.js:247:18

@MadLittleMods
Copy link
Owner

@2beers Thanks for the heads-up 👍. Working on a fix now which will probably ship today in a bit, #87

@MadLittleMods
Copy link
Owner

@2beers
Copy link
Author

2beers commented Oct 9, 2018

@MadLittleMods Thanks Eric for your help. Just tested and works great now.
Great job

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants