@madebyseed/seed-cli-tools 2.3.1 → 2.4.0

package/src/tasks/build-css.ts

@@ -0,0 +1,129 @@
+import path from "path";
+import gulp from "gulp";
+import gulpSass from "gulp-sass";
+import sass from "sass";
+import postcss from "gulp-postcss";
+import plumber from "gulp-plumber";
+import chokidar from "chokidar";
+import { glob } from "glob";
+import { utimesSync } from "fs";
+import config from "./includes/config";
+import messages from "./includes/messages";
+import utils from "./includes/utilities";
+
+interface TailwindConfig {
+  mode?: string;
+  [key: string]: unknown;
+}
+
+const sassCompiler = gulpSass(sass);
+const tailwindConfig: TailwindConfig = config.usesTailwind
+  ? require(path.join(config.themeRoot, config.tailwindConfig))
+  : {};
+
+const assets: string[] =
+  config.usesTailwind || tailwindConfig.mode === "jit"
+    ? [
+        config.src.css,
+        config.src.scss,
+        config.src.sections,
+        config.src.layout,
+        config.src.snippets,
+        config.src.assets,
+        config.src.templates,
+        config.src.js,
+        config.src.icons,
+        config.tailwindConfig,
+      ]
+    : [config.src.css, config.src.scss, config.tailwindConfig];
+
+/**
+ * Process css and tailwind
+ *
+ * @returns {Promise<void>}
+ * @private
+ */
+function processCss(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    gulp
+      .src(config.roots.css, { allowEmpty: true })
+      .pipe(plumber(utils.errorHandler))
+      .pipe(postcss(config.plugins.postcss))
+      .pipe(gulp.dest(config.dist.assets))
+      .on("finish", resolve)
+      .on("error", reject);
+  });
+}
+
+/**
+ * Process sass files
+ *
+ * @returns {Promise<void>}
+ * @private
+ */
+function processSass(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    gulp
+      .src(config.roots.scss, { allowEmpty: true })
+      .pipe(plumber(utils.errorHandler))
+      .pipe(sassCompiler())
+      .pipe(postcss(config.plugins.postcss))
+      .pipe(gulp.dest(config.dist.assets))
+      .on("finish", resolve)
+      .on("error", reject);
+  });
+}
+
+/**
+ * Touch CSS files to update their modification time
+ * This ensures Shopify's watcher detects the changes
+ */
+function touchCssFiles(): void {
+  try {
+    const cssFiles = glob.sync(`${config.dist.assets}*.css`);
+    cssFiles.forEach((file) => {
+      // Update the file modification time to trigger Shopify's watcher
+      const now = new Date();
+      utimesSync(file, now, now);
+      messages.logFileEvent("touch", file);
+    });
+  } catch (error) {
+    console.error("Error touching CSS files:", error);
+  }
+}
+
+/**
+ * Concatenate css via gulp-cssimport
+ *
+ * @function build:css
+ * @memberof seed-cli.tasks.build
+ * @static
+ */
+gulp.task("build:css", () => {
+  return Promise.all([processCss(), processSass()]);
+});
+
+/**
+ * Watches css in the `/src` directory
+ *
+ * @function watch:css
+ * @memberof seed-cli.tasks.watch
+ * @static
+ */
+gulp.task("watch:css", () => {
+  chokidar.watch(assets, { ignoreInitial: true }).on("all", (event, path) => {
+    const isCssFile = /\.s[ac]ss$/i.test(path);
+    // Don't log event twice
+    if (isCssFile) {
+      processSass();
+      messages.logFileEvent(event, path);
+    }
+
+    processCss();
+
+    // Important: Touch CSS files after processing to ensure Shopify detects changes
+    setTimeout(() => {
+      touchCssFiles();
+    }, 500);
+  });
+});

package/src/tasks/build-js.ts

