Convert processLitCSSPlugin to ESM everywhere + use the new module in Storybook + cleanup old CommonJS custom properties

Author: iOvergaard

.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'],
@@ -13,6 +11,9 @@ module.exports = {
   async viteFinal(config, { configType }) {
     // customize the Vite config here
 
+    const processLitCSSPlugin = (
+      await import('../scripts/processLitCSSPlugin.mjs')
+    ).default;
     config.plugins.push(processLitCSSPlugin());
 
     if (configType === 'DEVELOPMENT') {

packages/rollup-package.config.js

@@ -5,7 +5,7 @@ import { readPackageJson } from '../scripts/modify-pkgjson.mjs';
 import rollupPostcss from 'rollup-plugin-postcss';
 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

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',

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

@@ -8,7 +8,7 @@ const customPropertiesRegExp = /(^|[^\w-])var\([\W\w]+\)/; // var\([\W\w]+,[\W\w
 
 const isTransformableDecl = decl => customPropertiesRegExp.test(decl.value);
 
-import { nodeToString } from 'postcss-values-parser'; // eslint-disable-next-line no-empty-pattern
+import * as postcssValuesParser from 'postcss-values-parser'; // eslint-disable-next-line no-empty-pattern
 
 export default opts => ({
   postcssPlugin: 'postcss-custom-properties-fallback',
@@ -53,7 +53,9 @@ export default opts => ({
                 {
                   type: 'word',
                   value: fallback
-                    .map(fallbackNode => nodeToString(fallbackNode))
+                    .map(fallbackNode =>
+                      postcssValuesParser.nodeToString(fallbackNode)
+                    )
                     .join(' '),
                 }
               );

scripts/rollup.processLitCSSPlugin.mjs renamed to 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/plugin.mjs';
-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'],