postcss-variables - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

package.json

 {
   "name": "postcss-variables",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "PostCSS plugin that converts variables into CSS",
@@ -25,4 +25,5 @@ "main": "index.js",
     "mocha": "^3.2.0",
-    "postcss-js-mixins": "^0.1"
+    "postcss-js-mixins": "^0.2",
+    "postcss-wee-syntax": "^1.1.1"
   }
 }

README.md

@@ -108,2 +108,61 @@ # PostCSS Variables
 
+## Advanced
+ 
+When creating your global variables, you may want to eliminate duplication by referencing an existing property to define your new variable. You can do this by referencing variables like you would in your stylesheet. Here is the basic idea:
+
+```js
+let vars = {
+	colors: {
+		primary: '#fff'
+	},
+	heading: {
+		color: '$colors.primary'
+	}
+ };
+```
+
+In certain circumstances, you may want to create a base variables file that you would want to be able to override. This would be a use-case if you were using this plugin inside of some kind of framework.
+If you are using functions to calculate global variables, you may want to delay the function execution until after you had a chance to override your variables. This can be done by using the `defer` method.
+
+Here is a full example of how you might create a base variables file:
+
+```js
+function darken(color, pct) {
+	// Do something to calculate darker hex value
+	return result
+}
+
+module.exports = {
+	colors: {
+		white: '#fff',
+		gray: defer(darken, ['$colors.white', 35])
+	}
+ };
+```
+
+This is what a full example would look like in order to use these features:
+
+```js
+/* variables.js */
+const { defer } = require('postcss-variables/lib/helpers');
+const register = require('postcss-variables/lib/register');
+
+function darken(color, pct) {
+	// Do something to calculate darker hex value
+	return result
+}
+
+let vars = {
+	colors: {
+		primary: '#fff',
+		gray: defer(darken, ['$colors.white', 35])
+	},
+	heading: {
+		color: '$colors.primary'
+	}
+};
+
+module.exports = register(vars);
+```
+
 **Note:** Please refer to [Advanced Variables](https://github.com/jonathantneal/postcss-advanced-variables) for more advanced features. This library is essentially a simplification and alteration of that plugin. Thank you to the author for making it available.

tests.js

 const expect = require('chai').expect;
 const postcss = require('postcss');
 const plugin = require('./');
+const register = require('./lib/register');
+const { defer } = require('./lib/helpers');
 
@@ -23,4 +25,3 @@ function process(input, expected, opts = {}) {
 	return postcss([ plugin(opts) ]).process(input, {
-			parser: require('postcss-js-mixins/parser/parse'),
-			stringifier: require('postcss-js-mixins/parser/stringify')
+			syntax: require('postcss-wee-syntax')
 		})
@@ -338,2 +339,72 @@ .then((result) => {
 	});
+});
+
+describe('Registering and deferring variables', () => {
+	it('should return function', () => {
+		expect(typeof register()).to.equal('function');
+	});
+
+	it('should return evaluated object when executed', () => {
+		let vars = {
+				prop1: 'test',
+				prop2: '$prop1'
+			},
+			results = register(vars)();
+
+		expect(JSON.stringify(results)).to.equal('{"prop1":"test","prop2":"test"}');
+	});
+
+	it('should evaluate dot notated variable references', () => {
+		let vars = {
+				colors: {
+					primary: '#000'
+				},
+				input: {
+					color: '$colors.primary'
+				}
+			},
+			results = register(vars)();
+
+		expect(results.input.color).to.equal('#000');
+	});
+
+	it('should be able to override properties that are referenced by other properties', () => {
+		let vars = {
+				colors: {
+					primary: '#000'
+				},
+				input: {
+					color: '$colors.primary'
+				}
+			};
+
+		// Override variable
+		vars.colors.primary = '#eee';
+
+		let results = register(vars)();
+
+		expect(results.input.color).to.equal('#eee');
+		expect(results.colors.primary).to.equal('#eee');
+	});
+
+	it('should be able to defer property function execution', () => {
+		let colorFn = (val) => {
+				return val;
+			},
+			vars = {
+				colors: {
+					primary: '#fff'
+				},
+				input: {
+					color: defer(colorFn, ['$colors.primary'])
+				}
+			};
+
+		// Make overriding change that affects function outcome
+		vars.colors.primary = '#000';
+
+		let results = register(vars)();
+
+		expect(results.input.color).to.equal('#000');
+	});
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19208

increased by31.99%

Number of package files

9

increased by28.57%

Lines of code

620

increased by27.57%

Number of lines in readme file

167

increased by54.63%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes