Merge pull request #144 from umbraco/bugfix/replace-postcss-custom-properties-fallback-with-local-version

nielslyngsoe · web-flow · commit f66ef73600d3 · 2022-02-25T13:47:25.000+01:00
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,4 @@
 const tsconfigPaths = require('vite-tsconfig-paths').default;
-const processLitCSSPlugin =
-  require('../scripts/vite.processLitCSSPlugin').default;
 
 module.exports = {
   stories: ['../packages/**/*.story.ts'],
@@ -10,9 +8,14 @@ module.exports = {
     '@storybook/addon-a11y',
   ],
   core: { builder: 'storybook-builder-vite' },
+  staticDirs: ['./images'],
+
   async viteFinal(config, { configType }) {
     // customize the Vite config here
 
+    const processLitCSSPlugin = (
+      await import('../scripts/processLitCSSPlugin.mjs')
+    ).default;
     config.plugins.push(processLitCSSPlugin());
 
     if (configType === 'DEVELOPMENT') {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,8 +25,8 @@
     "format:prettier": "prettier \"**/*.js\" \"**/*.ts\" \"**/*.mjs\"  --write --ignore-path .gitignore",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "format": "npm run format:eslint && npm run format:prettier",
-    "storybook": "npm run bootstrap && npm run storybook:analyze && start-storybook -p 6006 -s ./.storybook/images",
-    "storybook:build": "npm run bootstrap && npm run storybook:analyze && build-storybook -s ./.storybook/images",
+    "storybook": "npm run bootstrap && npm run storybook:analyze && start-storybook -p 6006",
+    "storybook:build": "npm run bootstrap && npm run storybook:analyze && build-storybook",
     "storybook:analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
@@ -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",
diff --git a/packages/rollup-package.config.js b/packages/rollup-package.config.js
@@ -3,9 +3,9 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
 import minifyHTML from 'rollup-plugin-minify-html-literals';
 import { readPackageJson } from '../scripts/modify-pkgjson.mjs';
 import rollupPostcss from 'rollup-plugin-postcss';
-import postcssCustomPropertiesFallback from 'postcss-custom-properties-fallback';
+import postcssCustomPropertiesFallback from '../scripts/postcss-custom-properties-fallback/plugin.mjs';
 import path from 'path';
-import processLitCSSPlugin from '../scripts/rollup.processLitCSSPlugin.mjs';
+import processLitCSSPlugin from '../scripts/processLitCSSPlugin.mjs';
 import importCss from 'rollup-plugin-import-css';
 
 // @ts-ignore-start
diff --git a/packages/uui-box/lib/uui-box.element.ts b/packages/uui-box/lib/uui-box.element.ts
@@ -15,8 +15,7 @@ export class UUIBoxElement extends LitElement {
     css`
       :host {
         display: block;
-        /* TODO: fix automatic fallback values for shadows shadows.*/
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        box-shadow: var(--uui-shadow-depth-1);
         border-radius: var(--uui-border-radius);
         background-color: var(--uui-interface-surface);
       }
diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts
@@ -27,8 +27,7 @@ export class UUICardElement extends SelectOnlyMixin(
         width: 100%;
         justify-content: center;
         box-sizing: border-box;
-        /* TODO: fix automatic fallback values for shadows before we use them: var(--uui-shadow-depth-1)*/
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        box-shadow: var(--uui-shadow-depth-1);
         border-radius: var(--uui-border-radius);
         min-height: var(--uui-layout-medium);
         background-color: var(--uui-interface-surface);
diff --git a/packages/uui-css/scripts/cache-custom-properties.mjs b/packages/uui-css/scripts/cache-custom-properties.mjs
@@ -35,17 +35,6 @@ export const CacheCustomProperties = async masterCSSPath => {
 
     let json = JSON.stringify(fileData);
 
-    try {
-      await fs.writeFile(
-        './custom-properties.cjs',
-        `module.exports = ${json};`,
-        'utf8'
-      );
-    } catch (err) {
-      console.error(err);
-    }
-
-    // Second file for ESM, TODO: fix so we can use the same file in both cases.
     try {
       await fs.writeFile(
         './custom-properties.module.js',
diff --git a/packages/uui-dialog/lib/uui-dialog.element.ts b/packages/uui-dialog/lib/uui-dialog.element.ts
@@ -20,12 +20,7 @@ export class UUIDialogElement extends LitElement {
           var(--uui-interface-surface)
         );
 
-        /* TODO: fix automatic fallback values for shadows shadows. var(--uui-shadow-depth-5) */
-        box-shadow: var(
-          --uui-dialog-box-shadow,
-          0 19px 38px rgba(0, 0, 0, 0.3),
-          0 15px 12px rgba(0, 0, 0, 0.22)
-        );
+        box-shadow: var(--uui-shadow-depth-5);
         border-radius: var(
           --uui-dialog-border-radius,
           calc(var(--uui-border-radius) * 2)
diff --git a/packages/uui-toast-notification/lib/uui-toast-notification.element.ts b/packages/uui-toast-notification/lib/uui-toast-notification.element.ts
@@ -67,7 +67,7 @@ export class UUIToastNotificationElement extends LitElement {
         display: block;
 
         box-sizing: border-box;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.21);
+        box-shadow: var(--uui-shadow-depth-1);
         background-color: var(--uui-interface-surface);
         padding: var(--uui-size-layout-1);
         padding-right: var(--uui-size-layout-1);
diff --git a/scripts/postcss-custom-properties-fallback/import-from.mjs b/scripts/postcss-custom-properties-fallback/import-from.mjs
@@ -0,0 +1,117 @@
+import fs from 'fs';
+import path from 'path';
+import * as postcss from 'postcss';
+import { parse } from '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 = await import(from);
+
+  return getCustomPropertiesFromObject(object);
+}
+
+export default 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
diff --git a/scripts/postcss-custom-properties-fallback/plugin.mjs b/scripts/postcss-custom-properties-fallback/plugin.mjs
@@ -0,0 +1,71 @@
+import getCustomPropertiesFromImports from './import-from.mjs';
+
+import valueParser from '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);
+
+import postcssValuesParser from 'postcss-values-parser'; // eslint-disable-line
+
+export default 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 =>
+                        postcssValuesParser.nodeToString(fallbackNode) // eslint-disable-line
+                    )
+                    .join(' '),
+                }
+              );
+            }
+          });
+          node.value = parsed.toString();
+        }
+      },
+    };
+  },
+});
+//# sourceMappingURL=plugin.js.map
diff --git a/scripts/processLitCSSPlugin.mjs b/scripts/processLitCSSPlugin.mjs
@@ -1,13 +1,10 @@
+import { createFilter } from '@rollup/pluginutils';
 import postcss from 'postcss';
 import syntax from 'postcss-jsx';
-import postcssCustomPropertiesFallback from 'postcss-custom-properties-fallback';
-import { createFilter } from '@rollup/pluginutils';
 import postcssConfig from 'postcss-load-config';
 
-// @ts-ignore-start
-// eslint-disable-next-line -- // @typescript-eslint/ban-ts-comment // @ts-ignore
-import customProperties from '../packages/uui-css/custom-properties.module'; // eslint-disable-line
-// @ts-ignore-end
+import customProperties from '../packages/uui-css/custom-properties.module.js';
+import postcssCustomPropertiesFallback from './postcss-custom-properties-fallback/plugin.mjs';
 
 const options = {
   include: ['**/index.ts', '**/uui-*.ts', '**/*Mixin.ts', '**/*.styles.ts'],
diff --git a/scripts/vite.processLitCSSPlugin.js b/scripts/vite.processLitCSSPlugin.js
