postcss-mixins
Advanced tools
postcss-mixins - npm Package Compare versions
Comparing version 0.2.0 to 0.3.0
@@ -0,1 +1,6 @@ | ||
| ## 0.3 | ||
| * Change syntax to comma separated arguments. | ||
| Use: `@mixin name 1, 2` instead of `@mixin name 1 2`. | ||
| * Add default value for arguments. | ||
| ## 0.2 | ||
@@ -2,0 +7,0 @@ * Add block mixins support. |
71
index.js
@@ -41,5 +41,16 @@ var postcss = require('postcss'); | ||
| var insertMixin = function (mixins, rule, opts) { | ||
| var params = postcss.list.space(rule.params); | ||
| var name = params.shift(); | ||
| var insertMixin = function (result, mixins, rule, opts) { | ||
| var name = rule.params.split(/\s/, 1)[0]; | ||
| var params = rule.params.slice(name.length).trim(); | ||
| if ( params.indexOf(',') === -1 ) { | ||
| params = postcss.list.space(params); | ||
| if ( params.length > 1 ) { | ||
| result.warn('Space argument separation is depreacted and ' + | ||
| 'will be removed in next version. Use comma.', | ||
| { node: rule }); | ||
| } | ||
| } else { | ||
| params = postcss.list.comma(params); | ||
| } | ||
| var meta = mixins[name]; | ||
@@ -54,6 +65,5 @@ var mixin = meta && meta.mixin; | ||
| } else if ( mixin.name === 'define-mixin' ) { | ||
| var names = meta.names; | ||
| var values = { }; | ||
| for ( var i = 0; i < names.length; i++ ) { | ||
| values[ names[i] ] = params[i] || ''; | ||
| var values = { }; | ||
| for ( var i = 0; i < meta.args.length; i++ ) { | ||
| values[ meta.args[i][0] ] = params[i] || meta.args[i][1]; | ||
| } | ||
@@ -67,3 +77,3 @@ | ||
| var proxy = postcss.rule({ nodes: clones }); | ||
| if ( names.length ) { | ||
| if ( meta.args.length ) { | ||
| vars({ only: values })(proxy); | ||
@@ -83,6 +93,6 @@ } | ||
| } else if ( typeof mixin === 'function' ) { | ||
| var args = [rule].concat(params); | ||
| var result = mixin.apply(this, args); | ||
| if ( typeof result === 'object' ) { | ||
| insertObject(rule, result, rule.source); | ||
| var args = [rule].concat(params); | ||
| var nodes = mixin.apply(this, args); | ||
| if ( typeof nodes === 'object' ) { | ||
| insertObject(rule, nodes, rule.source); | ||
| } | ||
@@ -94,10 +104,27 @@ } | ||
| var defineMixin = function (mixins, rule) { | ||
| var names = rule.params.split(/\s/); | ||
| var name = names.shift(); | ||
| var defineMixin = function (result, mixins, rule) { | ||
| var name = rule.params.split(/\s/, 1)[0]; | ||
| var other = rule.params.slice(name.length).trim(); | ||
| names = names.map(function (i) { | ||
| return i.slice(1); | ||
| }); | ||
| var args = []; | ||
| if ( other.length ) { | ||
| if ( other.indexOf(',') === -1 && other.indexOf(':') === -1 ) { | ||
| args = other.split(/\s/).map(function (str) { | ||
| return [str.slice(1), '']; | ||
| }); | ||
| if ( args.length > 1 ) { | ||
| result.warn('Space argument separation is depreacted and ' + | ||
| 'will be removed in next version. Use comma.', | ||
| { node: rule }); | ||
| } | ||
| } else { | ||
| args = postcss.list.comma(other).map(function(str) { | ||
| var arg = str.split(':', 1)[0]; | ||
| var defaults = str.slice(arg.length + 1); | ||
| return [arg.slice(1).trim(), defaults.trim()]; | ||
| }); | ||
| } | ||
| } | ||
| var content = false; | ||
@@ -109,3 +136,3 @@ rule.eachAtRule('mixin-content', function () { | ||
| mixins[name] = { mixin: rule, names: names, content: content }; | ||
| mixins[name] = { mixin: rule, args: args, content: content }; | ||
| rule.removeSelf(); | ||
@@ -141,9 +168,9 @@ }; | ||
| return function (css) { | ||
| return function (css, result) { | ||
| css.eachAtRule(function (rule) { | ||
| if ( rule.name === 'mixin' ) { | ||
| insertMixin(mixins, rule, opts); | ||
| insertMixin(result, mixins, rule, opts); | ||
| } else if ( rule.name === 'define-mixin' ) { | ||
| defineMixin(mixins, rule); | ||
| defineMixin(result, mixins, rule); | ||
| } | ||
@@ -150,0 +177,0 @@ |
| { | ||
| "name": "postcss-mixins", | ||
| "version": "0.2.0", | ||
| "version": "0.3.0", | ||
| "description": "PostCSS plugin for mixins", | ||
@@ -17,3 +17,3 @@ "keywords": ["postcss", "css", "postcss-plugin", "mixins", "sass"], | ||
| "devDependencies": { | ||
| "gulp-eslint": "0.11.1", | ||
| "gulp-eslint": "0.12.0", | ||
| "gulp-mocha": "2.0.1", | ||
@@ -20,0 +20,0 @@ "mocha": "2.2.4", |
@@ -13,5 +13,7 @@ # PostCSS Mixins [![Build Status][ci-img]][ci] | ||
| ```css | ||
| @define-mixin icon $network $color { | ||
| @define-mixin icon $network, $color: blue { | ||
| .icon.is-$(network) { | ||
| color: $color; | ||
| @mixin-content; | ||
| backgroun-position: $position; | ||
| } | ||
@@ -24,4 +26,8 @@ .icon.is-$(network):hover { | ||
| @mixin icon twitter blue; | ||
| @mixin icon youtube red; | ||
| @mixin icon twitter { | ||
| background: url(twt.png); | ||
| } | ||
| @mixin icon youtube, red { | ||
| background: url(youtube.png); | ||
| } | ||
| ``` | ||
@@ -32,2 +38,3 @@ | ||
| color: blue; | ||
| background: url(twt.png); | ||
| } | ||
@@ -40,2 +47,3 @@ .icon.is-twitter:hover { | ||
| color: red; | ||
| background: url(youtube.png); | ||
| } | ||
@@ -56,4 +64,2 @@ .icon.is-youtube:hover { | ||
| Without options: | ||
| ```js | ||
@@ -63,10 +69,2 @@ postcss([ require('postcss-mixins') ]) | ||
| With options: | ||
| ```js | ||
| postcss([ | ||
| require('postcss-mixins')({ mixinsDir: __dirname + '/mixins/' }) | ||
| ]) | ||
| ``` | ||
| See [PostCSS] docs for examples for your environment. | ||
@@ -88,5 +86,2 @@ | ||
| &::after { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| content: ""; | ||
@@ -102,18 +97,2 @@ background-url: url(/icons/$(name).png); | ||
| You can pass a block to mixin: | ||
| ```css | ||
| @define-mixin hover { | ||
| &:hover, &.is-hover { | ||
| @mixin-content; | ||
| } | ||
| } | ||
| a { | ||
| @mixin hover { | ||
| color: red; | ||
| } | ||
| } | ||
| ``` | ||
| Unlike Sass, PostCSS has no `if` or `while` statements. If you need some | ||
@@ -228,3 +207,3 @@ complicated logic, you should use function mixin. | ||
| require('postcss-mixins')({ | ||
| mixinsDir: 'mixins/' | ||
| mixinsDir: path.join(__dirname, 'mixins/') | ||
| }) | ||
@@ -231,0 +210,0 @@ |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by9.93%
12878
- Lines of code
- increased by20.49%
147
Worsened metrics
- Number of lines in readme file
- decreased by-8.86%
216