postcss-css-variables - npm Package Compare versions

Comparing version 0.9.0 to 0.10.0

CHANGELOG.md

@@ -0,2 +1,7 @@
+# v0.10.0 - 2018-9-25
 
+ - Cast `opts.variables` variable values to string
+    - Thank you to [@shonie](https://github.com/shonie) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/84)
+
+
 # v0.9.0 - 2018-6-26
@@ -3,0 +8,0 @@

index.js

@@ -154,2 +154,3 @@ // PostCSS CSS Variables (postcss-css-variables)
 		// ---------------------------------------------------------
+		//console.log('Collecting variables defined START');
 		eachCssVariableDeclaration(css, function(decl) {
@@ -199,2 +200,3 @@ var declParentRule = decl.parent;
 		});
+		//console.log('Collecting variables defined END');
 
@@ -201,0 +203,0 @@

lib/clone-splice-parent-onto-node-when.js

@@ -0,0 +0,0 @@

lib/find-node-ancestor-with-selector.js

@@ -0,0 +0,0 @@ var generateScopeList = require('./generate-scope-list');

lib/gather-variable-dependencies.js

@@ -0,0 +0,0 @@ // Variables that referenced in some way by the target variable

lib/generate-descendant-pieces-from-selector.js

@@ -0,0 +0,0 @@ // Unit Tests: https://regex101.com/r/oP0fM9/15

lib/generate-direct-descendant-pieces-from-selector.js

@@ -0,0 +0,0 @@ // Unit Tests: https://regex101.com/r/oS4zJ8/3

lib/generate-scope-list.js

@@ -0,0 +0,0 @@

lib/is-node-under-scope.js

@@ -0,0 +0,0 @@ var isUnderScope = require('./is-under-scope');

lib/is-piece-always-ancestor-selector.js

@@ -0,0 +0,0 @@ var alwaysAncestorSelector = {

lib/is-under-scope.js

@@ -89,4 +89,4 @@ var escapeStringRegexp = require('escape-string-regexp');
 				}
-				
 
+
 				var isFurther = foundIndex >= pieceOffset;
@@ -93,0 +93,0 @@

lib/resolve-decl.js

@@ -89,2 +89,3 @@ var resolveValue = require('./resolve-value');
 	// Grab the balue for this declarations
+	//console.log('resolveDecl 1');
 	var valueResults = _logResolveValueResult(resolveValue(decl, map));
@@ -95,2 +96,3 @@
 	// Now find any at-rule declarations that need to be added below each rule
+	//console.log('resolveDecl 2');
 	eachMapItemDependencyOfDecl(valueResults.variablesUsed, map, decl, function(mimicDecl, mapItem) {
@@ -97,0 +99,0 @@ var ruleClone = shallowCloneNode(decl.parent);

lib/resolve-value.js

@@ -15,2 +15,6 @@ var generateScopeList = require('./generate-scope-list');
 
+function toString(value) {
+	return String(value);
+}
+
 // Pass in a value string to parse/resolve and a map of available values
@@ -25,4 +29,5 @@ // and we can figure out the final value
 var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal debugging*/_debugIsInternal) {
+	var debugIndent = _debugIsInternal ? '\t' : '';
 
-	var resultantValue = decl.value;
+	var resultantValue = toString(decl.value);
 	var warnings = [];
@@ -37,2 +42,3 @@
 
+	//console.log(debugIndent, (_debugIsInternal ? '' : 'Try resolving'), generateScopeList(decl.parent, true), `ignorePseudoScope=${ignorePseudoScope}`, '------------------------');
 
@@ -52,10 +58,9 @@ // Resolve any var(...) substitutons
 
+			var underScope = isNodeUnderScope(decl.parent, varDeclMapItem.parent);
+			var underScsopeIgnorePseudo = isNodeUnderScope(decl.parent, varDeclMapItem.parent, ignorePseudoScope);
 
-			//var debugIndent = _debugIsInternal ? '\t' : '';
-			//console.log(debugIndent, generateScopeList(decl.parent, true));
-			//console.log(debugIndent, generateScopeList(varDeclMapItem.parent, true));
-			//console.log(debugIndent, 'isNodeUnderScope', isNodeUnderScope(decl.parent, varDeclMapItem.parent), varDeclMapItem.decl.value);
+			//console.log(debugIndent, 'isNodeUnderScope', underScope, underScsopeIgnorePseudo, generateScopeList(varDeclMapItem.parent, true), varDeclMapItem.decl.value);
 
 			if(
-				isNodeUnderScope(decl.parent, varDeclMapItem.parent, ignorePseudoScope) &&
+				underScsopeIgnorePseudo &&
 				// And if the currently matched declaration is `!important`, it will take another `!important` to override it
@@ -74,3 +79,3 @@ (!(matchingVarDeclMapItem || {}).isImportant || varDeclMapItem.isImportant)
 				var fallbackDecl = decl.clone({ parent: decl.parent, value: fallback });
-				fallbackValue = resolveValue(fallbackDecl, map, false, true).value;
+				fallbackValue = resolveValue(fallbackDecl, map, false, /*internal*/true).value;
 			}
@@ -100,2 +105,4 @@
 
+		//console.log(debugIndent, 'replaceValue', replaceValue);
+
 		return replaceValue;
@@ -102,0 +109,0 @@ });

lib/shallow-clone-node.js

@@ -0,0 +0,0 @@ // Inspired by the PostCSS clone: https://github.com/postcss/postcss/blob/caba908d0f4e362466252202e6be84660c33d8a5/lib/node.js#L17

package.json

 {
   "name": "postcss-css-variables",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation",
@@ -25,14 +25,13 @@ "keywords": [
     "chai-as-promised": "^7.1.1",
-    "clean-css": "^4.1.7",
+    "cssnano": "^4.0.0",
     "eslint": "^4.4.1",
     "eslint-plugin-react": "^7.1.0",
-    "gulp": "^3.8.11",
-    "gulp-eslint": "^4.0.0",
-    "gulp-mocha": "^4.3.1",
-    "mocha": "^3.5.0"
+    "mocha": "^3.5.0",
+    "postcss-discard-comments": "^4.0.0",
+    "postcss-normalize-whitespace": "^4.0.0"
   },
   "scripts": {
-    "test": "gulp",
+    "test": "mocha",
     "lint": "eslint ."
   }
 }

README.md

@@ -274,3 +274,3 @@ # PostCSS CSS Variables
 	}
