From d2636222c6ad7958692423438929264e3739bb92 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Mon, 17 Sep 2018 11:50:27 -0400 Subject: [PATCH] 8.0.1 --- .rollup.js | 4 ++-- .tape.js | 12 ++++++------ CHANGELOG.md | 4 ++++ README.md | 13 ++++++++++--- lib/transform-value-ast.js | 21 +++++++++++++++++++-- package.json | 6 ++++-- test/basic.css | 2 +- test/basic.expect.css | 6 +++--- test/basic.import.expect.css | 6 +++--- test/basic.preserve.expect.css | 4 ++-- test/export-properties.css | 2 +- test/export-properties.js | 2 +- test/export-properties.json | 2 +- test/export-properties.mjs | 2 +- test/import-properties.css | 2 +- test/import-properties.js | 2 +- test/import-properties.json | 2 +- 17 files changed, 61 insertions(+), 31 deletions(-) diff --git a/.rollup.js b/.rollup.js index eab5c0d..3f28a55 100644 --- a/.rollup.js +++ b/.rollup.js @@ -3,8 +3,8 @@ import babel from 'rollup-plugin-babel'; export default { input: 'index.js', output: [ - { file: 'index.cjs.js', format: 'cjs' }, - { file: 'index.es.mjs', format: 'es' } + { file: 'index.cjs.js', format: 'cjs', sourcemap: true }, + { file: 'index.es.mjs', format: 'es', sourcemap: true } ], plugins: [ babel({ diff --git a/.tape.js b/.tape.js index 5fc09cc..7dd62f6 100644 --- a/.tape.js +++ b/.tape.js @@ -14,7 +14,7 @@ module.exports = { options: { importFrom: { customProperties: { - '--color': 'red', + '--color': 'rgb(255, 0, 0)', '--color-2': 'yellow', '--ref-color': 'var(--color)' } @@ -27,7 +27,7 @@ module.exports = { importFrom() { return { customProperties: { - '--color': 'red', + '--color': 'rgb(255, 0, 0)', '--color-2': 'yellow', '--ref-color': 'var(--color)' } @@ -44,7 +44,7 @@ module.exports = { return new Promise(resolve => { resolve({ customProperties: { - '--color': 'red', + '--color': 'rgb(255, 0, 0)', '--color-2': 'yellow', '--ref-color': 'var(--color)' } @@ -105,7 +105,7 @@ module.exports = { expect: 'basic.expect.css', result: 'basic.result.css', after() { - if (__exportPropertiesObject.customProperties['--color'] !== 'red') { + if (__exportPropertiesObject.customProperties['--color'] !== 'rgb(255, 0, 0)') { throw new Error('The exportTo function failed'); } } @@ -114,7 +114,7 @@ module.exports = { message: 'supports { exportTo() } usage', options: { exportTo(customProperties) { - if (customProperties['--color'] !== 'red') { + if (customProperties['--color'] !== 'rgb(255, 0, 0)') { throw new Error('The exportTo function failed'); } } @@ -127,7 +127,7 @@ module.exports = { options: { exportTo(customProperties) { return new Promise((resolve, reject) => { - if (customProperties['--color'] !== 'red') { + if (customProperties['--color'] !== 'rgb(255, 0, 0)') { reject('The exportTo function failed'); } else { resolve(); diff --git a/CHANGELOG.md b/CHANGELOG.md index b5d079d..adc6513 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Custom Properties +### 8.0.1 (September 17, 2018) + +- Fixed: Workaround issue in `postcss-values-parser` incorrectly cloning nodes. + ### 8.0.0 (September 16, 2018) - Added: New `exportTo` function to specify where to export custom properties to. diff --git a/README.md b/README.md index 33c9038..1a0f7b2 100755 --- a/README.md +++ b/README.md @@ -123,9 +123,9 @@ will need to namespace Custom Properties using the `customProperties` or ```js postcssCustomProperties({ importFrom: [ - 'path/to/file.css', - 'and/then/this.js', - 'and/then/that.json', + 'path/to/file.css', // :root { --color: red; } + 'and/then/this.js', // module.exports = { customProperties: { '--color': 'red' } } + 'and/then/that.json', // { "custom-properties": { "--color": "red" } } { customProperties: { '--color': 'red' } }, @@ -138,6 +138,9 @@ postcssCustomProperties({ }); ``` +See example imports written in [CSS](test/import-properties.css), +[JS](test/import-properties.js), and [JSON](test/import-properties.json). + ### exportTo The `exportTo` option specifies destinations where Custom Properties can be exported @@ -172,6 +175,10 @@ postcssCustomProperties({ }); ``` +See example exports written to [CSS](test/export-properties.css), +[JS](test/export-properties.js), [MJS](test/export-properties.mjs), and +[JSON](test/export-properties.json). + [cli-img]: https://img.shields.io/travis/postcss/postcss-custom-properties.svg [cli-url]: https://travis-ci.org/postcss/postcss-custom-properties [css-img]: https://cssdb.org/badge/custom-properties.svg diff --git a/lib/transform-value-ast.js b/lib/transform-value-ast.js index f4897ef..a8db9fa 100644 --- a/lib/transform-value-ast.js +++ b/lib/transform-value-ast.js @@ -9,7 +9,7 @@ export default function transformValueAST(root, customProperties) { if (name in customProperties) { // conditionally replace a known custom property child.replaceWith( - ...asClonedArray(customProperties[name]) + ...asClonedArray(customProperties[name], null) ); const nextCustomProperties = Object.assign({}, customProperties); @@ -47,4 +47,21 @@ const varRegExp = /^var$/i; const isVarFunction = node => node.type === 'func' && varRegExp.test(node.value) && Object(node.nodes).length > 0; // return an array with its nodes cloned -const asClonedArray = array => array.map(node => node.clone()); +const asClonedArray = (array, parent) => array.map(node => asClonedNode(node, parent)); + +// return a cloned node +const asClonedNode = (node, parent) => { + const cloneNode = new node.constructor(node); + + for (const key in node) { + if (key === 'parent') { + cloneNode.parent = parent; + } else if (Object(node[key]).constructor === Array) { + cloneNode[key] = asClonedArray(node.nodes, cloneNode); + } else if (Object(node[key]).constructor === Object) { + cloneNode[key] = Object.assign({}, node[key]); + } + } + + return cloneNode; +} diff --git a/package.json b/package.json index d371873..dae5872 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "postcss-custom-properties", - "version": "8.0.0", + "version": "8.0.1", "description": "Use Custom Properties Queries in CSS", "author": "Jonathan Neal ", "contributors": [ @@ -14,7 +14,9 @@ "module": "index.es.mjs", "files": [ "index.cjs.js", - "index.es.mjs" + "index.cjs.js.map", + "index.es.mjs", + "index.es.mjs.map" ], "scripts": { "prepublishOnly": "npm test", diff --git a/test/basic.css b/test/basic.css index c6a4644..c99e71a 100644 --- a/test/basic.css +++ b/test/basic.css @@ -3,7 +3,7 @@ html { } :root { - --color: red; + --color: rgb(255, 0, 0); --ref-color: var(--color); --circular: var(--circular-2); --circular-2: var(--circular); diff --git a/test/basic.expect.css b/test/basic.expect.css index ed38897..0ffbdb1 100644 --- a/test/basic.expect.css +++ b/test/basic.expect.css @@ -3,7 +3,7 @@ html { } :root { - --color: red; + --color: rgb(255, 0, 0); --ref-color: var(--color); --circular: var(--circular-2); --circular-2: var(--circular); @@ -11,7 +11,7 @@ html { .test { --skip: gray; - color: red; + color: rgb(255, 0, 0); color: var(--color); } @@ -21,7 +21,7 @@ html { } .test--color_w_var { - color: red; + color: rgb(255, 0, 0); color: var(--ref-color); } diff --git a/test/basic.import.expect.css b/test/basic.import.expect.css index 4edc29d..d120fcf 100644 --- a/test/basic.import.expect.css +++ b/test/basic.import.expect.css @@ -3,7 +3,7 @@ html { } :root { - --color: red; + --color: rgb(255, 0, 0); --ref-color: var(--color); --circular: var(--circular-2); --circular-2: var(--circular); @@ -11,7 +11,7 @@ html { .test { --skip: gray; - color: red; + color: rgb(255, 0, 0); color: var(--color); } @@ -21,7 +21,7 @@ html { } .test--color_w_var { - color: red; + color: rgb(255, 0, 0); color: var(--ref-color); } diff --git a/test/basic.preserve.expect.css b/test/basic.preserve.expect.css index 16f3e38..e430ce1 100644 --- a/test/basic.preserve.expect.css +++ b/test/basic.preserve.expect.css @@ -1,6 +1,6 @@ .test { --skip: gray; - color: red; + color: rgb(255, 0, 0); } .test--fallback { @@ -8,7 +8,7 @@ } .test--color_w_var { - color: red; + color: rgb(255, 0, 0); } .test--circular_var { diff --git a/test/export-properties.css b/test/export-properties.css index 77bf4d8..40a1bf6 100644 --- a/test/export-properties.css +++ b/test/export-properties.css @@ -1,6 +1,6 @@ :root { --ref-color: var(--color); - --color: red; + --color: rgb(255, 0, 0); --circular: var(--circular-2); --circular-2: var(--circular); } diff --git a/test/export-properties.js b/test/export-properties.js index 8191eaa..63b9360 100644 --- a/test/export-properties.js +++ b/test/export-properties.js @@ -1,7 +1,7 @@ module.exports = { customProperties: { '--ref-color': 'var(--color)', - '--color': 'red', + '--color': 'rgb(255, 0, 0)', '--circular': 'var(--circular-2)', '--circular-2': 'var(--circular)' } diff --git a/test/export-properties.json b/test/export-properties.json index bc2721d..bf2dcd9 100644 --- a/test/export-properties.json +++ b/test/export-properties.json @@ -1,7 +1,7 @@ { "custom-properties": { "--ref-color": "var(--color)", - "--color": "red", + "--color": "rgb(255, 0, 0)", "--circular": "var(--circular-2)", "--circular-2": "var(--circular)" } diff --git a/test/export-properties.mjs b/test/export-properties.mjs index 0b53739..553762e 100644 --- a/test/export-properties.mjs +++ b/test/export-properties.mjs @@ -1,6 +1,6 @@ export const customProperties = { '--ref-color': 'var(--color)', - '--color': 'red', + '--color': 'rgb(255, 0, 0)', '--circular': 'var(--circular-2)', '--circular-2': 'var(--circular)' }; diff --git a/test/import-properties.css b/test/import-properties.css index 23b36d9..7a2b7ec 100644 --- a/test/import-properties.css +++ b/test/import-properties.css @@ -1,5 +1,5 @@ :root { - --color: red; + --color: rgb(255, 0, 0); --color-2: yellow; --ref-color: var(--color); } diff --git a/test/import-properties.js b/test/import-properties.js index 5b2b9bb..60e653c 100644 --- a/test/import-properties.js +++ b/test/import-properties.js @@ -1,6 +1,6 @@ module.exports = { customProperties: { - '--color': 'red', + '--color': 'rgb(255, 0, 0)', '--color-2': 'yellow', '--ref-color': 'var(--color)' } diff --git a/test/import-properties.json b/test/import-properties.json index 9527f11..3687057 100644 --- a/test/import-properties.json +++ b/test/import-properties.json @@ -1,6 +1,6 @@ { "custom-properties": { - "--color": "red", + "--color": "rgb(255, 0, 0)", "--color-2": "yellow", "--ref-color": "var(--color)" }