postcss-mixins - npm Package Compare versions

Comparing version 2.1.1 to 3.0.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+## 3.0
+* Add nested mixins support.
+* Use `postcss-js` to conver object to CSS in JS mixins.
+* Case insentive mixin file search.
+
 ## 2.1.1
@@ -2,0 +7,0 @@ * Async CSS mixin files loading (by Jed Mao).

index.js

@@ -0,43 +1,18 @@
+var jsToCss = require('postcss-js/parser');
 var postcss = require('postcss');
+var globby  = require('globby');
 var vars    = require('postcss-simple-vars');
 var path    = require('path');
-var globby  = require('globby');
 var fs      = require('fs');
 
-var stringToAtRule = function (str, obj) {
-    obj.name   = str.match(/^@([^\s]*)/)[1];
-    obj.params = str.replace(/^@[^\s]*\s+/, '');
-    return obj;
-};
-
-var objectToNodes = function (node, obj, source) {
-    var name, value, decl, rule;
-    for ( name in obj ) {
-        value = obj[name];
-        if ( typeof value === 'object' ) {
-            if ( name[0] === '@' ) {
-                rule = postcss.atRule(stringToAtRule(name, { source: source }));
-            } else {
-                rule = postcss.rule({ selector: name, source: source });
-            }
-            node.append(rule);
-            if ( typeof value === 'object' ) objectToNodes(rule, value, source);
-        } else {
-            decl = postcss.decl({
-                prop:   name,
-                value:  value.toString(),
-                source: source
-            });
-            node.append(decl);
-        }
-    }
-    return node;
-};
-
-var insertObject = function (rule, obj) {
-    var root = objectToNodes(postcss.root(), obj, rule.source);
+var insertObject = function (rule, obj, processMixins) {
+    var root = jsToCss(obj);
+    root.each(function (node) {
+        node.source = rule.source;
+    });
+    processMixins(root);
     rule.parent.insertBefore(rule, root);
 };
 
-var insertMixin = function (result, mixins, rule, opts) {
+var insertMixin = function (result, mixins, rule, processMixins, opts) {
     var name   = rule.params.split(/\s/, 1)[0];
@@ -56,4 +31,4 @@ var params = rule.params.slice(name.length).trim();
 
-    var meta   = mixins[name];
-    var mixin  = meta && meta.mixin;
+    var meta  = mixins[name];
+    var mixin = meta && meta.mixin;
 
@@ -86,2 +61,3 @@ if ( !meta ) {
         }
+        processMixins(proxy);
 
@@ -91,3 +67,3 @@ rule.parent.insertBefore(rule, clones);
     } else if ( typeof mixin === 'object' ) {
-        insertObject(rule, mixin, rule.source);
+        insertObject(rule, mixin, processMixins);
 
@@ -98,3 +74,3 @@ } else if ( typeof mixin === 'function' ) {
         if ( typeof nodes === 'object' ) {
-            insertObject(rule, nodes, rule.source);
+            insertObject(rule, nodes, processMixins);
         }
@@ -144,3 +120,2 @@ }
 
-    var i;
     var cwd    = process.cwd();
@@ -162,25 +137,31 @@ var globs  = [];
     return function (css, result) {
-        var discoverMixins = function (atrule) {
-            if ( atrule.name === 'mixin' ) {
-                insertMixin(result, mixins, atrule, opts);
-            } else if ( atrule.name === 'define-mixin' ) {
-                defineMixin(result, mixins, atrule);
-            }
+        var processMixins = function (root) {
+            root.walkAtRules(function (atrule) {
+                if ( atrule.name === 'mixin' ) {
+                    insertMixin(result, mixins, atrule, processMixins, opts);
+                } else if ( atrule.name === 'define-mixin' ) {
+                    defineMixin(result, mixins, atrule);
+                }
+            });
         };
-        return globby(globs).then(function (files) {
+
+        return globby(globs, { nocase: true }).then(function (files) {
             return Promise.all(files.map(function (file) {
-                var ext = path.extname(file);
-                var name = path.basename(file, ext);
-                file = path.join(cwd, path.relative(cwd, file));
+                var ext      = path.extname(file);
+                var name     = path.basename(file, ext);
+                var relative = path.join(cwd, path.relative(cwd, file));
                 return new Promise(function (resolve, reject) {
-                    if (ext === '.css') {
-                        fs.readFile(file, function (err, contents) {
+                    if ( ext.toLowerCase() === '.css' ) {
+                        fs.readFile(relative, function (err, contents) {
                             if ( err ) return reject(err);
-                            postcss.parse(contents).walkAtRules(discoverMixins);
+                            postcss.parse(contents)
+                                .walkAtRules('define-mixin', function (atrule) {
+                                    defineMixin(result, mixins, atrule);
+                                });
                             resolve();
                         });
-                        return;
+                    } else {
+                        mixins[name] = { mixin: require(relative) };
+                        resolve();
                     }
-                    mixins[name] = { mixin: require(file) };
-                    resolve();
                 });
@@ -190,10 +171,9 @@ }));
             if ( typeof opts.mixins === 'object' ) {
-                for ( i in opts.mixins ) {
+                for ( var i in opts.mixins ) {
                     mixins[i] = { mixin: opts.mixins[i] };
                 }
             }
-
-            css.walkAtRules(discoverMixins);
+            processMixins(css);
         });
     };
 });

package.json

 {
   "name": "postcss-mixins",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "description": "PostCSS plugin for mixins",
@@ -19,16 +19,14 @@ "keywords": [
   "dependencies": {
-    "postcss-simple-vars": "^1.0.1",
-    "postcss":             "^5.0.10",
-    "globby":              "^3.0.1"
+    "postcss-simple-vars": "^1.1.0",
+    "postcss-js":          "^0.1.0",
+    "postcss":             "^5.0.12",
+    "globby":              "^4.0.0"
   },
   "devDependencies": {
-    "gulp-eslint": "1.0.0",
-    "gulp-mocha":  "2.1.3",
-    "mocha":       "2.3.3",
-    "chai":        "3.4.0",
-    "gulp":        "3.9.0"
+    "eslint": "^1.10.3",
+    "ava":    "^0.7.0"
   },
   "scripts": {
-    "test": "gulp"
+    "test": "ava && eslint *.js test/**/*.js"
   }
 }

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

2

decreased by-60%

Worsened metrics

Total package byte prevSize

18952

decreased by-1.47%

Dependency count

4

increased by33.33%

Lines of code

150

decreased by-10.71%

Dependency changes

• + Addedpostcss-js@^0.1.0

• + Addedcamelcase-css@1.0.1(transitive)

• + Addedglob@6.0.4(transitive)

• + Addedglobby@4.1.0(transitive)

• + Addedpinkie@2.0.4(transitive)

• + Addedpinkie-promise@2.0.1(transitive)

• + Addedpostcss-js@0.1.3(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedglobby@3.0.1(transitive)

• - Removedpinkie@1.0.0(transitive)

• - Removedpinkie-promise@1.0.0(transitive)

• Updatedglobby@^4.0.0

• Updatedpostcss@^5.0.12

• Updatedpostcss-simple-vars@^1.1.0