postcss-apply - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

CHANGELOG.md

@@ -11,6 +11,11 @@ # postcss-apply change Log
 
+## [0.6.0] - 2017-03-08
+### Added
+  * A new `sets` option.
+    Allows for in JS declared property sets.
+
 ## [0.5.0] - 2017-02-05
 ### Added
   * A new `preserve` option.
-    Allow for keeping resolved declarations and `@apply` rules alongside.
+    Allows for keeping resolved declarations and `@apply` rules alongside.
 
@@ -40,3 +45,4 @@ ## [0.4.0] - 2016-09-13
 
-[Unreleased]: https://github.com/pascalduez/postcss-apply/compare/0.5.0...HEAD
+[Unreleased]: https://github.com/pascalduez/postcss-apply/compare/0.6.0...HEAD
+[0.6.0]: https://github.com/pascalduez/postcss-apply/compare/0.5.0...0.6.0
 [0.5.0]: https://github.com/pascalduez/postcss-apply/compare/0.4.0...0.5.0
@@ -43,0 +49,0 @@ [0.4.0]: https://github.com/pascalduez/postcss-apply/compare/0.3.0...0.4.0

dist/index.js

@@ -15,7 +15,9 @@ 'use strict';
 
-exports.default = (0, _postcss.plugin)('postcss-apply', function () {
+exports.default = (0, _postcss.plugin)('postcss-apply', function (options) {
   return function (css, result) {
-    var visitor = new _visitor2.default();
+    var visitor = new _visitor2.default(options);
     visitor.result = result;
 
+    visitor.prepend();
+
     css.walkRules(visitor.collect);
@@ -22,0 +24,0 @@

dist/visitor.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 var _balancedMatch = require('balanced-match');
@@ -12,2 +16,6 @@
 
+var _postcss = require('postcss');
+
+var _postcss2 = _interopRequireDefault(_postcss);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,3 +27,3 @@
 
-var Visitor = function Visitor() {
+var Visitor = function Visitor(options) {
   var _this = this;
@@ -27,4 +35,32 @@
   this.result = {};
+  this.options = {};
+  this.defaults = {
+    preserve: false,
+    sets: {}
+  };
 
+  this.prepend = function () {
+    var sets = _this.options.sets;
+
+    // $FlowFixMe
+    Object.keys(sets).forEach(function (setName) {
+      var newRule = _postcss2.default.rule({ selector: `--${setName}` });
+
+      // $FlowFixMe
+      Object.entries(sets[setName]).forEach(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            prop = _ref2[0],
+            value = _ref2[1];
+
+        newRule.prepend(_postcss2.default.decl({ prop, value }));
+      });
+
+      _this.cache[setName] = newRule;
+    });
+  };
+
   this.collect = function (rule) {
+
+    console.log(_this.cache);
+
     var matches = RE_PROP_SET.exec(rule.selector);
@@ -40,4 +76,8 @@
     if (parent.selector !== ':root') {
-      rule.warn(_this.result, 'Custom property set ignored: not scoped to top-level `:root` ' + ('(--' + setName) + ((parent.type === 'rule' ? ' declared in ' + parent.selector : '') + ')'));
+      rule.warn(_this.result, 'Custom property set ignored: not scoped to top-level `:root` ' + `(--${setName}` + `${parent.type === 'rule' ? ` declared in ${parent.selector}` : ''})`);
 
+      if (parent.type === 'root') {
+        rule.remove();
+      }
+
       return;
@@ -49,5 +89,8 @@ }
     // @see: https://tabatkins.github.io/specs/css-apply-rule/#defining
-    _this.cache[setName] = rule;
+    var newRule = rule.clone();
+    _this.cache[setName] = newRule;
 
-    rule.remove();
+    if (!_this.options.preserve) {
+      rule.remove();
+    }
 
@@ -61,3 +104,6 @@ if (!parent.nodes.length) {
     Object.keys(_this.cache).forEach(function (rule) {
-      return _this.cache[rule].walkAtRules('apply', _this.resolve);
+      _this.cache[rule].walkAtRules('apply', function (atRule) {
+        _this.resolve(atRule);
+        atRule.remove();
+      });
     });
@@ -67,2 +113,13 @@ };
   this.resolve = function (atRule) {
+    if (atRule.parent.type !== 'rule') {
+      atRule.warn(_this.result, 'The @apply rule can only be declared inside Rule type nodes.');
+
+      atRule.remove();
+      return;
+    }
+
+    if (isDefinition(atRule.parent)) {
+      return;
+    }
+
     var param = getParamValue(atRule.params);
@@ -76,9 +133,20 @@ var matches = RE_PROP_SET.exec(param);
     var setName = matches[2];
+    var parent = atRule.parent;
 
-    if (setName in _this.cache) {
-      atRule.replaceWith(_this.cache[setName].nodes);
-    } else {
-      atRule.warn(_this.result, 'No custom property set declared for `' + setName + '`.');
+    if (!(setName in _this.cache)) {
+      atRule.warn(_this.result, `No custom property set declared for \`${setName}\`.`);
+
+      return;
     }
+
+    if (_this.options.preserve) {
+      parent.insertBefore(atRule, _this.cache[setName].nodes);
+
+      return;
+    }
+
+    atRule.replaceWith(_this.cache[setName].nodes);
   };
+
+  this.options = _extends({}, this.defaults, options);
 }
@@ -88,3 +156,2 @@
  * Collect all `:root` declared property sets and save them.
- * @param {Node} rule
  */
@@ -100,3 +167,2 @@
  * Replace `@apply` at-rules declarations with provided custom property set.
- * @param {Node} atRule
  */
@@ -106,6 +172,3 @@ ;
 /**
- * Helper: allow parens usage in `@apply` rule declaration.
- * This is for Polymer integration.
- * @param {String} param
- * @return {String}
+ * Helper: return whether the rule is a custom property set definition.
  */
@@ -115,2 +178,10 @@
 exports.default = Visitor;
+function isDefinition(rule) {
+  return !!rule.selector && RE_PROP_SET.exec(rule.selector) && rule.parent && !!rule.parent.selector && rule.parent.selector === ':root';
+}
+
+/**
+ * Helper: allow parens usage in `@apply` rule declaration.
+ * This is for Polymer integration.
+ */
 function getParamValue(param) {
@@ -117,0 +188,0 @@ return (/^\(/.test(param) ? (0, _balancedMatch2.default)('(', ')', param).body : param

package.json

 {
   "name": "postcss-apply",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "PostCSS plugin enabling custom properties sets references",
@@ -30,5 +30,6 @@ "keywords": [
   "scripts": {
-    "lint": "eslint ./src",
-    "test": "jest",
-    "watch:test": "jest --watch"
+    "lint": "eslint ./src ./test",
+    "typecheck": "flow check ./src",
+    "typecheck:coverage": "flow-coverage-report -t text -t html -i './src/*.js'",
+    "test": "jest"
   },
@@ -43,14 +44,21 @@ "jest": {
     "balanced-match": "^0.4.2",
-    "postcss": "^5.2.11"
+    "postcss": "^5.2.15"
   },
   "devDependencies": {
-    "babel-cli": "^6.22.2",
+    "babel-cli": "^6.23.0",
     "babel-eslint": "^7.1.1",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-stage-0": "^6.22.0",
-    "coveralls": "^2.11.15",
-    "eslint": "^3.15.0",
-    "eslint-config-airbnb-base": "^11.0.1",
+    "babel-plugin-transform-class-properties": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-env": "^1.2.1",
+    "babel-preset-flow": "^6.23.0",
+    "common-tags": "^1.4.0",
+    "coveralls": "^2.12.0",
+    "eslint": "^3.17.1",
+    "eslint-config-airbnb-base": "^11.1.1",
+    "eslint-plugin-flowtype": "^2.30.2",
     "eslint-plugin-import": "^2.2.0",
-    "jest-cli": "^18.1.0",
+    "eslint-plugin-jest": "^19.0.1",
+    "flow-bin": "^0.41.0",
+    "flow-coverage-report": "^0.3.0",
+    "jest-cli": "^19.0.2",
     "opn-cli": "^3.0.1",
@@ -57,0 +65,0 @@ "postcss-custom-properties": "^5.0.2",

README.md

@@ -13,3 +13,3 @@ # postcss-apply
 Browser support: https://www.chromestatus.com/feature/5753701012602880  
-Refers to [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties#postcss-custom-properties-) for DOMless limitations, although being future proof and spec compliant is the plugin primary goal.
+Refers to [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties#postcss-custom-properties-) for DOMless limitations.
 
@@ -27,7 +27,7 @@
 ```js
-var fs = require('fs');
-var postcss = require('postcss');
-var apply = require('postcss-apply');
+const fs = require('fs');
+const postcss = require('postcss');
+const apply = require('postcss-apply');
 
-var input = fs.readFileSync('input.css', 'utf8');
+const input = fs.readFileSync('input.css', 'utf8');
 
@@ -37,3 +37,3 @@ postcss()
   .process(input)
-  .then(function (result) {
+  .then((result) => {
     fs.writeFileSync('output.css', result.css);
@@ -45,4 +45,7 @@ });
 
-input:
+### In CSS declared sets
+
 ```css
+/* input */
+
 :root {
@@ -54,5 +57,2 @@ --toolbar-theme: {
   };
-  --toolbar-title-theme: {
-    color: green;
-  };
 }
@@ -63,10 +63,7 @@
 }
-
-.Toolbar-title {
-  @apply --toolbar-title-theme;
-}
 ```
 
-output:
 ```css
+/* output */
+
 .Toolbar {
@@ -77,8 +74,40 @@ background-color: rebeccapurple;
 }
+```
 
-.Toolbar-title {
-  color: green;
+### In JS declared sets
+
+```js
+const themes = {
+  /* Set names won't be transformed, just `--` will be prepended. */
+  'toolbar-theme': {
+    /* Declaration properties can either be camel or kebab case. */
+    backgroundColor: 'rebeccapurple',
+    color: 'white',
+    border: '1px solid green',
+  },
+};
+
+[...]
+postcss().use(apply({ sets: themes }))
+[...]
+```
+
+```css
+/* input */
+
+.Toolbar {
+  @apply --toolbar-theme;
 }
 ```
 
+```css
+/* output */
+
+.Toolbar {
+  background-color: rebeccapurple;
+  color: white;
+  border: 1px solid green;
+}
+```
+
 ## options
@@ -89,5 +118,12 @@
 default: `false`  
-Allow for keeping resolved declarations and `@apply` rules alongside.
+Allows for keeping resolved declarations and `@apply` rules alongside.
 
+### `sets`  
+type: `Object`  
+default: `{}`  
+Allows you to pass an object of custom property sets for `:root`.
+These definitions will be prepended, in such overriden by the one declared in CSS if they share the same name.
+The keys are automatically prefixed with the CSS `--` to make it easier to share sets in your codebase.
 
+
 ## Credits
@@ -94,0 +130,0 @@

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

13432

increased by38.9%

Lines of code

146

increased by56.99%

Number of lines in readme file

145

increased by33.03%

Worsened metrics

Dev dependency count

19

increased by58.33%

Dependency changes

• Updatedpostcss@^5.2.15