@@ -0,0 +1,108 @@
+import gulp from "gulp";
+import gulpif from "gulp-if";
+import uglifyjs from "uglify-js";
+import composer from "gulp-uglify/composer";
+import include from "gulp-include";
+import plumber from "gulp-plumber";
+import chokidar from "chokidar";
+import { glob } from "glob";
+import { utimesSync } from "fs";
+import utils from "./includes/utilities";
+import config from "./includes/config";
+import messages from "./includes/messages";
+// Using Console type from Node.js types
+import type { Console } from "console";
+
+const minify = composer(uglifyjs, console as Console);
+
+interface MinifyOptions {
+  mangle: boolean;
+  compress: boolean;
+}
+
+function processThemeJs(): NodeJS.ReadWriteStream {
+  messages.logProcessFiles("build:js");
+
+  return gulp
+    .src([config.roots.js, `!${config.roots.vendorJs}`], { allowEmpty: true })
+    .pipe(plumber(utils.errorHandler))
+    .pipe(include({ separateInputs: true }))
+    .pipe(gulpif(config.optimize && !config.usesModuleBundler, minify()))
+    .pipe(gulp.dest(config.dist.assets));
+}
+
+function processVendorJs(): NodeJS.ReadWriteStream {
+  messages.logProcessFiles("build:vendor-js");
+  return gulp
+    .src(config.roots.vendorJs, { allowEmpty: true })
+    .pipe(plumber())
+    .pipe(include())
+    .pipe(
+      minify({
+        mangle: true,
+        compress: true,
+      } as MinifyOptions),
+    )
+    .pipe(gulp.dest(config.dist.assets));
+}
+
+/**
+ * Touch JS files to update their modification time
+ * This ensures Shopify's watcher detects the changes
+ */
+function touchJsFiles(): void {
+  try {
+    const jsFiles = glob.sync(`${config.dist.assets}*.js`);
+    jsFiles.forEach((file) => {
+      // Update the file modification time to trigger Shopify's watcher
+      const now = new Date();
+      utimesSync(file, now, now);
+      messages.logFileEvent("touch", file);
+    });
+  } catch (error) {
+    console.error("Error touching JS files:", error);
+  }
+}
+
+gulp.task("build:js", () => {
+  return processThemeJs();
+});
+
+gulp.task("watch:js", () => {
+  chokidar
+    .watch(
+      [config.src.js, `!${config.roots.vendorJs}`, `!${config.src.vendorJs}`],
+      {
+        ignoreInitial: true,
+      },
+    )
+    .on("all", (event, path) => {
+      messages.logFileEvent(event, path);
+      processThemeJs();
+
+      setTimeout(() => {
+        touchJsFiles();
+      }, 500);
+    });
+});
+
+gulp.task("build:vendor-js", () => {
+  return processVendorJs();
+});
+
+gulp.task("watch:vendor-js", () => {
+  chokidar
+    .watch([config.roots.vendorJs, config.src.vendorJs], {
+      ignoreInitial: true,
+    })
+    .on("all", (event, path) => {
+      messages.logFileEvent(event, path);
+      const stream = processVendorJs();
+      stream.on("end", () => {
+        // Touch JS files after processing to ensure Shopify detects changes
+        setTimeout(() => {
+          touchJsFiles();
+        }, 500);
+      });
+    });
+});

package/src/tasks/build-svg.ts

@@ -0,0 +1,92 @@
+import gulp from "gulp";
+import vinylPaths from "vinyl-paths";
+import del from "del";
+import size from "gulp-size";
+import chokidar from "chokidar";
+import extReplace from "gulp-ext-replace";
+import plumber from "gulp-plumber";
+
+import config from "./includes/config";
+import utils from "./includes/utilities";
+import messages from "./includes/messages";
+
+/**
+ * Processing for SVGs prior to deployment - adds accessibility markup, and converts
+ * the file to a liquid snippet.
+ *
+ * @param {String|Array} files - glob/array of files to match & send to the stream
+ * @returns {Stream}
+ * @private
+ */
+function processIcons(files: string | string[]): NodeJS.ReadWriteStream {
+  messages.logProcessFiles("build:svg");
+  return gulp
+    .src(files)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(extReplace(".liquid"))
+    .pipe(
+      size({
+        showFiles: true,
+        pretty: true,
+      }),
+    )
+    .pipe(gulp.dest(config.dist.snippets));
+}
+
+/**
+ * Cleanup/remove liquid snippets from the `dist` directory during watch tasks if
+ * any underlying SVG files in the `src` folder have been removed.
+ *
+ * @param {String|Array} files - glob/array of files to match & send to the stream
+ * @returns {Stream}
+ * @private
+ */
+function removeIcons(files: string[]): NodeJS.ReadWriteStream {
+  messages.logProcessFiles("remove:svg");
+  const mapFiles = files.map((file) => {
+    const distFile = file.replace("src/icons", "dist/snippets");
+    const snippetFile = distFile.replace(".svg", ".liquid");
+    return snippetFile;
+  });
+
+  return gulp
+    .src(mapFiles)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(vinylPaths(del))
+    .pipe(
+      size({
+        showFiles: true,
+        pretty: true,
+      }),
+    );
+}
+
+/**
+ * Pre-processing for svg icons
+ *
+ * @function build:svg
+ * @memberof slate-cli.tasks.build
+ * @static
+ */
+gulp.task("build:svg", () => {
+  return processIcons(config.src.icons);
+});
+
+/**
+ * Watches source svg icons for changes...
+ *
+ * @function watch:svg
+ * @memberof slate-cli.tasks.watch
+ * @static
+ */
+gulp.task("watch:svg", () => {
+  const cache = utils.createEventCache();
+
+  chokidar
+    .watch([config.src.icons], { ignoreInitial: true })
+    .on("all", (event, path) => {
+      messages.logFileEvent(event, path);
+      cache.addEvent(event, path);
+      utils.processCache(cache, processIcons, removeIcons);
+    });
+});

package/src/tasks/build-utils.ts

@@ -0,0 +1,137 @@
+import gulp from "gulp";
+import gulpif from "gulp-if";
+import del from "del";
+import size from "gulp-size";
+import plumber from "gulp-plumber";
+
+import config from "./includes/config";
+import utils from "./includes/utilities";
+import messages from "./includes/messages";
+import { getProjectConfig } from "../utils";
+
+const assetsPaths: string[] = [
+  config.src.assets,
+  config.src.templates,
+  config.src.sections,
+  config.src.snippets,
+  config.src.blocks,
+  config.src.locales,
+  config.src.config,
+  config.src.layout,
+];
+
+/**
+ * Get theme settings assets to sync, respecting project config ignore list
+ */
+function getThemeSettingsAssets(): string[] {
+  const defaultAssets = [
+    config.tmp.templates,
+    config.tmp.config,
+    config.tmp.sectionsJson,
+    config.tmp.blocksJson,
+    config.tmp.locales,
+  ];
+
+  // Convert ignore patterns to negated glob patterns
+  const ignorePatterns = getIgnorePatterns();
+
+  // Combine default assets with ignore patterns
+  return [...defaultAssets, ...ignorePatterns];
+}
+
+function getIgnorePatterns(): string[] {
+  const projectConfig = getProjectConfig(config.themeRoot);
+  if (!projectConfig?.pull?.ignoreFiles?.length) {
+    return [];
+  }
+  return projectConfig.pull.ignoreFiles.map((pattern) =>
+    pattern.startsWith("!") ? pattern : `!tmp/${pattern}`,
+  );
+}
+
+interface SrcOptions {
+  base?: string;
+  [key: string]: unknown;
+}
+
+/**
+ * Copies files from one fold to another, creating a new dir if doesn't exists and
+ * overwriting if it does exist
+ *
+ * @param {Array} files - files to copy
+ * @param {Object} srcOptions - second param for gulp.src function
+ * @param {String} dest - destination dir
+ * @returns {Stream}
+ * @private
+ */
+function copyFiles(
+  files: string | string[],
+  srcOptions: SrcOptions,
+  dest: string,
+  log = false,
+): NodeJS.ReadWriteStream {
+  return gulp
+    .src(files, srcOptions)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(gulpif(log, size({ showFiles: true, pretty: true })))
+    .pipe(gulp.dest(dest));
+}
+
+/**
+ * Clean up build dirs/files whenever doing a full/clean (re)build.
+ *
+ * @function build:clean
+ * @memberof slate-cli.tasks.build
+ * @static
+ */
+gulp.task("clean", () => {
+  return del(["upload", "dist", "tmp", "src/*.zip", "*.zip"]);
+});
+
+/**
+ * Duplicates /src directory into a /tmp directory
+ *
+ * @function generate:tmp
+ * @memberof seed-cli.tasks.sync-settings
+ * @static
+ */
+gulp.task("generate:tmp", () => {
+  messages.logProcessFiles("Generating tmp folder...");
+  return copyFiles(assetsPaths, { base: config.src.root }, config.tmp.root);
+});
+
+/**
+ * Synchronizes the theme settings of /tmp directory into our src directory
+ *
+ * @function sync-settings:tmp:src
+ * @memberof seed-cli.tasks.sync-settings
+ * @static
+ */
+gulp.task("sync-settings:tmp:src", () => {
+  messages.logProcessFiles("Synchronizing /tmp theme settings with /src");
+  const ignorePatterns = getIgnorePatterns();
+  const themeSettingsAssets = getThemeSettingsAssets();
+  messages.logProcessFiles(
+    `Using ignore patterns from project config: ${JSON.stringify(ignorePatterns)}`,
+  );
+  return copyFiles(
+    themeSettingsAssets,
+    { base: config.tmp.root },
+    config.src.root,
+  );
+});
+
+/**
+ * Copies zip from dist to src
+ * @function copy:zip
+ * @memberof seed-cli.tasks.sync-settings
+ * @static
+ */
+gulp.task("copy:zip", () => {
+  return copyFiles(
+    config.dist.zip,
+    { base: config.dist.root },
+    config.themeRoot,
+    true,
+  );
+});

