postcss-apply
Advanced tools
Comparing version 0.5.0 to 0.6.0
@@ -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 |
@@ -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 @@ |
@@ -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 |
{ | ||
"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", |
@@ -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 @@ |
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
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
13432
146
145
19
Updatedpostcss@^5.2.15