copying files into project

Author: nielslyngsoe

package-lock.json

@@ -91,7 +91,6 @@
     "postcss-cli": "9.0.1",
     "postcss-color-function": "4.1.0",
     "postcss-custom-properties": "12.0.0",
-    "postcss-custom-properties-fallback": "1.0.1",
     "postcss-jsx": "0.36.4",
     "postcss-load-config": "3.1.0",
     "postcss-url": "^10.1.3",

package.json

@@ -0,0 +1,108 @@
+const fs = require('fs');
+
+const path = require('path');
+
+const postcss = require('postcss');
+
+const {
+  parse
+} = require('postcss-values-parser');
+
+async function getCustomPropertiesFromCSSFile(from) {
+  const css = await readFile(from); // eslint-disable-next-line no-unused-vars
+
+  postcss.parse(css, {
+    from
+  });
+  throw new Error('Importing from CSS files not supported yet'); //return getCustomPropertiesFromRoot(root, { preserve: true });
+}
+/* Get Custom Properties from Object
+/* ========================================================================== */
+
+
+function getCustomPropertiesFromObject(object) {
+  const customProperties = Object.assign({}, Object(object).customProperties, Object(object)['custom-properties']);
+
+  for (const key in customProperties) {
+    customProperties[key] = parse(String(customProperties[key])).nodes;
+  }
+
+  return customProperties;
+}
+/* Get Custom Properties from JSON file
+/* ========================================================================== */
+
+
+async function getCustomPropertiesFromJSONFile(from) {
+  const object = await readJSON(from);
+  return getCustomPropertiesFromObject(object);
+}
+/* Get Custom Properties from JS file
+/* ========================================================================== */
+
+
+async function getCustomPropertiesFromJSFile(from) {
+  const object = require(from);
+
+  return getCustomPropertiesFromObject(object);
+}
+
+module.exports = function getCustomPropertiesFromImports(sources) {
+  return sources.map(source => {
+    if (source instanceof Promise) {
+      return source;
+    } else if (source instanceof Function) {
+      return source();
+    } // read the source as an object
+
+
+    const opts = source === Object(source) ? source : {
+      from: String(source)
+    }; // skip objects with Custom Properties
+
+    if (opts.customProperties || opts['custom-properties']) {
+      return opts;
+    } // source pathname
+
+
+    const from = path.resolve(String(opts.from || '')); // type of file being read from
+
+    const type = (opts.type || path.extname(from).slice(1)).toLowerCase();
+    return {
+      type,
+      from
+    };
+  }).reduce(async (customProperties, source) => {
+    const {
+      type,
+      from
+    } = await source;
+
+    if (type === 'css') {
+      return Object.assign(await customProperties, await getCustomPropertiesFromCSSFile(from));
+    }
+
+    if (type === 'js') {
+      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 getCustomPropertiesFromObject(await source));
+  }, {});
+};
+
+const readFile = from => new Promise((resolve, reject) => {
+  fs.readFile(from, 'utf8', (error, result) => {
+    if (error) {
+      reject(error);
+    } else {
+      resolve(result);
+    }
+  });
+});
+
+const readJSON = async from => JSON.parse(await readFile(from));
+//# sourceMappingURL=import-from.js.map

scripts/postcss-custom-properties-fallback/import-from.cjs

@@ -0,0 +1,67 @@
+const getCustomPropertiesFromImports = require('./import-from.cjs');
+
+const valueParser = require('postcss-value-parser'); // match custom property inclusions
+// @TODO optimize to skip vars with fallbacks already
+
+
+const customPropertiesRegExp = /(^|[^\w-])var\([\W\w]+\)/; // var\([\W\w]+,[\W\w]+\) template for detecting if skippable?
+// whether the declaration should be potentially transformed
+
+const isTransformableDecl = decl => customPropertiesRegExp.test(decl.value);
+
+const {
+  nodeToString
+} = require('postcss-values-parser'); // eslint-disable-next-line no-empty-pattern
+
+
+module.exports = opts => ({
+  postcssPlugin: 'postcss-custom-properties-fallback',
+
+  prepare() {
+    // sources to import custom selectors from
+    const importFrom = [].concat(Object(opts).importFrom || []); // promise any custom selectors are imported
+
+    const customPropertiesPromise = getCustomPropertiesFromImports(importFrom);
+    return {
+      async Declaration(node) {
+        if (isTransformableDecl(node)) {
+          const customProperties = await customPropertiesPromise;
+          const parsed = valueParser(node.value);
+          parsed.walk(node => {
+            // Only deal with vars without a fallback
+            if (node.type !== 'function' || node.nodes.length !== 1) {
+              return;
+            }
+
+            const fallback = customProperties[node.nodes[0].value];
+
+            if (fallback && fallback.length === 1) {
+              node.nodes.push({
+                type: 'divider',
+                value: ','
+              }, {
+                type: 'word',
+                value: fallback
+              });
+            } //when fallback value contains more then one node, stringify them with value parser used to parse the customProperties object and add as one node type word.
+
+
+            if (fallback && fallback.length > 1) {
+              node.nodes.push({
+                type: 'divider',
+                value: ','
+              }, {
+                type: 'word',
+                value: fallback.map(fallbackNode => nodeToString(fallbackNode)).join(' ')
+              });
+            }
+          });
+          node.value = parsed.toString();
+        }
+      }
+
+    };
+  }
+
+});
+//# sourceMappingURL=plugin.js.map

scripts/postcss-custom-properties-fallback/import-from.cjs.map

@@ -1,6 +1,6 @@
 import postcss from 'postcss';
 import syntax from 'postcss-jsx';
-import postcssCustomPropertiesFallback from 'postcss-custom-properties-fallback';
+import postcssCustomPropertiesFallback from './postcss-custom-properties-fallback/plugin.cjs';
 import { createFilter } from '@rollup/pluginutils';
 import postcssConfig from 'postcss-load-config';
 

scripts/postcss-custom-properties-fallback/plugin.cjs

@@ -6,7 +6,7 @@ TODO: Find solution to use same code in CommonJS and ESM.
 const createFilter = require('@rollup/pluginutils').createFilter;
 const postcss = require('postcss');
 const syntax = require('postcss-jsx');
-const postcssCustomPropertiesFallback = require('postcss-custom-properties-fallback');
+const postcssCustomPropertiesFallback = require('./postcss-custom-properties-fallback/plugin.cjs');
 const postcssConfig = require('postcss-load-config');
 
 // @ts-ignore-start