@brickflow/ui 0.0.44 → 0.0.46

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,18 +1,66 @@
 import { defineNuxtModule, createResolver, resolvePath, addTypeTemplate, addTemplate, updateTemplates, addImportsDir, addComponentsDir } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
 import { createJiti } from 'jiti';
-import { readdir, mkdir, readFile, writeFile } from 'node:fs/promises';
-import { join, basename, extname, dirname, resolve, relative } from 'node:path';
+import { mkdir, access, readFile, writeFile, readdir } from 'node:fs/promises';
+import { join, parse, basename, extname, dirname, resolve, relative } from 'node:path';
 import { isBrickflowUiStyleReference, getBrickflowUiStyleReferencePath, defineBrickflowUi } from '../dist/runtime/tailwind.js';
 import { generateFonts, FontAssetType, OtherAssetType } from 'fantasticon';
 
-const ICON_FILE_PATTERN = /\.svg$/i;
-const minifyCss = (css) => css.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{}:;,>+~])\s*/g, "$1").replace(/;\}/g, "}").trim();
-const normalizeGeneratedCss = (css) => `${css.replace(/"/g, "'").replace(/^ {4}/gm, "  ").replace(/(\.(?:eot|ttf|woff2?))\?[^#'")]+(#iefix)?/gi, "$1$2").replace(/src: ([^\n]+),\n([^\n]+),\n([^\n]+);/, "src:\n    $1,\n    $2,\n    $3;").replace(
-  /i\[class\^='icon-'\]:before, i\[class\*=' icon-'\]:before \{/,
-  "@layer base {\n  i[class^='icon-'],\n  i[class*=' icon-'] {\n    container-type: inline-size;\n    display: inline-flex;justify-content: center;align-items: center;\n    width: 1em;\n  }\n}\n\ni[class^='icon-']:before,\ni[class*=' icon-']:before {\n  font-size: 100cqw;"
-).replace(/\n{3,}/g, "\n\n").trim()}
+const getIconFontCssPath$1 = (outputDir, name) => join(outputDir, `${name}.minify.css`);
+async function generateIcons({ inputDir, name, outputDir }) {
+  await mkdir(outputDir, { recursive: true });
+  await generateFonts({
+    assetTypes: [OtherAssetType.CSS, OtherAssetType.JSON],
+    fontsUrl: ".",
+    fontTypes: [FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF],
+    formatOptions: {
+      json: {
+        indent: 2
+      }
+    },
+    inputDir,
+    name,
+    normalize: true,
+    outputDir
+  });
+  let cssSourceFile;
+  for (const file of [`${name}.css`, "icons.css", "icon.css"]) {
+    try {
+      await access(join(outputDir, file));
+      cssSourceFile = file;
+      break;
+    } catch {
+    }
+  }
+  if (!cssSourceFile) {
+    throw new Error(`CSS output file was not generated for icon set "${name}"`);
+  }
+  const cssPath = join(outputDir, cssSourceFile);
+  const minifiedCssPath = join(outputDir, `${parse(cssSourceFile).name}.minify.css`);
+  const cssContent = await readFile(cssPath, "utf8");
+  const normalizedCssContent = normalizeGeneratedCss(cssContent);
+  if (normalizedCssContent !== cssContent) {
+    await writeFile(cssPath, normalizedCssContent);
+  }
+  await writeFile(minifiedCssPath, minifyCss(normalizedCssContent));
+  return {
+    cssPath,
+    minifiedCssPath
+  };
+}
+function minifyCss(css) {
+  return css.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{}:;,>+~])\s*/g, "$1").replace(/;\}/g, "}").trim();
+}
+function normalizeGeneratedCss(css) {
+  return `${css.replace(/"/g, "'").replace(/^ {4}/gm, "  ").replace(/src: ([^\n]+),\n([^\n]+),\n([^\n]+);/, "src:\n    $1,\n    $2,\n    $3;").replace(
+    /i\[class\^='icon-'\]:before, i\[class\*=' icon-'\]:before \{/,
+    "i[class^='icon-']:before,\ni[class*=' icon-']:before {"
+  ).replace(/\n{3,}/g, "\n\n").trim()}
 `;
+}
+
+const ICON_FILE_PATTERN = /\.svg$/i;
+const ICON_FONT_NAME = "brickflow-icon";
 const getIconFontNames = async (inputDir) => {
   const entries = await readdir(inputDir, { withFileTypes: true });
   const invalidEntries = entries.filter((entry) => !entry.isFile() || !ICON_FILE_PATTERN.test(entry.name));
@@ -26,7 +74,7 @@ const getIconFontNames = async (inputDir) => {
   }
   return entries.map((entry) => entry.name.replace(ICON_FILE_PATTERN, "")).sort((a, b) => a.localeCompare(b));
 };
-const getIconFontCssPath = (outputDir) => join(outputDir, "icon.minify.css");
+const getIconFontCssPath = (outputDir) => getIconFontCssPath$1(outputDir, ICON_FONT_NAME);
 const createIconFontAssetsInlineLimit = (outputDir, currentLimit) => {
   const normalizedOutputDir = outputDir.replaceAll("\\", "/");
   return (filePath, content) => {
@@ -41,20 +89,11 @@ const createIconFontAssetsInlineLimit = (outputDir, currentLimit) => {
 };
 const generateIconFont = async ({ inputDir, outputDir }) => {
   await getIconFontNames(inputDir);
-  await mkdir(outputDir, { recursive: true });
-  await generateFonts({
-    assetTypes: [OtherAssetType.CSS],
-    fontsUrl: ".",
-    fontTypes: [FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF],
+  await generateIcons({
     inputDir,
-    name: "icon",
-    normalize: true,
+    name: ICON_FONT_NAME,
     outputDir
   });
-  const cssPath = join(outputDir, "icon.css");
-  const css = normalizeGeneratedCss(await readFile(cssPath, "utf8"));
-  await writeFile(cssPath, css);
-  await writeFile(getIconFontCssPath(outputDir), minifyCss(css));
 };
 const brickflowUiIconFontPlugin = (options) => ({
   buildStart: () => generateIconFont(options),

package/dist/runtime/components/Icon/basic.demo.vue

@@ -43,5 +43,20 @@
         class="text-2xl text-red-400"
       />
     </div>
+
+    <p>
+      Text with icon
+      <Icon :name="iconName" />
+      sample words.
+    </p>
+
+    <div class="flex items-start gap-2">
+      <div class="bg-gray-700">
+        <Icon :name="iconName" />
+      </div>
+      <div class="bg-gray-700 leading-0">
+        <Icon :name="iconName" />
+      </div>
+    </div>
   </div>
 </template>

package/dist/runtime/components/Icon/index.vue

@@ -18,7 +18,28 @@
 <template>
   <i
     v-bind="$attrs"
-    :class="[classes, 'aspect-square']"
+    :class="classes"
     role="img"
   />
 </template>
+
+<style scoped>
+  @layer base {
+    i {
+      aspect-ratio: 1;
+      container-type: inline-size;
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 1em;
+      line-height: 1;
+      vertical-align: -0.125em;
+    }
+
+    i::before {
+      font-size: 100cqi;
+      line-height: 1;
+    }
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [