Fix global style by building component seperately

build-components.sh

@@ -0,0 +1,10 @@
+rm -rf components/* 
+
+GLOB="src/components/**/*.wc.svelte"
+COMPONENTS=`node src/utils/glob.mjs "$GLOB"`
+
+for COMPONENT in $COMPONENTS
+do
+  echo Building $COMPONENT
+  node src/utils/esbuild.mjs $COMPONENT
+done

package.json

@@ -10,7 +10,7 @@
     "build-storybook": "build-storybook",
     "new": "hygen component new",
     "lint": "eslint . --fix",
-    "build:components": "rm -rf dist/* && node src/utils/esbuild.mjs",
+    "build:components": "sh build-components.sh",
     "build:assets": "cp -rf src/assets assets && postcss assets/*.css --replace",
     "build": "npm run build:components && npm run build:assets"
   },

src/utils/esbuild.mjs

@@ -1,36 +1,33 @@
-import glob from 'tiny-glob';
 import { build } from 'esbuild';
 import esbuildSvelte from 'esbuild-svelte';
 import sveltePreprocess from 'svelte-preprocess';
 import { preprocess as windiCss } from 'svelte-windicss-preprocess';
 import transformStyleForWebComponent from './style.mjs';
 
-(async () => {
-  const components = await glob('src/components/**/*.wc.svelte');
+if (!process.argv[2]) {
+  console.error('Please specific entry point');
+  process.exit(1);
+}
 
-  components.forEach((componentPath) => {
-    const fileName = componentPath
-      .split('/')
-      .reverse()[0]
-      .replace('.wc.svelte', '.js');
+const entry = process.argv[2];
 
-    build({
-      entryPoints: [componentPath],
-      outfile: `./components/${fileName}`,
-      bundle: true,
-      outdir: '',
-      plugins: [
-        esbuildSvelte({
-          preprocess: [
-            windiCss({
-              mode: 'prod',
-            }),
-            sveltePreprocess(),
-            transformStyleForWebComponent,
-          ],
-          compileOptions: { customElement: true, css: true },
+const output = entry.split('/').reverse()[0].replace('.wc.svelte', '.js');
+
+await build({
+  entryPoints: [entry],
+  outfile: `./components/${output}`,
+  bundle: true,
+  outdir: '',
+  plugins: [
+    esbuildSvelte({
+      preprocess: [
+        windiCss({
+          mode: 'prod',
         }),
+        sveltePreprocess(),
+        transformStyleForWebComponent,
       ],
-    }).catch(() => process.exit(1));
-  });
-})();
+      compileOptions: { customElement: true },
+    }),
+  ],
+}).catch(() => process.exit(1));

src/utils/glob.mjs

@@ -0,0 +1,10 @@
+import glob from 'tiny-glob';
+
+if (!process.argv[2]) {
+  console.error('Please specific glob pattern');
+  process.exit(1);
+}
+
+const pattern = process.argv[2];
+
+(async () => console.log((await glob(pattern)).join('\n')))();

src/utils/style.mjs

@@ -36,6 +36,9 @@ const transformStyleForWebComponent = {
       ...styleProperties
     } = css.parse(content);
 
+    console.log('--- ORIGINAL ----');
+    console.log(content);
+
     const transformedStyleObject = {
       ...styleProperties,
       stylesheet: {
@@ -44,6 +47,9 @@ const transformStyleForWebComponent = {
       },
     };
 
+    console.log('--- PARSED ---');
+    console.log(css.stringify(transformedStyleObject));
+
     return {
       code: css.stringify(transformedStyleObject, { compress: true }),
     };