Fix JS defined variables marked as important

Fix #86

Author: MadLittleMods

CHANGELOG.md

@@ -1,3 +1,8 @@
+# v0.11.0 - 2018-10-9
+
+ - Fix JS-defined variables using `isImportant`, https://github.com/MadLittleMods/postcss-css-variables/pull/87
+
+
 # v0.10.0 - 2018-9-25
 
  - Cast `opts.variables` variable values to string

index.js

@@ -109,7 +109,8 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 				// Add the variable decl to the root node
 				var varDecl = postcss.decl({
 					prop: variableName,
-					value: variableValue
+					value: variableValue,
+					important: isImportant
 				});
 				variableRootRule.append(varDecl);
 

test/fixtures/js-defined-important.css

@@ -0,0 +1,7 @@
+:root {
+  --js-defined-important: #000;
+}
+
+.box1 {
+  background-color: var(--js-defined-important);
+}

test/fixtures/js-defined-important.expected.css

@@ -0,0 +1,3 @@
+.box1 {
+  background-color: #0f0;
+}

test/fixtures/js-defined-preserve-injected.expected.css

@@ -4,6 +4,8 @@
 }
 :root {
 }
+:root {
+}
 
 .box1 {
 	width: 75px;

test/fixtures/js-defined-preserve.expected.css

@@ -1,6 +1,9 @@
 :root {
 	--js-defined-no-prefix: #ff0000;
 }
+:root {
+	--js-defined-important: #0f0 !important;
+}
 :root {
 	--js-defined2: 80px;
 }

test/test.js

@@ -18,6 +18,10 @@ var MOCK_JS_VARIABLES =  {
 	'--js-defined2': {
 		value: '80px'
 	},
+	'--js-defined-important': {
+		value: '#0f0',
+		isImportant: true
+	},
 	// Should be automatically prefixed with `--`
 	'js-defined-no-prefix': '#ff0000'
 };
@@ -170,6 +174,11 @@ describe('postcss-css-variables', function() {
 			'js-defined',
 			{ variables: MOCK_JS_VARIABLES }
 		);
+		test(
+			'should work with JS defined important variables',
+			'js-defined-important',
+			{ variables: MOCK_JS_VARIABLES }
+		);
 		test(
 			'should preserve -- declarations and var() values with `options.variables` AND `options.preserve`',
 			'js-defined-preserve',