Skip to content

Commit

Permalink
[FIX] CSS var assignment only for less to less vars (#116)
Browse files Browse the repository at this point in the history
  • Loading branch information
petermuessig committed Feb 24, 2020
1 parent 17bc3b4 commit 2e9560d
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 2 deletions.
19 changes: 17 additions & 2 deletions lib/plugin/css-variables-pointer.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,24 @@ CSSVariablesPointerPlugin.prototype = {
return node;
},

_isVariableAssignment(rule) {
// determines a simple less variable assignment:
// Rule > Value => Array[length=1] > Expression => Array[length=1] > Variable
const value = rule && rule.variable &&
rule.value instanceof less.tree.Value && rule.value;
const expression = value &&
Array.isArray(value.value) && value.value.length == 1 &&
value.value[0] instanceof less.tree.Expression && value.value[0];
const variable = expression &&
Array.isArray(expression.value) && expression.value.length == 1 &&
expression.value[0] instanceof less.tree.Variable && expression.value[0];
return variable;
},

visitVariable(node, visitArgs) {
// collect less variables to css variables mapping
if (this.callStack.length == 0 && this.ruleStack.length > 0 && this.ruleStack[this.ruleStack.length - 1].variable) {
// collect all simple less variables to less variables mapping (to convert them to css variables assignments)
if (this.callStack.length == 0 && this.ruleStack.length > 0 &&
this._isVariableAssignment(this.ruleStack[this.ruleStack.length - 1])) {
this.mVars["--" + this.ruleStack[0].name.substr(1)] = "var(" + node.name.replace(/^@/, "--") + ")";
}
return node;
Expand Down
1 change: 1 addition & 0 deletions test/expected/complex/test-cssvars-variables.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
:root {
--link-color: #428bca;
--link-color-hover: #3071a9;
--other-var: 0 0 0.25rem 0 rgba(0, 0, 0, 0.15), inset 0 -0.0625rem 0 0 #428bca;
--link-color-active: var(--link-color);
--var: var(--a);
--a: 9%;
Expand Down
1 change: 1 addition & 0 deletions test/fixtures/complex/test.less
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
@other-var: 0 0 0.25rem 0 rgba(0, 0, 0, 0.15), inset 0 -0.0625rem 0 0 @link-color;
@link-color-active: @link-color;

// Usage
Expand Down

0 comments on commit 2e9560d

Please sign in to comment.