fix: expand on shadowDom support

Author: darlanalves

server/presets.mjs

@@ -1,70 +1,85 @@
-import { readFile, mkdir, writeFile } from 'node:fs/promises';
-import { createReadStream, existsSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import tailwind from 'tailwindcss';
-import resolveConfig from 'tailwindcss/resolveConfig.js';
-import postcss from 'postcss';
-import autoprefixer from 'autoprefixer';
-import cssnano from 'cssnano';
-import Yaml from 'yaml';
-import { defaultPlugins, allPlugins } from './constants.mjs';
+import { readFile, mkdir, writeFile } from "node:fs/promises";
+import { createReadStream, existsSync } from "node:fs";
+import { join, dirname } from "node:path";
+import tailwind from "tailwindcss";
+import resolveConfig from "tailwindcss/resolveConfig.js";
+import postcss from "postcss";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+import Yaml from "yaml";
+import { defaultPlugins, allPlugins } from "./constants.mjs";
 
 const CWD = process.cwd();
-const getPresetPath = (name) => join(CWD, 'systems', name + '.yml');
+const getPresetPath = (name) => join(CWD, "systems", name + ".yml");
+const each = (v) => (!v ? [] : Object.entries(v));
 
 function generateComponentParts(name, def, separator) {
-  return !def ? [] : Object.entries(def).map(([part, classes]) => `.${name}${separator}${part} {\n  @apply ${classes} ;\n}\n`);
+  return each(def).map(([part, c]) => [`.${name}${separator}${part}`, c]);
 }
 
-function generateShadowComponentParts(name, def) {
-  return !def ? [] : Object.entries(def).map(([part, classes]) => `${name}::part(${part}) {\n  @apply ${classes} ;\n}\n`);
+function generateShadowComponentParts(name, parts) {
+  return each(parts).map(([part, c]) => [`${name}::part(${part})`, c]);
 }
 
 function generateShadowComponentStates(name, def) {
-  return !def ? [] : Object.entries(def).map(([part, classes]) => `${name}::part(component):${part} {\n  @apply ${classes} ;\n}\n`);
+  return each(def).map(([part, c]) => [`${name}::part(component):${part}`, c]);
 }
 
-function defineComponent(name, def, useShadowDom) {
-  if (useShadowDom) {
-    return [
-      `${name}::part(component) {\n${(def.apply && '  @apply ' + def.apply + ';\n') || ''}}\n`,
-      generateShadowComponentParts(name, def.parts),
-      generateShadowComponentStates(name, def.states),
-    ]
-      .flat()
-      .join('');
-  }
+function generateShadowComponentVariants(name, variants) {
+  return each(variants).map(
+    ([variant, classes]) =>
+      `.${name}.${name}-${variant}::part(component) {\n  @apply ${classes} ;\n}\n`
+  );
+}
 
-  return [
-    `.${name} {\n${(def.apply && '  @apply ' + def.apply + ';\n') || ''}}\n`,
-    generateComponentParts(name, def.parts, '__'),
-    generateComponentParts(name, def.modifiers, '--'),
-    generateComponentParts(name, def.variants, '-'),
-    generateComponentParts(name, def.states, ':'),
-  ]
-    .flat()
-    .join('');
+function generateComponent(name, def, prefix = "") {
+  return !def ? [] : [`${prefix}${name}::part(component)`, def.apply];
+}
+
+function defineComponent(name, def, useShadowDom) {
+  const all = useShadowDom
+    ? [
+        generateComponent(name, def.apply),
+        generateShadowComponentParts(name, def.parts),
+        generateShadowComponentStates(name, def.states),
+        generateShadowComponentVariants(name, def.variants, "-"),
+      ]
+    : [
+        generateComponent(name, def.apply, "."),
+        generateComponentParts(name, def.parts, "__"),
+        generateComponentParts(name, def.modifiers, "--"),
+        generateComponentParts(name, def.variants, "-"),
+        generateComponentParts(name, def.states, ":"),
+      ];
+
+  return all
+    .flatMap((item) => item[0] + `{\n  @apply ${item[1]} ;\n}\n`)
+    .join("");
 }
 
 function generateCssSafelist(presets) {
   const classes = [];
 
-  presets.forEach(next => {
-    if (!(next.components && typeof next.components === 'object')) return;
+  presets.forEach((next) => {
+    if (!(next.components && typeof next.components === "object")) return;
 
     Object.entries(next.components).forEach(([name, def]) => {
       classes.push(name);
 
       if (def.parts) {
-        classes.push(...Object.keys(def.parts).map(key => name + '__' + key));
+        classes.push(...Object.keys(def.parts).map((key) => name + "__" + key));
       }
 
       if (def.modifiers) {
-        classes.push(...Object.keys(def.modifiers).map(key => name + '--' + key));
+        classes.push(
+          ...Object.keys(def.modifiers).map((key) => name + "--" + key)
+        );
       }
 
       if (def.variants) {
-        classes.push(...Object.keys(def.variants).map(key => name + '-' + key));
+        classes.push(
+          ...Object.keys(def.variants).map((key) => name + "-" + key)
+        );
       }
     });
   });
@@ -84,7 +99,7 @@ function generateCssTemplate(presets, useShadowDom) {
       chain.variables = Object.assign({}, chain.variables, next.variables);
     }
 
-    if (next.components && typeof next.components === 'object') {
+    if (next.components && typeof next.components === "object") {
       Object.assign(chain, next.components);
     }
 
@@ -99,8 +114,12 @@ function generateCssTemplate(presets, useShadowDom) {
     return chain;
   }, {});
 
-  const components = Object.entries(chain).map(([name, def]) => defineComponent(name, def, useShadowDom)).join('');
-  const allVariables = Object.entries(variables).map(([key, value]) => `--${key}: ${value};`).join('\n');
+  const components = Object.entries(chain)
+    .map(([name, def]) => defineComponent(name, def, useShadowDom))
+    .join("");
+  const allVariables = Object.entries(variables)
+    .map(([key, value]) => `--${key}: ${value};`)
+    .join("\n");
   const css = `:root{
   ${allVariables}
 }
@@ -112,7 +131,7 @@ function generateCssTemplate(presets, useShadowDom) {
 ${components}
 }
 
-${styles.join('')}
+${styles.join("")}
 `;
 
   return css;
@@ -130,7 +149,9 @@ export async function generatePreset(input) {
   }
 
   const allPresets = [...presetChain, input];
-  const pluginChain = allPresets.flatMap(p => transformPlugins(p.corePlugins)).filter(Boolean);
+  const pluginChain = allPresets
+    .flatMap((p) => transformPlugins(p.corePlugins))
+    .filter(Boolean);
   const resolvedPlugins = [...new Set(pluginChain)];
 
   if (resolvedPlugins.length) {
@@ -142,34 +163,44 @@ export async function generatePreset(input) {
   if (input.autoPurge) {
     tailwindConfig.purge = {
       enabled: true,
-      content: ['*.xyz'],
+      content: ["*.xyz"],
       safelist: generateCssSafelist(allPresets),
     };
   }
 
   const json = JSON.stringify(tailwindConfig, null, 2);
-  const cssTemplate = generateCssTemplate(allPresets, (input.shadowDom || input['shadow-dom']));
-  const plugins = [tailwind(tailwindConfig), autoprefixer(), input.minify && cssnano()].filter(Boolean);
+  const cssTemplate = generateCssTemplate(
+    allPresets,
+    input.shadowDom || input["shadow-dom"]
+  );
+  const plugins = [
+    tailwind(tailwindConfig),
+    autoprefixer(),
+    input.minify && cssnano(),
+  ].filter(Boolean);
   const processor = postcss(...plugins);
 
   try {
-    const output = await processor.process(cssTemplate, { from: '/web-design-system.css', to: '/index.css' });
+    const output = await processor.process(cssTemplate, {
+      from: "/web-design-system.css",
+      to: "/index.css",
+    });
     const { css } = output;
 
     return { error: null, css, json };
   } catch (error) {
-    return { error, css: '', json };
+    return { error, css: "", json };
   }
 }
 
 export async function readPreset(name) {
   const path = getPresetPath(name);
 
   if (!existsSync(path)) {
-    return '';
+    return "";
   }
 
-  return await readFile(path, 'utf-8');
+  return await readFile(path, "utf-8");
 }
 
 /**
@@ -188,7 +219,7 @@ export async function loadPreset(name) {
 export async function loadPresetChain(nameOrPreset, presets = []) {
   let preset = nameOrPreset;
 
-  if (typeof nameOrPreset === 'string') {
+  if (typeof nameOrPreset === "string") {
     preset = await loadPreset(nameOrPreset);
   }
 
@@ -197,7 +228,10 @@ export async function loadPresetChain(nameOrPreset, presets = []) {
   }
 
   if (preset.extends) {
-    const extensions = typeof preset.extends === 'string' ? [preset.extends] : preset.extends || [];
+    const extensions =
+      typeof preset.extends === "string"
+        ? [preset.extends]
+        : preset.extends || [];
 
     for (const extension of extensions.reverse()) {
       const next = await loadPreset(extension);
@@ -215,19 +249,19 @@ export async function loadPresetChain(nameOrPreset, presets = []) {
 export async function savePreset(name, preset) {
   const path = getPresetPath(name);
   await ensureFolder(dirname(path));
-  await writeFile(path, preset, 'utf-8');
+  await writeFile(path, preset, "utf-8");
 }
 
 export async function savePresetAssets(name, preset) {
   const { json, css } = preset;
-  const basePath = join(CWD, 'presets', name);
+  const basePath = join(CWD, "presets", name);
   await ensureFolder(dirname(basePath));
-  await writeFile(basePath + '.mjs', 'export default ' + json);
-  await writeFile(basePath + '.css', css);
+  await writeFile(basePath + ".mjs", "export default " + json);
+  await writeFile(basePath + ".css", css);
 }
 
 export function loadPresetAsset(name) {
-  const path = join(CWD, 'presets', name);
+  const path = join(CWD, "presets", name);
 
   if (existsSync(path)) {
     return createReadStream(path);
@@ -240,15 +274,15 @@ export function loadPresetAsset(name) {
  * @returns {string[]} plugins after transforming the keywords
  */
 export function transformPlugins(plugins) {
-  if (plugins === 'all') {
+  if (plugins === "all") {
     return allPlugins;
   }
 
-  if (plugins === 'none') {
+  if (plugins === "none") {
     return [];
   }
 
-  if (plugins === 'default') {
+  if (plugins === "default") {
     plugins = defaultPlugins;
   }
 
@@ -257,7 +291,7 @@ export function transformPlugins(plugins) {
   }
 
   return plugins.flatMap((next) => {
-    if (next.endsWith('*')) {
+    if (next.endsWith("*")) {
       const stem = next.slice(0, -1);
       return allPlugins.filter((p) => p.startsWith(stem));
     }