-	
+
 	.box-foo .box-bar {
@@ -290,13 +290,10 @@ width: 300px;
 
-### Interoperability
+### Interoperability and differences from `postcss-custom-properties`
 
 Putting `postcss-css-variables` in place of `postcss-custom-properties` should work out of the box.
 
-In `postcss-custom-properties`, CSS variable declarations are specifically restricted to the `:root` selector. In `postcss-css-variables`, this is not the case and they may be declared inside any rule with whatever selector. The variables are substituted based on statically known CSS selector inheritance.
+In [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties), CSS variable declarations are specifically restricted to the `:root` selector.
 
-### Differences from `postcss-custom-properties`
+In `postcss-css-variables`, this is not the case and they may be declared inside any rule with whatever selector. The variables are substituted based on statically known CSS selector inheritance.
 
-In [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties), CSS variable declarations are specifically restricted to the `:root` selector. In `postcss-css-variables`, this is not the case and they may be declared inside any rule with whatever selector.
- 
-
 Here's a quick overview of the differences:
@@ -316,4 +313,20 @@
 
-Using the following CSS:
+Note the nested markup below. We only know about the DOM's inheritance from your CSS selectors. If you want nest multiple times, you need to be explicit about it in your CSS which isn't necessary with browser that natively support CSS variables. See the innermost `<h1 class="title">`
 
+```html
+<div class="component">
+    Black
+
+    <div class="title">
+        Blue
+
+        <div class="decoration">
+            Green
+
+            <div class="title">Blue with this plugin, but green per spec</div>
+        </div>
+    </div>
+</div>
+```
+
 ```css
@@ -324,7 +337,7 @@ .component {
 
-.component .header {
+.component .title {
   color: var(--text-color);
 }
 
-.component .text {
+.component .decoration {
   --text-color: green;
@@ -335,19 +348,3 @@ color: var(--text-color);
 
-Note the nested markup below. We only know about the DOM's inheritance from your CSS selectors. If you want nest multiple times, you need to be explicit about it in your CSS which isn't necessary with browser that natively support CSS variables. See the innermost `<h1 class="title">`
 
-```html
-<div class="component">
-    Black
-
-    <h1 class="title">
-        Blue
-
-        <p class="decoration">
-            Green
-
-            <h1 class="title">Blue with this plugin, but green per spec</h1>
-        </p>
-    </h1>
-</div>
-```
 [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties) avoids this problem entirely by restricting itself to just the `:root` selector. This is because the developers there would prefer to not support a feature instead of something almost-spec-compliant like what `postcss-css-variables` does.
@@ -354,0 +351,0 @@

No alert changes

Improved metrics

Dev dependency count

9

-10%

Lines of code

824

1.1%

Worsened metrics

Total package byte prevSize

55052

-0.72%

Number of lines in readme file

419

-0.71%

No dependency changes