package/src/tasks/includes/config.ts

@@ -0,0 +1,222 @@
+import { join } from "path";
+import debug from "debug";
+import findRoot from "find-root";
+import tailwindcss from "tailwindcss";
+import cssnano from "cssnano";
+import pxtorem from "postcss-pxtorem";
+import reporter from "postcss-reporter";
+import minimist from "minimist";
+import { existsSync } from "fs";
+import autoprefixer from "autoprefixer";
+import postcssImport from "postcss-import";
+
+const logger = debug("seed-tools");
+const argv = minimist(process.argv.slice(2));
+const themeRoot = findRoot(process.cwd());
+const tailwindConfig = "tailwind.config.js";
+
+interface PackageJson {
+  "bundle-js"?: boolean;
+  [key: string]: unknown;
+}
+
+let pkg: PackageJson = {};
+
+try {
+  pkg = require(join(themeRoot, "package.json"));
+} catch (err) {
+  logger(err);
+}
+
+interface PathConfig {
+  root: string;
+  js: string;
+  vendorJs: string;
+  json: string;
+  css: string;
+  scss: string;
+  cssLint: string;
+  vendorCss: string;
+  assets: string;
+  icons: string;
+  templates: string;
+  snippets: string;
+  sections: string;
+  blocks: string;
+  locales: string;
+  config: string;
+  layout: string;
+  zip: string;
+}
+
+interface TmpPathConfig extends PathConfig {
+  sectionsJson: string;
+  blocksJson: string;
+}
+
+interface DistPathConfig {
+  root: string;
+  assets: string;
+  snippets: string;
+  sections: string;
+  blocks: string;
+  layout: string;
+  templates: string;
+  locales: string;
+  zip: string;
+}
+
+interface RootsConfig {
+  js: string;
+  vendorJs: string;
+  css: string;
+  scss: string;
+}
+
+interface PluginsConfig {
+  postcss: any[];
+}
+
+interface BuildConfig {
+  environment: string;
+  store: string | null;
+  storePassword: string | null;
+  optimize: boolean;
+  nodelete: boolean;
+  themeRoot: string;
+  packageJson: PackageJson;
+  tailwindConfig: string;
+  usesTailwind: boolean;
+  usesModuleBundler: boolean;
+  seedConfig: string;
+  shopifyIgnore: string;
+  src: PathConfig;
+  tmp: TmpPathConfig;
+  dist: DistPathConfig;
+  roots: RootsConfig;
+  plugins: PluginsConfig;
+}
+
+const config: BuildConfig = {
+  environment:
+    argv.environment === "undefined" || !argv.environment
+      ? "development"
+      : argv.environment,
+  store: argv.store === "undefined" || !argv.store ? null : argv.store,
+  storePassword:
+    argv["store-password"] === "undefined" || !argv["store-password"]
+      ? null
+      : argv["store-password"],
+  optimize: !argv["skip-optimizations"],
+  nodelete: !argv["delete"],
+  themeRoot,
+  packageJson: pkg,
+  tailwindConfig,
+  usesTailwind: existsSync(join(themeRoot, tailwindConfig)),
+  usesModuleBundler: !!pkg["bundle-js"],
+  seedConfig: "seed.config.js",
+  shopifyIgnore: join(themeRoot, ".shopifyignore"),
+
+  src: {
+    root: "src/",
+    js: "src/scripts/**/*.{js,js.liquid}",
+    vendorJs: "src/scripts/vendor/*.js",
+    json: "src/**/*.json",
+    css: "src/styles/**/*.css",
+    scss: "src/styles/**/*.scss",
+    cssLint: "src/styles/**/*.{css,scss}",
+    vendorCss: "src/styles/vendor/*.{css,scss}",
+    assets: "src/assets/**/*",
+    icons: "src/icons/**/*.svg",
+    templates: "src/templates/**/*",
+    snippets: "src/snippets/*",
+    sections: "src/sections/*",
+    blocks: "src/blocks/*",
+    locales: "src/locales/*",
+    config: "src/config/*",
+    layout: "src/layout/*",
+    zip: "src/**/*.zip",
+  },
+
+  tmp: {
+    root: "tmp/",
+    js: "tmp/scripts/**/*.{js,js.liquid}",
+    vendorJs: "tmp/scripts/vendor/*.js",
+    json: "tmp/**/*.json",
+    css: "tmp/styles/**/*.css",
+    scss: "tmp/styles/**/*.scss",
+    cssLint: "tmp/styles/**/*.{css,scss}",
+    vendorCss: "tmp/styles/vendor/*.{css,scss}",
+    assets: "tmp/assets/**/*",
+    icons: "tmp/icons/**/*.svg",
+    templates: "tmp/templates/**/*",
+    snippets: "tmp/snippets/*",
+    sections: "tmp/sections/*",
+    sectionsJson: "tmp/sections/*.json",
+    blocks: "tmp/blocks/*",
+    blocksJson: "tmp/blocks/*.json",
+    locales: "tmp/locales/*",
+    config: "tmp/config/*",
+    layout: "tmp/layout/*",
+    zip: "tmp/**/*.zip",
+  },
+
+  dist: {
+    root: "dist/",
+    assets: "dist/assets/",
+    snippets: "dist/snippets/",
+    sections: "dist/sections/",
+    blocks: "dist/blocks",
+    layout: "dist/layout/",
+    templates: "dist/templates/",
+    locales: "dist/locales/",
+    zip: "dist/*.zip",
+  },
+
+  roots: {
+    js: "src/scripts/*.{js,js.liquid}",
+    vendorJs: "src/scripts/vendor.js",
+    css: "src/styles/*.css",
+    scss: "src/styles/*.scss",
+  },
+
+  plugins: {
+    postcss: [postcssImport],
+  },
+};
+
+if (config.usesTailwind) {
+  config.plugins.postcss.push(
+    tailwindcss({ config: join(themeRoot, tailwindConfig) }),
+  );
+}
+
+config.plugins.postcss.push(autoprefixer);
+
+config.plugins.postcss.push(
+  pxtorem({
+    rootValue: 16,
+    unitPrecision: 5,
+    propList: ["*"],
+    selectorBlackList: [],
+    replace: true,
+    mediaQuery: true,
+    exclude: /node_modules/i,
+  }),
+);
+
+if (config.optimize) {
+  config.plugins.postcss.push(cssnano({ preset: "default" }));
+}
+
+config.plugins.postcss.push(reporter({ clearReportedMessages: true }));
+
+export default config;
+export type {
+  BuildConfig,
+  PathConfig,
+  TmpPathConfig,
+  DistPathConfig,
+  RootsConfig,
+  PluginsConfig,
+};