uui-css: make sure to create CommonJS script with .cjs ending and change imports accordingly

Author: iOvergaard

.gitignore

@@ -27,8 +27,7 @@ tsconfig.tsbuildinfo
 
 
 custom-elements.json
-/packages/uui-css/custom-properties.js
-/packages/uui-css/custom-properties.module.js
+/packages/uui-css/custom-properties.*
 storybook-static
 debug.log
 out-css

.storybook/main.js

@@ -27,6 +27,7 @@ module.exports = {
       config.optimizeDeps.include.push('lit/directives/style-map.js');
       config.optimizeDeps.include.push('lit/directives/if-defined.js');
       config.optimizeDeps.include.push('lit/directives/unsafe-html.js');
+      config.optimizeDeps.include.push('element-internals-polyfill');
     }
 
     return config;

packages/uui-css/scripts/cache-custom-properties.mjs

@@ -1,6 +1,6 @@
-import postcss from 'postcss';
 import * as fs from 'fs/promises';
 import path from 'path';
+import postcss from 'postcss';
 import postcssCustomProperties from 'postcss-custom-properties';
 import * as postCssValueParser from 'postcss-values-parser';
 
@@ -37,7 +37,7 @@ export const CacheCustomProperties = async masterCSSPath => {
 
     try {
       await fs.writeFile(
-        './custom-properties.js',
+        './custom-properties.cjs',
         `module.exports = ${json};`,
         'utf8'
       );

scripts/vite.processLitCSSPlugin.js

@@ -11,7 +11,7 @@ const postcssConfig = require('postcss-load-config');
 
 // @ts-ignore-start
 // eslint-disable-next-line -- // @typescript-eslint/ban-ts-comment // @ts-ignore
-const customProperties = require('../packages/uui-css/custom-properties.js'); // eslint-disable-line
+const customProperties = require('../packages/uui-css/custom-properties.cjs'); // eslint-disable-line
 // @ts-ignore-end
 
 const options = {