postcss-custom-properties - npm Package Compare versions

Comparing version 9.1.1 to 9.2.0

CHANGELOG.md

 # Changes to PostCSS Custom Properties
 
+### 9.2.0 (September 18, 2020)
+
+- Added: Export variables to SCSS file ([#212](https://github.com/postcss/postcss-custom-properties/pull/212))
+- Added: Support for ".pcss" file resolution in `importFrom` ([#211](https://github.com/postcss/postcss-custom-properties/pull/211))
+- Fixed: Allow combined selectors ([#199](https://github.com/postcss/postcss-custom-properties/pull/199))
+- Fixed: Bug with spaces and commas in value ([#222](https://github.com/postcss/postcss-custom-properties/pull/222))
+- Fixed: `importFrom` priority ([#222](https://github.com/postcss/postcss-custom-properties/pull/222))
+
 ### 9.1.1 (February 20, 2020)
@@ -4,0 +12,0 @@

index.cjs.js

@@ -68,3 +68,3 @@ 'use strict';
 
-  return Object.assign({}, customPropertiesFromHtmlElement, {}, customPropertiesFromRootPseudo);
+  return Object.assign({}, customPropertiesFromHtmlElement, customPropertiesFromRootPseudo);
 } // match html and :root rules
@@ -76,5 +76,5 @@
 
-const isHtmlRule = node => node.type === 'rule' && htmlSelectorRegExp.test(node.selector) && Object(node.nodes).length;
+const isHtmlRule = node => node.type === 'rule' && node.selector.split(',').some(item => htmlSelectorRegExp.test(item)) && Object(node.nodes).length;
 
-const isRootRule = node => node.type === 'rule' && rootSelectorRegExp.test(node.selector) && Object(node.nodes).length; // whether the node is an custom property
+const isRootRule = node => node.type === 'rule' && node.selector.split(',').some(item => rootSelectorRegExp.test(item)) && Object(node.nodes).length; // whether the node is an custom property
 
@@ -163,15 +163,15 @@
 
-    if (type === 'css') {
-      return Object.assign((await customProperties), (await getCustomPropertiesFromCSSFile(from)));
+    if (type === 'css' || type === 'pcss') {
+      return Object.assign(await customProperties, await getCustomPropertiesFromCSSFile(from));
     }
 
     if (type === 'js') {
-      return Object.assign((await customProperties), (await getCustomPropertiesFromJSFile(from)));
+      return Object.assign(await customProperties, await getCustomPropertiesFromJSFile(from));
     }
 
     if (type === 'json') {
-      return Object.assign((await customProperties), (await getCustomPropertiesFromJSONFile(from)));
+      return Object.assign(await customProperties, await getCustomPropertiesFromJSONFile(from));
     }
 
-    return Object.assign((await customProperties), (await getCustomPropertiesFromObject((await source))));
+    return Object.assign(await customProperties, await getCustomPropertiesFromObject(await source));
   }, {});
@@ -192,3 +192,3 @@ }
 
-const readJSON = async from => JSON.parse((await readFile(from)));
+const readJSON = async from => JSON.parse(await readFile(from));
 
@@ -208,3 +208,14 @@ function transformValueAST(root, customProperties) {
           const nodes = asClonedArrayWithBeforeSpacing(customProperties[name], child.raws.before);
+          /**
+           * https://github.com/postcss/postcss-custom-properties/issues/221
+           * https://github.com/postcss/postcss-custom-properties/issues/218
+           *
+           * replaceWith loses node.raws values, so we need to save it and restore
+           */
+
+          const raws = nodes.map(node => Object.assign({}, node.raws));
           child.replaceWith(...nodes);
+          nodes.forEach((node, index) => {
+            node.raws = raws[index];
+          });
           retransformValueAST({
@@ -327,2 +338,15 @@ nodes
 }
+/* Write Custom Properties to SCSS File
+/* ========================================================================== */
+
+
+async function writeCustomPropertiesToScssFile(to, customProperties) {
+  const scssContent = Object.keys(customProperties).reduce((scssLines, name) => {
+    const scssName = name.replace('--', '$');
+    scssLines.push(`${scssName}: ${customProperties[name]};`);
+    return scssLines;
+  }, []).join('\n');
+  const scss = `${scssContent}\n`;
+  await writeFile(to, scss);
+}
 /* Write Custom Properties to JSON file
@@ -397,2 +421,6 @@ /* ========================================================================== */
 
+        if (type === 'scss') {
+          await writeCustomPropertiesToScssFile(to, customPropertiesJSON);
+        }
+
         if (type === 'js') {
@@ -459,5 +487,5 @@ await writeCustomPropertiesToCjsFile(to, customPropertiesJSON);
   const asyncTransform = async root => {
-    const customProperties = Object.assign({}, (await customPropertiesPromise), getCustomPropertiesFromRoot(root, {
+    const customProperties = Object.assign({}, getCustomPropertiesFromRoot(root, {
       preserve
-    }));
+    }), await customPropertiesPromise);
     await writeCustomPropertiesToExports(customProperties, exportTo);
@@ -464,0 +492,0 @@ transformProperties(root, customProperties, {

package.json

 {
   "name": "postcss-custom-properties",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "description": "Use Custom Properties Queries in CSS",
@@ -5,0 +5,0 @@ "author": "Jonathan Neal <[e-mail]>",

README.md

@@ -11,2 +11,4 @@ # PostCSS Custom Properties [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
 
+[!['Can I use' table](https://caniuse.bitsofco.de/image/css-variables.png)](https://caniuse.com/#feat=css-variables)
+
 ```pcss
@@ -33,2 +35,4 @@ :root {
 
+**Note:** This plugin only processes variables that are defined in the `:root` selector.
+
 ## Usage
@@ -172,2 +176,3 @@
     'and/then/that.json', // { "custom-properties": { "--color": "red" } }
+    'and/then/that.scss', // $color: red;
     cachedObject,
@@ -182,4 +187,4 @@ customProperties => {
 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).
+[JS](test/export-properties.js), [MJS](test/export-properties.mjs),
+[JSON](test/export-properties.json) and [SCSS](test/export-properties.scss).
 
@@ -186,0 +191,0 @@ [cli-img]: https://img.shields.io/travis/postcss/postcss-custom-properties/master.svg

No alert changes

Improved metrics

Total package byte prevSize

122666

increased by6.54%

Lines of code

756

increased by6.78%

Number of lines in readme file

199

increased by2.58%

No dependency changes