shopify-accelerate-app 1.0.24 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-accelerate-app",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "Shopify App development with full Typescript Support",
   "author": "Felix Tellmann",
   "license": "MIT",
@@ -60,7 +60,8 @@
     "toml": "^3.0.0",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
-    "zustand": "^5.0.1"
+    "zustand": "^5.0.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/inquirer": "^9.0.7",

package/src/esbuild/esbuild.ts

@@ -1,5 +1,7 @@
 import chalk from "chalk";
 import path from "path";
+import { delay } from "src/utils/delay";
+import { ShopifyAppBlock } from "types/shopify";
 // import { require } from "../../require";
 import { config, root_dir } from "../../shopify-accelerate-app";
 import { isBlockTs } from "../scaffold-theme/parse-files";
@@ -11,18 +13,51 @@ const { build } = require("esbuild");
 const watch = require("node-watch");
 const fs = require("fs");
 
-const transformClassNameStrings = (stringContent) => {
+export const transformClassNameStrings = (
+  stringContent,
+  final = false,
+  cssOutput = "",
+  special = false
+) => {
   const prefix = process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX;
 
-  const classNameString = stringContent.replace(/\s+/gi, " ").split(" ");
+  if (special) {
+    if (["`", "return", "function"].some((val) => stringContent.includes(val))) {
+      return stringContent;
+    }
+    if (stringContent.length <= 2 || !stringContent.trim()) {
+      return stringContent;
+    }
+  }
+  const classNameString = special
+    ? stringContent.split(" ")
+    : stringContent.replace(/\s+/gi, " ").split(" ");
+
   const prefixedClassNames = classNameString.map((className) => {
-    if (className.includes(":")) {
+    if (!className.trim()) return className;
+
+    if (special && className.length <= 2) {
+      return className;
+    }
+
+    if (className.includes(":") && className.split(":").at(-1)?.length >= 2) {
       return className
         .split(":")
         .map((str, index, arr) => {
           if ((str.match(/\[/g) || []).length !== (str.match(/]/g) || []).length) {
             return str;
           }
+          if (
+            final &&
+            (str.startsWith(`${prefix}-`) || str.startsWith(`!${prefix}-`)) &&
+            !cssOutput?.includes(str.replace(/([/.[\]])/gi, "\\$1"))
+          ) {
+            console.log(
+              { className: str, b: str.replace(/([/.[\]])/gi, "\\$1") },
+              str?.includes(str.replace(/([/.[\]])/gi, "\\$1"))
+            );
+            return str.replace(`${prefix}-`, "").replace(`!${prefix}-`, "");
+          }
           if (
             index === arr.length - 1 &&
             !str.startsWith(`${prefix}-`) &&
@@ -37,6 +72,21 @@ const transformClassNameStrings = (stringContent) => {
         })
         .join(":");
     }
+    if (
+      final &&
+      (className.startsWith(`${prefix}-`) || className.startsWith(`!${prefix}-`)) &&
+      !cssOutput?.includes(`${className.replace(/([/.[\]])/gi, "\\$1")} `) &&
+      !cssOutput?.includes(`${className.replace(/([/.[\]])/gi, "\\$1")}:`)
+    ) {
+      console.log(
+        { className: className.replace(/([/.[\]])/gi, "\\$1") },
+        cssOutput?.includes(className.replace(/([/.[\]])/gi, "\\$1")),
+        className.replace(/([/.[\]])/gi, "\\$1")
+      );
+
+      return className.replace(`${prefix}-`, "").replace(`!${prefix}-`, "");
+    }
+
     if (className.startsWith(`${prefix}-`) || className.startsWith(`!${prefix}-`)) {
       return className;
     } else {
@@ -49,29 +99,43 @@ const transformClassNameStrings = (stringContent) => {
 
   return prefixedClassNames.join(" ");
 };
-const transformContent = (input) => {
+
+export const transformContent = (input, final = false, cssOutput = "") => {
   const classNameRegex = /className([=:][_\w$]*)(["'`])([^"'`]+)\2/g;
   const classNameWithClsxRegex = /className([=:][_\w$]*)\((.*?)\)([},])/g;
   const classListRegex = /(classList\.[^.(,;'"]*)\(([^)]*)\)/g;
 
-  return input
-    .replace(classListRegex, (match, p1, p2, p3) => {
-      return `${p1}(${p2.replace(/(["'`])([^"'`]+)\1/g, (match, b1, b2) => {
-        return `${b1}${transformClassNameStrings(b2)}${b1}`;
-      })})`;
-    })
-    .replace(classNameRegex, (match, p1, p2, p3) => {
-      return `className${p1}${p2}${transformClassNameStrings(p3)}${p2}`;
+  return (
+    input
+      /* .replace(/"(.*?)"/gm, (match, p1, p2, p3) => {
+      return `"${transformClassNameStrings(p1, final, cssOutput, true)}"`;
     })
-    .replace(classNameWithClsxRegex, (match, p1, p2, p3) => {
-      return `className${p1}(${p2.replace(/(["'`])([^"'`]+)\1/g, (match, p1, p2) => {
-        return `${p1}${transformClassNameStrings(p2)}${p1}`;
-      })})${p3}`;
-    });
+    .replace(/'(.*?)'/gm, (match, p1, p2, p3) => {
+      return `'${transformClassNameStrings(p1, final, cssOutput, true)}'`;
+    })*/
+      .replace(classListRegex, (match, p1, p2, p3) => {
+        return `${p1}(${p2.replace(/(["'`])([^"'`]+)\1/g, (match, b1, b2) => {
+          return `${b1}${transformClassNameStrings(b2, final, cssOutput)}${b1}`;
+        })})`;
+      })
+      .replace(classNameRegex, (match, p1, p2, p3) => {
+        return `className${p1}${p2}${transformClassNameStrings(p3, final, cssOutput)}${p2}`;
+      })
+      .replace(classNameWithClsxRegex, (match, p1, p2, p3) => {
+        return `className${p1}(${p2.replace(/(["'`])([^"'`]+)\1/g, (match, p1, p2) => {
+          return `${p1}${transformClassNameStrings(p2, final, cssOutput)}${p1}`;
+        })})${p3}`;
+      })
+  );
 };
 
-const runBlockJsEsbuild = async (entryFile, folder) => {
+const current = { timeout: null };
+const runBlockJsEsbuild = async (
+  entryFile,
+  block: ShopifyAppBlock & { path: string; folder: string }
+) => {
   const startTime = Date.now();
+  const folder = block.folder;
 
   writeOnlyNew(
     path.join(
@@ -101,12 +165,12 @@ const runBlockJsEsbuild = async (entryFile, folder) => {
   );
   await build({
     entryPoints: [entryFile],
-
     // bundle: true,
     outfile: outPath,
     // outdir: path.join(root_dir, config.extension_path, "assets"),
     bundle: true,
     metafile: true,
+
     treeShaking: true,
     loader: { ".js": "jsx" },
     minify: true,
@@ -124,28 +188,57 @@ const runBlockJsEsbuild = async (entryFile, folder) => {
     keepNames: false,
 
     // splitting: true,
-  }).catch((error) => {
-    console.error(error);
-    // eslint-disable-next-line no-process-exit
-  });
+  })
+    .catch((error) => {
+      console.error(error);
+      // eslint-disable-next-line no-process-exit
+    })
+    .then((res) => {
+      fs.writeFileSync(
+        path.join(block.path.replace("schema.ts", ""), "metafile.json"),
+        JSON.stringify(res.metafile ?? {})
+      );
+    });
 
   let content = fs.readFileSync(outPath, { encoding: "utf-8" });
+
   if (process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX) {
     content = transformContent(content);
   }
   writeCompareFile(finalPath, content);
+
+  const themePath = path.join(
+    process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH,
+    "assets",
+    `${folder
+      .split(/[\\/]/gi)
+      .at(-1)
+      .replace(/\.(ts)x?$/gi, "")}.js`
+  );
+
   if (process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH) {
-    const themePath = path.join(
-      process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH,
-      "assets",
-      `${folder
-        .split(/[\\/]/gi)
-        .at(-1)
-        .replace(/\.(ts)x?$/gi, "")}.js`
-    );
     writeCompareFile(themePath, content);
   }
 
+  clearTimeout(current.timeout);
+  current.timeout = setTimeout(() => {
+    Object.values(config.sources.blockSchemas ?? {})?.forEach(({ folder }) => {
+      if (!content.includes("/* CSS CROSS CHECKED */")) {
+        const finalContent = transformContent(
+          content,
+          true,
+          fs.readFileSync(path.join(config.extension_path, `assets/tailwind.css`), {
+            encoding: "utf-8",
+          })
+        );
+        fs.writeFileSync(finalPath, `${finalContent}\n\n/* CSS CROSS CHECKED */`);
+        if (process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH) {
+          fs.writeFileSync(themePath, `${finalContent}\n\n/* CSS CROSS CHECKED */`);
+        }
+      }
+    });
+  }, 1300);
+
   try {
     // await delay(20);
     // fs.unlinkSync(outPath);
@@ -173,7 +266,7 @@ const buildAllBlocks = async () => {
 
         if (block && !block.disabled) {
           try {
-            await runBlockJsEsbuild(name, block.folder);
+            await runBlockJsEsbuild(name, block);
           } catch (err) {
             console.log(err);
           }
@@ -203,7 +296,7 @@ export const runEsbuild = async () => {
 
       if (block && !block.disabled) {
         try {
-          await runBlockJsEsbuild(`${name.replace(filename, "")}index.tsx`, block.folder);
+          await runBlockJsEsbuild(`${name.replace(filename, "")}index.tsx`, block);
         } catch (err) {
           console.log(err);
         }

package/src/tailwind/tailwind-watch.ts

@@ -2,6 +2,8 @@
 import child_process from "child_process";
 import fs from "fs";
 import path from "path";
+import { delay } from "../utils/delay";
+import { transformContent } from "../esbuild/esbuild";
 import { config, root_dir } from "../../shopify-accelerate-app";
 import { deleteFile, writeCompareFile } from "../utils/fs";
 
@@ -98,6 +100,7 @@ export const runTailwindCSSWatcher = () => {
       });
 
       writeCompareFile(path.join(config.extension_path, `assets/tailwind.css`), content);
+
       if (process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH) {
         writeCompareFile(path.join(config.theme_output_path, `assets/tailwind.css`), content);
       }

package/src/tailwind/tailwind.config.js

@@ -1,14 +1,49 @@
+/** @type {import('tailwindcss').Config} */
 // eslint-disable-next-line node/no-unpublished-require
 // import { require } from "../../require";
+const {
+  defaultExtractor: createDefaultExtractor,
+} = require("tailwindcss/lib/lib/defaultExtractor");
+
+const { default: resolveConfig } = require("tailwindcss/lib/util/resolveConfig");
 const plugin = require("tailwindcss/plugin");
 require("dotenv").config();
 
+/*const defaultExtractor = createDefaultExtractor({
+  tailwindConfig: resolveConfig([
+    {
+      content: [
+        `${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.{html,liquid,js,json}`,
+        `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.css`,
+        `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.css`,
+      ],
+    },
+  ]),
+});
+
+const extractor = (content) => {
+  return defaultExtractor(content).map((cls) => {
+    console.log({ class: cls });
+    return `tw-${cls}`;
+  });
+};*/
+
 module.exports = {
-  content: [
-    `${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/**/*.{html,liquid,js,json}`,
-    `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/**/*.css`,
-    `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/**/*.css`,
-  ],
+  content: {
+    files: [
+      `${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/**/*.{html,liquid,js,json}`,
+      `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.css`,
+      `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**/!*.css`,
+    ],
+    /* extract: {
+      ts: extractor,
+      tsx: extractor,
+      html: extractor,
+      liquid: extractor,
+      js: extractor,
+      json: extractor,
+    },*/
+  },
   darkMode: "class", // or 'media' or 'class'
   // mode: process.env.NODE_ENV ? "jit" : undefined,
   // important: true,
@@ -31,14 +66,6 @@ module.exports = {
       "2xl": "16px",
       "3xl": "24px",
       full: "9999px",
-      "theme-sm": `var(--plt-rounded-sm)`,
-      "theme-full": `9999px`,
-      theme: `var(--plt-rounded)`,
-      "theme-md": `var(--plt-rounded-md)`,
-      "theme-lg": `var(--plt-rounded-lg)`,
-      "theme-xl": `var(--plt-rounded-xl)`,
-      "theme-2xl": `var(--plt-rounded-2xl)`,
-      "theme-3xl": `var(--plt-rounded-3xl)`,
     },
     columns: {
       auto: "auto",
@@ -231,14 +258,56 @@ module.exports = {
         dot: "dot 8.1s linear",
         typewriter: "typewriter 0.5s linear infinite",
       },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
     },
     variants: {
       extend: {},
     },
   },
   plugins: [
+    require("autoprefixer"),
     require("@tailwindcss/aspect-ratio"),
     require("tailwindcss-container-queries-with-max-width"),
+    require("tailwindcss-animate"),
     // require("@tailwindcss/forms"),
     plugin(({ addVariant, addUtilities, matchUtilities, theme }) => {
       addVariant("svg", ["& svg"]);
@@ -282,6 +351,7 @@ module.exports = {
         ".peer:focus-within ~ &",
         ".peer:active ~ &",
       ]);
+      addVariant("peer-fw", [".peer:focus-within ~ &"]);
       matchUtilities(
         {
           "top-spacing": (value) => ({