shopify-accelerate-app 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-accelerate-app",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "Shopify App development with full Typescript Support",
   "author": "Felix Tellmann",
   "license": "MIT",
@@ -91,7 +91,8 @@
       "import/no-anonymous-default-export": 0,
       "react/no-unescaped-entities": 0,
       "react/jsx-sort-props": 0,
-      "node/no-unpublished-require": 0
+      "node/no-unpublished-require": 0,
+      "max-len": ["error", { "code": 140 }]
     }
   },
   "prettier": {
@@ -99,7 +100,7 @@
     "arrowParens": "always",
     "singleQuote": false,
     "bracketSpacing": true,
-    "printWidth": 100,
+    "printWidth": 140,
     "indentChains": true,
     "exportCurlySpacing": true,
     "importCurlySpacing": true,

package/shopify-accelerate-app.ts

@@ -18,9 +18,7 @@ const program = new Command();
 
 const dotenv = dotenvLoad(); // Dotenv instance
 
-export const root_dir = process.env.SHOPIFY_ACCELERATE_ROOT
-  ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_ROOT)
-  : process.cwd();
+export const root_dir = process.env.SHOPIFY_ACCELERATE_ROOT ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_ROOT) : process.cwd();
 
 const tomlFile = fs.existsSync(path.join(process.cwd(), "shopify.theme.toml"))
   ? toml.parse(
@@ -92,18 +90,9 @@ export type GlobalsState = {
 };
 
 export const config: GlobalsState = {
-  ignore_blocks:
-    shopify_toml?.environments?.["development"]?.ignore_blocks
-      ?.split(",")
-      .map((str) => str.trim()) ?? [],
-  ignore_snippets:
-    shopify_toml?.environments?.["development"]?.ignore_snippets
-      ?.split(",")
-      .map((str) => str.trim()) ?? [],
-  ignore_assets:
-    shopify_toml?.environments?.["development"]?.ignore_assets
-      ?.split(",")
-      .map((str) => str.trim()) ?? [],
+  ignore_blocks: shopify_toml?.environments?.["development"]?.ignore_blocks?.split(",").map((str) => str.trim()) ?? [],
+  ignore_snippets: shopify_toml?.environments?.["development"]?.ignore_snippets?.split(",").map((str) => str.trim()) ?? [],
+  ignore_assets: shopify_toml?.environments?.["development"]?.ignore_assets?.split(",").map((str) => str.trim()) ?? [],
   delete_external_snippets: process.env.SHOPIFY_ACCELERATE_DELETE_EXTERNAL_SNIPPETS === "true",
   delete_external_blocks: process.env.SHOPIFY_ACCELERATE_DELETE_EXTERNAL_BLOCKS === "true",
   delete_external_assets: process.env.SHOPIFY_ACCELERATE_DELETE_EXTERNAL_ASSETS === "true",
@@ -149,9 +138,7 @@ export const config: GlobalsState = {
   theme_output_path: process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH ?? "/themes/development",
 };
 
-program
-  .name("shopify-accelerate-app")
-  .description("CLI for Accelerated App Theme Extensions development");
+program.name("shopify-accelerate-app").description("CLI for Accelerated App Theme Extensions development");
 /*.version(require(path.join("./", "package.json")).version);*/
 
 /*
@@ -185,15 +172,9 @@ program
     "-s, --store <store_id>",
     "Shopify store id. I.e `https://admin.shopify.com/store/<store_id>` or `https://<store_id>.myshopify.com`"
   )
-  .option(
-    "-t, --theme <theme_id>",
-    "Shopify store id. I.e. `https://admin.shopify.com/store/<store_id>/themes/<theme_id>/editor`"
-  )
+  .option("-t, --theme <theme_id>", "Shopify store id. I.e. `https://admin.shopify.com/store/<store_id>/themes/<theme_id>/editor`")
   .action(async (options) => {
-    writeOnlyNew(
-      path.join(process.cwd(), ".env"),
-      readFile(path.join(config.package_templates, "/.env.template"))
-    );
+    writeOnlyNew(path.join(process.cwd(), ".env"), readFile(path.join(config.package_templates, "/.env.template")));
 
     buildAppExtension();
     runEsbuild();

package/src/esbuild/esbuild.ts

@@ -13,12 +13,9 @@ const { build } = require("esbuild");
 const watch = require("node-watch");
 const fs = require("fs");
 
-export const transformClassNameStrings = (
-  stringContent,
-  final = false,
-  cssOutput = "",
-  special = false
-) => {
+export const notCSSClasses = new Map<string, string>();
+
+export const transformClassNameStrings = (stringContent, final = false, cssOutput = "", special = false) => {
   const prefix = process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX;
 
   if (special) {
@@ -29,9 +26,7 @@ export const transformClassNameStrings = (
       return stringContent;
     }
   }
-  const classNameString = special
-    ? stringContent.split(" ")
-    : stringContent.replace(/\s+/gi, " ").split(" ");
+  const classNameString = special ? stringContent.split(" ") : stringContent.replace(/\s+/gi, " ").split(" ");
 
   const prefixedClassNames = classNameString.map((className) => {
     if (!className.trim()) return className;
@@ -50,19 +45,12 @@ export const transformClassNameStrings = (
           if (
             final &&
             (str.startsWith(`${prefix}-`) || str.startsWith(`!${prefix}-`)) &&
-            !cssOutput?.includes(str.replace(/([/.[\]])/gi, "\\$1"))
+            !cssOutput?.includes(str.replace(/([@()%,/.[\]])/gi, "\\$1"))
           ) {
-            console.log(
-              { className: str, b: str.replace(/([/.[\]])/gi, "\\$1") },
-              str?.includes(str.replace(/([/.[\]])/gi, "\\$1"))
-            );
+            notCSSClasses.set(str, str.replace(/([@()%,/.[\]])/gi, "\\$1"));
             return str.replace(`${prefix}-`, "").replace(`!${prefix}-`, "");
           }
-          if (
-            index === arr.length - 1 &&
-            !str.startsWith(`${prefix}-`) &&
-            !str.startsWith(`!${prefix}-`)
-          ) {
+          if (index === arr.length - 1 && !str.startsWith(`${prefix}-`) && !str.startsWith(`!${prefix}-`)) {
             if (/^!/gi.test(str)) {
               return `!${prefix}-${str.replace(/^!/gi, "")}`;
             }
@@ -75,15 +63,10 @@ export const transformClassNameStrings = (
     if (
       final &&
       (className.startsWith(`${prefix}-`) || className.startsWith(`!${prefix}-`)) &&
-      !cssOutput?.includes(`${className.replace(/([/.[\]])/gi, "\\$1")} `) &&
-      !cssOutput?.includes(`${className.replace(/([/.[\]])/gi, "\\$1")}:`)
+      !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")
-      );
-
+      notCSSClasses.set(className, className.replace(/([@()%,/.[\]])/gi, "\\$1"));
       return className.replace(`${prefix}-`, "").replace(`!${prefix}-`, "");
     }
 
@@ -122,7 +105,7 @@ export const transformContent = (input, final = false, cssOutput = "") => {
         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 `className${p1}(${p2.replace(/(["'`])([^"'`]*?)\1/g, (match, p1, p2) => {
           return `${p1}${transformClassNameStrings(p2, final, cssOutput)}${p1}`;
         })})${p3}`;
       })
@@ -130,18 +113,13 @@ export const transformContent = (input, final = false, cssOutput = "") => {
 };
 
 const current = { timeout: null };
-const runBlockJsEsbuild = async (
-  entryFile,
-  block: ShopifyAppBlock & { path: string; folder: string }
-) => {
+
+const runBlockJsEsbuild = async (entryFile, block: ShopifyAppBlock & { path: string; folder: string }) => {
   const startTime = Date.now();
   const folder = block.folder;
 
   writeOnlyNew(
-    path.join(
-      process.cwd(),
-      process.env.SHOPIFY_ACCELERATE_ROOT ? "tsconfig.theme-extension.json" : "tsconfig.json"
-    ),
+    path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_ROOT ? "tsconfig.theme-extension.json" : "tsconfig.json"),
     fs.readFileSync(path.join(config.package_root, "tsconfig.theme-extension.json"), {
       encoding: "utf-8",
     })
@@ -174,10 +152,7 @@ const runBlockJsEsbuild = async (
     treeShaking: true,
     loader: { ".js": "jsx" },
     minify: true,
-    tsconfig: path.join(
-      process.cwd(),
-      process.env.SHOPIFY_ACCELERATE_ROOT ? "tsconfig.theme-extension.json" : "tsconfig.json"
-    ),
+    tsconfig: path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_ROOT ? "tsconfig.theme-extension.json" : "tsconfig.json"),
     format: "iife",
     // platform: "browser",
     legalComments: "none",
@@ -194,10 +169,7 @@ const runBlockJsEsbuild = async (
       // eslint-disable-next-line no-process-exit
     })
     .then((res) => {
-      fs.writeFileSync(
-        path.join(block.path.replace("schema.ts", ""), "metafile.json"),
-        JSON.stringify(res.metafile ?? {})
-      );
+      fs.writeFileSync(path.join(block.path.replace("schema.ts", ""), "metafile.json"), JSON.stringify(res.metafile ?? {}));
     });
 
   let content = fs.readFileSync(outPath, { encoding: "utf-8" });
@@ -231,13 +203,14 @@ const runBlockJsEsbuild = async (
             encoding: "utf-8",
           })
         );
+        console.log(Object.fromEntries(notCSSClasses.entries()));
         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);
+  }, 1800);
 
   try {
     // await delay(20);
@@ -247,9 +220,9 @@ const runBlockJsEsbuild = async (
   }
 
   console.log(
-    `[${chalk.gray(new Date().toLocaleTimeString())}]: [${chalk.magentaBright(
-      `${Date.now() - startTime}ms`
-    )}] ${chalk.magenta(`File Bundled: ${finalPath}`)}`
+    `[${chalk.gray(new Date().toLocaleTimeString())}]: [${chalk.magentaBright(`${Date.now() - startTime}ms`)}] ${chalk.magenta(
+      `File Bundled: ${finalPath}`
+    )}`
   );
   return true;
 };
@@ -260,9 +233,7 @@ const buildAllBlocks = async () => {
       if (isBlockTs(name) && name.includes("index.ts")) {
         const filename = name.split(/[\\/]/gi).at(-1);
 
-        const block = Object.values(config.sources.blockSchemas).find((block) =>
-          block.path.includes(name.replace(filename, ""))
-        );
+        const block = Object.values(config.sources.blockSchemas).find((block) => block.path.includes(name.replace(filename, "")));
 
         if (block && !block.disabled) {
           try {
@@ -290,9 +261,7 @@ export const runEsbuild = async () => {
     if (isBlockTs(name)) {
       const filename = name.split(/[\\/]/gi).at(-1);
 
-      const block = Object.values(config.sources.blockSchemas).find((block) =>
-        block.path.includes(name.replace(filename, ""))
-      );
+      const block = Object.values(config.sources.blockSchemas).find((block) => block.path.includes(name.replace(filename, "")));
 
       if (block && !block.disabled) {
         try {

package/src/scaffold-theme/generate-liquid-files.ts

@@ -1,21 +1,25 @@
 import chalk from "chalk";
 import fs from "fs";
 import path from "path";
+import { notCSSClasses, transformClassNameStrings } from "../esbuild/esbuild";
 import { config, root_dir } from "../../shopify-accelerate-app";
-import { deleteFile, writeCompareFile, writeOnlyNew } from "../utils/fs";
+import { deleteFile, readFile, writeCompareFile, writeOnlyNew } from "../utils/fs";
 import { isObject } from "../utils/is-object";
 import { toLocaleFriendlySnakeCase } from "../utils/to-snake-case";
 import { generateBlockFiles } from "./generate-block-files";
 
-export const generateLiquidFiles = () => {
-  const {
-    extension_path,
-    folders,
-    sources,
-    targets,
-    delete_external_blocks,
-    delete_external_snippets,
-  } = config;
+const current = { timeout: null };
+
+const transformContent = (input: string, final = false, cssOutput = "") => {
+  const classRegex = /class=(["'])([^"']+)\1/g;
+
+  return input.replace(classRegex, (match, p1, p2, p3) => {
+    return `class=${p1}${transformClassNameStrings(p2, final, cssOutput)}${p1}`;
+  });
+};
+
+export const generateLiquidFiles = (final?: boolean, cssOutput?: string) => {
+  const { extension_path, folders, sources, targets, delete_external_blocks, delete_external_snippets } = config;
 
   const translations: any = {};
   const snippets = sources.snippets;
@@ -28,9 +32,7 @@ export const generateLiquidFiles = () => {
     const blockPath = path.join(process.cwd(), extension_path, "blocks", sectionName);
 
     if (schema.disabled) {
-      const targetFile = targets.blocks.find(
-        (target) => target.split(/[\\/]/gi).at(-1) === sectionName
-      );
+      const targetFile = targets.blocks.find((target) => target.split(/[\\/]/gi).at(-1) === sectionName);
       if (targetFile) {
         config.targets.blocks = config.targets.blocks.filter((target) => target !== targetFile);
         deleteFile(path.join(root_dir, targetFile));
@@ -64,59 +66,57 @@ export const generateLiquidFiles = () => {
     });
 
     if (rawContent) {
-      const translatedContent = rawContent.replace(
-        /<t(\s+[^>]*)*>((.|\r|\n)*?)<\/t>/gi,
-        (str, group1, group2) => {
-          const group = toLocaleFriendlySnakeCase(schema.folder);
-          const content = toLocaleFriendlySnakeCase(
-            group2?.split(" ")?.slice(0, 2)?.join("_") ?? ""
-          ).trim();
-          const backupContent = toLocaleFriendlySnakeCase(group2).trim();
-          const id = toLocaleFriendlySnakeCase(group1?.replace(/id="(.*)"/gi, "$1") ?? "").trim();
-
-          if (!(group in translations)) {
-            translations[group] = {};
-          }
+      const translatedContent = rawContent.replace(/<t(\s+[^>]*)*>((.|\r|\n)*?)<\/t>/gi, (str, group1, group2) => {
+        const group = toLocaleFriendlySnakeCase(schema.folder);
+        const content = toLocaleFriendlySnakeCase(group2?.split(" ")?.slice(0, 2)?.join("_") ?? "").trim();
+        const backupContent = toLocaleFriendlySnakeCase(group2).trim();
+        const id = toLocaleFriendlySnakeCase(group1?.replace(/id="(.*)"/gi, "$1") ?? "").trim();
+
+        if (!(group in translations)) {
+          translations[group] = {};
+        }
 
-          if (id && !(id in translations[group])) {
-            translations[group][id] = group2;
-            return `{{ "${group}.${id}" | t }}`;
-          }
+        if (id && !(id in translations[group])) {
+          translations[group][id] = group2;
+          return `{{ "${group}.${id}" | t }}`;
+        }
 
-          if (!(content in translations[group])) {
-            translations[group][content] = group2;
-            return `{{ "${group}.${content}" | t }}`;
-          }
+        if (!(content in translations[group])) {
+          translations[group][content] = group2;
+          return `{{ "${group}.${content}" | t }}`;
+        }
 
-          if (translations[group][content] !== group2) {
-            if (!(backupContent in translations[group])) {
-              translations[group][backupContent] = group2;
-              return `{{ "${group}.${backupContent}" | t }}`;
-            }
-            if (translations[group][backupContent] !== group2) {
-              translations[group][`${content}_2`] = group2;
-              return `{{ "${group}.${content}_2" | t }}`;
-            }
+        if (translations[group][content] !== group2) {
+          if (!(backupContent in translations[group])) {
+            translations[group][backupContent] = group2;
+            return `{{ "${group}.${backupContent}" | t }}`;
           }
-
-          if (translations[group][content] === group2) {
-            return `{{ "${group}.${content}" | t }}`;
+          if (translations[group][backupContent] !== group2) {
+            translations[group][`${content}_2`] = group2;
+            return `{{ "${group}.${content}_2" | t }}`;
           }
+        }
 
-          return group2;
+        if (translations[group][content] === group2) {
+          return `{{ "${group}.${content}" | t }}`;
         }
-      );
 
-      translationArray.push(translatedContent);
+        return group2;
+      });
+
+      translationArray.push(
+        final ? transformContent(transformContent(translatedContent), final, cssOutput) : transformContent(translatedContent)
+      );
+      if (final) {
+        console.log(Object.fromEntries(notCSSClasses.entries()));
+      }
     }
 
     translationArray.push(generateBlockFiles(schema));
 
     if (config.ignore_blocks?.includes(blockPath.split(/[/\\]/)?.at(-1))) {
       console.log(
-        `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.greenBright(
-          `Ignored: ${blockPath.replace(process.cwd(), "")}`
-        )}`
+        `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.greenBright(`Ignored: ${blockPath.replace(process.cwd(), "")}`)}`
       );
       writeOnlyNew(blockPath, translationArray.join("\n"));
     } else {
@@ -128,9 +128,7 @@ export const generateLiquidFiles = () => {
     const snippet = snippets[i];
     const snippetName = snippet.split(/[\\/]/gi).at(-1);
 
-    const block = Object.values(blockSchemas).find((section) =>
-      section.path.includes(snippet.replace(snippetName, ""))
-    );
+    const block = Object.values(blockSchemas).find((section) => section.path.includes(snippet.replace(snippetName, "")));
     if (block && block.disabled) {
       continue;
     }
@@ -143,58 +141,49 @@ export const generateLiquidFiles = () => {
     });
 
     if (rawContent) {
-      const translatedContent = rawContent.replace(
-        /<t(\s+[^>]*)*>((.|\r|\n)*?)<\/t>/gi,
-        (_, group1, group2) => {
-          const group = toLocaleFriendlySnakeCase(
-            snippet.split(/[\\/]/gi).at(-1).split(".").at(0)
-          ).trim();
-          const content = toLocaleFriendlySnakeCase(
-            group2?.split(" ")?.slice(0, 2)?.join("_") ?? ""
-          ).trim();
-          const backupContent = toLocaleFriendlySnakeCase(group2).trim();
-          const id = toLocaleFriendlySnakeCase(group1?.replace(/id="(.*)"/gi, "$1") ?? "").trim();
-
-          if (!(group in translations)) {
-            translations[group] = {};
-          }
+      const translatedContent = rawContent.replace(/<t(\s+[^>]*)*>((.|\r|\n)*?)<\/t>/gi, (_, group1, group2) => {
+        const group = toLocaleFriendlySnakeCase(snippet.split(/[\\/]/gi).at(-1).split(".").at(0)).trim();
+        const content = toLocaleFriendlySnakeCase(group2?.split(" ")?.slice(0, 2)?.join("_") ?? "").trim();
+        const backupContent = toLocaleFriendlySnakeCase(group2).trim();
+        const id = toLocaleFriendlySnakeCase(group1?.replace(/id="(.*)"/gi, "$1") ?? "").trim();
+
+        if (!(group in translations)) {
+          translations[group] = {};
+        }
 
-          if (id && !(id in translations[group])) {
-            translations[group][id] = group2;
-            return `{{ "${group}.${id}" | t }}`;
-          }
+        if (id && !(id in translations[group])) {
+          translations[group][id] = group2;
+          return `{{ "${group}.${id}" | t }}`;
+        }
 
-          if (!(content in translations[group])) {
-            translations[group][content] = group2;
-            return `{{ "${group}.${content}" | t }}`;
-          }
+        if (!(content in translations[group])) {
+          translations[group][content] = group2;
+          return `{{ "${group}.${content}" | t }}`;
+        }
 
-          if (translations[group][content] !== group2) {
-            if (!(backupContent in translations[group])) {
-              translations[group][backupContent] = group2;
-              return `{{ "${group}.${backupContent}" | t }}`;
-            }
-            if (translations[group][backupContent] !== group2) {
-              translations[group][`${content}_2`] = group2;
-              return `{{ "${group}.${content}_2" | t }}`;
-            }
+        if (translations[group][content] !== group2) {
+          if (!(backupContent in translations[group])) {
+            translations[group][backupContent] = group2;
+            return `{{ "${group}.${backupContent}" | t }}`;
           }
-          if (translations[group][content] === group2) {
-            return `{{ "${group}.${content}" | t }}`;
+          if (translations[group][backupContent] !== group2) {
+            translations[group][`${content}_2`] = group2;
+            return `{{ "${group}.${content}_2" | t }}`;
           }
-
-          return group2;
         }
-      );
+        if (translations[group][content] === group2) {
+          return `{{ "${group}.${content}" | t }}`;
+        }
+
+        return group2;
+      });
 
       returnArr.push(translatedContent);
     }
 
     if (config.ignore_snippets?.includes(snippetPath.split(/[/\\]/)?.at(-1))) {
       console.log(
-        `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.greenBright(
-          `Ignored: ${snippetPath.replace(process.cwd(), "")}`
-        )}`
+        `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.greenBright(`Ignored: ${snippetPath.replace(process.cwd(), "")}`)}`
       );
       writeOnlyNew(snippetPath, returnArr.join("\n"));
     } else {
@@ -232,10 +221,7 @@ declare global {
 }
 `;
 
-  writeCompareFile(
-    path.join(process.cwd(), extension_path, "locales", "en.default.json"),
-    JSON.stringify(translations, undefined, 2)
-  );
+  writeCompareFile(path.join(process.cwd(), extension_path, "locales", "en.default.json"), JSON.stringify(translations, undefined, 2));
   /*writeCompareFile(
     path.join(process.cwd(), extension_path, "snippets", "_layout.translations.liquid"),
     translationsJs
@@ -246,19 +232,13 @@ declare global {
 
   sources.blocksJs.forEach((name) => {
     const filename = name.split(/[\\/]/gi).at(-1);
-    const block = Object.values(blockSchemas).find((section) =>
-      section.path.includes(name.replace(filename, ""))
-    );
+    const block = Object.values(blockSchemas).find((section) => section.path.includes(name.replace(filename, "")));
     const targetName = `__block--${filename.replace(/\.(ts)x?$/gi, ".js")}`;
     const targetFile = targets.dynamicJs.find((file) => file.includes(targetName));
 
     if (block && !block.disabled) {
-      dynamicJsImports.push(
-        `<link rel="preload" as="script" href="{{ '${targetName}' | asset_url }}">`
-      );
-      dynamicJsImports.push(
-        `<script type="module" src="{{ '${targetName}' | asset_url }}" defer></script>`
-      );
+      dynamicJsImports.push(`<link rel="preload" as="script" href="{{ '${targetName}' | asset_url }}">`);
+      dynamicJsImports.push(`<script type="module" src="{{ '${targetName}' | asset_url }}" defer></script>`);
     } else if (targetFile) {
       deleteFile(path.join(root_dir, targetFile));
       config.targets.dynamicJs = config.targets.dynamicJs.filter((target) => target !== targetFile);
@@ -268,16 +248,12 @@ declare global {
   targets.dynamicJs.forEach((name) => {
     const targetName = name.split(/[\\/]/gi).at(-1).replace(/\.js$/gi, "");
 
-    const blockFile = sources.blocksJs.find((section) =>
-      section.includes(targetName.replace(/__block--/gi, ""))
-    );
+    const blockFile = sources.blocksJs.find((section) => section.includes(targetName.replace(/__block--/gi, "")));
 
     if (blockFile) {
       const filename = blockFile?.split(/[\\/]/gi)?.at(-1);
 
-      const block = Object.values(blockSchemas).find((section) =>
-        section.path.includes(blockFile.replace(filename, ""))
-      );
+      const block = Object.values(blockSchemas).find((section) => section.path.includes(blockFile.replace(filename, "")));
 
       if (!block || block.disabled) {
         deleteFile(path.join(root_dir, name));
@@ -297,9 +273,7 @@ declare global {
   if (delete_external_snippets) {
     targets.snippets.forEach((file) => {
       const fileName = file.split(/[\\/]/gi).at(-1);
-      const targetFile = snippets.find(
-        (sourcePath) => sourcePath.split(/[\\/]/gi).at(-1) === fileName
-      );
+      const targetFile = snippets.find((sourcePath) => sourcePath.split(/[\\/]/gi).at(-1) === fileName);
       if (
         fileName.includes("_layout.translations.liquid") ||
         fileName.includes("_layout.dynamic-imports.liquid") ||
@@ -319,12 +293,22 @@ declare global {
   if (delete_external_blocks) {
     targets.blocks.forEach((file) => {
       const fileName = file.split(/[\\/]/gi).at(-1);
-      const targetFile = sources.blocksLiquid.find(
-        (sourcePath) => sourcePath.split(/[\\/]/gi).at(-1) === fileName
-      );
+      const targetFile = sources.blocksLiquid.find((sourcePath) => sourcePath.split(/[\\/]/gi).at(-1) === fileName);
       if (!targetFile) {
         deleteFile(path.join(process.cwd(), file));
       }
     });
   }
+
+  clearTimeout(current.timeout);
+  if (!final) {
+    current.timeout = setTimeout(() => {
+      generateLiquidFiles(
+        true,
+        fs.readFileSync(path.join(config.extension_path, `assets/tailwind.css`), {
+          encoding: "utf-8",
+        })
+      );
+    }, 1800);
+  }
 };

package/src/tailwind/tailwind-watch.ts

@@ -32,15 +32,9 @@ export const runTailwindCSSWatcher = () => {
     [
       "tailwindcss",
       "--config",
-      /*hasConfig ? "tailwind.config.js" :*/ path.join(
-        package_root,
-        `src/tailwind/tailwind.config.js`
-      ),
+      /*hasConfig ? "tailwind.config.js" :*/ path.join(package_root, `src/tailwind/tailwind.config.js`),
       "--postcss",
-      /*hasPostCss ? "postcss.config.js" : */ path.join(
-        package_root,
-        `src/tailwind/postcss.config.js`
-      ),
+      /*hasPostCss ? "postcss.config.js" : */ path.join(package_root, `src/tailwind/postcss.config.js`),
       "-i",
       path.join(root_dir, `assets`, `_tailwind.css`),
       "-o",
@@ -87,12 +81,7 @@ export const runTailwindCSSWatcher = () => {
         });
 
         if (writeOut) {
-          const finalClassName = line
-            .replace(/\./g, "")
-            .replace(/{/g, "")
-            .replace(/}/g, "")
-            .replace(/\\/g, "")
-            .trim();
+          const finalClassName = line.replace(/\./g, "").replace(/{/g, "").replace(/}/g, "").replace(/\\/g, "").trim();
           if (finalClassName !== "") {
             classesInOrder.push(`${finalClassName}`);
           }
@@ -111,11 +100,7 @@ export const runTailwindCSSWatcher = () => {
           .join("\n")
           .replace(
             new RegExp(
-              `${
-                process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX
-                  ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-`
-                  : ""
-              }`,
+              `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}`,
               "gi"
             ),
             ""

package/src/tailwind/tailwind.config.js

@@ -1,9 +1,7 @@
 /** @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 { defaultExtractor: createDefaultExtractor } = require("tailwindcss/lib/lib/defaultExtractor");
 
 const { default: resolveConfig } = require("tailwindcss/lib/util/resolveConfig");
 const plugin = require("tailwindcss/plugin");
@@ -35,22 +33,31 @@ module.exports = {
       `!${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,
-    },*/
+    extract: {
+      // ts: extractor,
+      // tsx: extractor,
+      // html: extractor,
+      // liquid: (content) => {
+      //   console.log({ content });
+      //   return content;
+      // },
+      // js: extractor,
+      // json: extractor,
+    },
   },
+  safelist: [
+    `!${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}fixed`,
+    `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}inset-0`,
+    `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}pointer-events-none`,
+    `${
+      process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""
+    }[&>*]:pointer-events-auto`,
+  ],
   darkMode: "class", // or 'media' or 'class'
   // mode: process.env.NODE_ENV ? "jit" : undefined,
   // important: true,
   important: process.env.SHOPIFY_ACCELERATE_TAILWIND_IMPORTANT,
-  prefix: process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX
-    ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-`
-    : undefined,
+  prefix: process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : undefined,
   corePlugins: {
     preflight: false,
   },
@@ -94,13 +101,26 @@ module.exports = {
       "5xl": "1024px",
       "6xl": "1152px",
       "7xl": "1280px",
+      "8xl": "1440px",
     },
     fontSize: {
+      8: ["9px", "1.55"],
       9: ["9px", "1.5"],
       10: ["10px", "1.5"],
       11: ["11px", "1.5"],
       12: ["12px", "1.5"],
       13: ["13px", "1.5"],
+      14: ["14px", "1.5"],
+      15: ["15px", "1.5"],
+      16: ["16px", "1.5"],
+      17: ["17px", "1.5"],
+      18: ["18px", "1.45"],
+      19: ["19px", "1.45"],
+      20: ["20px", "1.45"],
+      21: ["21px", "1.45"],
+      22: ["22px", "1.4"],
+      23: ["23px", "1.4"],
+      24: ["24px", "1.4"],
       xs: ["12px", { lineHeight: "16px" }],
       sm: ["14px", { lineHeight: "20px" }],
       base: ["16px", { lineHeight: "24px" }],
@@ -194,6 +214,22 @@ module.exports = {
         xxs: "373px" /* tiny phone*/,
         xs: "427px" /*smaller than iphone pro max*/,
       },
+      containers: {
+        xxs: "373px" /* tiny phone*/,
+        xs: "427px" /*smaller than iphone pro max*/,
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1536px",
+        "max-xxs": "-373px" /* tiny phone*/,
+        "max-xs": "-427px" /*smaller than iphone pro max*/,
+        "max-sm": "-640px",
+        "max-md": "-768px",
+        "max-lg": "-1024px",
+        "max-xl": "-1280px",
+        "max-2xl": "-1536px",
+      },
       fontSize: {
         8: ["9px", "1.55"],
         9: ["9px", "1.5"],
@@ -249,6 +285,9 @@ module.exports = {
           "0%, 100%": { opacity: "1" },
           "50%": { opacity: "0" },
         },
+        "pulse-bg": {
+          "50%": { "--tw-bg-opacity": "0.5" },
+        },
       },
       animation: {
         slide: "slide 30s linear infinite",
@@ -257,8 +296,17 @@ module.exports = {
         circle: "circle 8.1s linear",
         dot: "dot 8.1s linear",
         typewriter: "typewriter 0.5s linear infinite",
+        "pulse-bg": "pulse-bg 1s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       },
       colors: {
+        theme: {
+          "trigger-bg": "rgb(var(--lx-color-trigger-bg) / <alpha-value>)",
+          "trigger-text": "rgb(var(--lx-color-trigger-text) / <alpha-value>)",
+          bg: "rgb(var(--lx-color-bg) / <alpha-value>)",
+          text: "rgb(var(--lx-color-text) / <alpha-value>)",
+          "button-bg": "rgb(var(--lx-color-button-bg) / <alpha-value>)",
+          "button-text": "rgb(var(--lx-color-button-text) / <alpha-value>)",
+        },
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
@@ -321,6 +369,7 @@ module.exports = {
       addVariant("fa", ["&:focus", "&:active"]);
       addVariant("f", ["&:focus"]);
       addVariant("fw", ["&:focus-within"]);
+      addVariant("fv", ["&:focus-visible"]);
       addVariant("h", ["&:hover"]);
       addVariant("d", [".dark &"]);
       addVariant("ac", ["&.active"]);
@@ -334,23 +383,9 @@ module.exports = {
       addVariant("group-ac", [".group.active &"]);
 
       addVariant("group-hfva", [".group:hover &", ".group:focus-visible &", ".group:active &"]);
-      addVariant("group-hfwa", [
-        ".group:hover &",
-        ".group:focus-visible &",
-        ".group:focus-within &",
-        ".group:active &",
-      ]);
-      addVariant("group-hfw", [
-        ".group:hover &",
-        ".group:focus-visible &",
-        ".group:focus-within &",
-      ]);
-      addVariant("peer-hfwa", [
-        ".peer:hover ~ &",
-        ".peer:focus-visible ~ &",
-        ".peer:focus-within ~ &",
-        ".peer:active ~ &",
-      ]);
+      addVariant("group-hfwa", [".group:hover &", ".group:focus-visible &", ".group:focus-within &", ".group:active &"]);
+      addVariant("group-hfw", [".group:hover &", ".group:focus-visible &", ".group:focus-within &"]);
+      addVariant("peer-hfwa", [".peer:hover ~ &", ".peer:focus-visible ~ &", ".peer:focus-within ~ &", ".peer:active ~ &"]);
       addVariant("peer-fw", [".peer:focus-within ~ &"]);
       matchUtilities(
         {
@@ -360,6 +395,27 @@ module.exports = {
         },
         { values: theme("spacing") }
       );
+      matchUtilities(
+        {
+          "auto-col-flow": (value) => {
+            if (value?.includes("/")) {
+              const [cols, gap] = value.split("/");
+              const calculatedGap = /^(\d|\.)*$/gi.test(gap?.trim()) ? `${+gap * 4}px` : gap;
+
+              return {
+                gridAutoFlow: `column`,
+                gridAutoColumns: ` calc((100% - (${calculatedGap} * (${cols} - 1))) / ${cols})`,
+                columnGap: `${calculatedGap}`,
+              };
+            }
+            return {
+              gridAutoFlow: `column`,
+              gridAutoColumns: `${value}`,
+            };
+          },
+        },
+        { values: theme("width") }
+      );
       /*matchUtilities(
         {
           "border-w": (value) => ({