@csszyx/unplugin 0.15.2 → 0.16.0

package/dist/shared/{unplugin.dz3AdzsO.cjs → unplugin.D3yBoTHP.cjs}

@@ -1732,22 +1732,22 @@ function expandFilePatterns(rootDir, patterns) {
   return safelistSource.sortStrings(files);
 }
 
-const BACKSLASH = String.fromCodePoint(92);
+const BACKSLASH$1 = String.fromCodePoint(92);
 function unicodeEscape(hexadecimal) {
-  return `${BACKSLASH}u${hexadecimal}`;
+  return `${BACKSLASH$1}u${hexadecimal}`;
 }
 function replaceEveryLiteral(value, search, replacement) {
   return value.replaceAll(search, () => replacement);
 }
 function escapeSingleQuotedString(value) {
-  let escaped = replaceEveryLiteral(value, BACKSLASH, BACKSLASH.repeat(2));
-  escaped = replaceEveryLiteral(escaped, "'", `${BACKSLASH}'`);
-  escaped = replaceEveryLiteral(escaped, "\r", `${BACKSLASH}r`);
-  return replaceEveryLiteral(escaped, "\n", `${BACKSLASH}n`);
+  let escaped = replaceEveryLiteral(value, BACKSLASH$1, BACKSLASH$1.repeat(2));
+  escaped = replaceEveryLiteral(escaped, "'", `${BACKSLASH$1}'`);
+  escaped = replaceEveryLiteral(escaped, "\r", `${BACKSLASH$1}r`);
+  return replaceEveryLiteral(escaped, "\n", `${BACKSLASH$1}n`);
 }
 function escapeDoubleQuotedString(value) {
-  const escaped = replaceEveryLiteral(value, BACKSLASH, BACKSLASH.repeat(2));
-  return replaceEveryLiteral(escaped, '"', `${BACKSLASH}"`);
+  const escaped = replaceEveryLiteral(value, BACKSLASH$1, BACKSLASH$1.repeat(2));
+  return replaceEveryLiteral(escaped, '"', `${BACKSLASH$1}"`);
 }
 
 const LINE_SEPARATOR$1 = String.fromCodePoint(8232);
@@ -1936,6 +1936,81 @@ function removedMangleMapDeliveryMessage() {
   return "[csszyx] production.mangleMapDelivery has been removed and is ignored. The runtime mangle map is always registered from inside the JS bundle now, on every lane, so the built HTML never carries an executable inline <script> and a strict script-src 'self' policy needs no exception. Delete the option. (`window.__csszyx` is now opt-in through `production.mangleDebugGlobal`.)";
 }
 
+function utilityStart(className) {
+  let depth = 0;
+  let start = 0;
+  for (let index = 0; index < className.length; index += 1) {
+    const char = className[index];
+    if (char === "[") depth += 1;
+    else if (char === "]") depth = Math.max(0, depth - 1);
+    else if (char === ":" && depth === 0) start = index + 1;
+  }
+  return start;
+}
+function compileManglePreserve(entries) {
+  const list = entries ?? [];
+  list.forEach((entry, index) => {
+    if (typeof entry !== "string" || entry.length === 0) {
+      throw new TypeError(
+        `[csszyx] production.manglePreserve[${index}] must be a non-empty string (an exact class name, or a prefix ending in \`*\`); got ${describe(entry)}.`
+      );
+    }
+    if (entry === "*") {
+      throw new TypeError(
+        "[csszyx] production.manglePreserve must not contain a lone `*`: it would keep every class and silently turn `production.mangle` into a no-op. Name a prefix (`bg-tag-*`) or set `production.mangle: false`."
+      );
+    }
+  });
+  const compiled = list.map((value) => ({
+    value,
+    prefix: value.endsWith("*") ? value.slice(0, -1) : void 0
+  }));
+  const keeps = (entry, className, utilityStartIndex) => entry.prefix === void 0 ? className === entry.value || className.length - utilityStartIndex === entry.value.length && className.startsWith(entry.value, utilityStartIndex) : className.startsWith(entry.prefix) || className.startsWith(entry.prefix, utilityStartIndex);
+  const test = (className) => {
+    if (list.length === 0) return false;
+    const start = utilityStart(className);
+    return compiled.some((entry) => keeps(entry, className, start));
+  };
+  return {
+    entries: list,
+    test,
+    unmatched(census) {
+      if (list.length === 0) return [];
+      const matched = list.map(() => false);
+      let remaining = list.length;
+      for (const className of census) {
+        const start = utilityStart(className);
+        for (let index = 0; index < list.length; index += 1) {
+          if (matched[index] || !keeps(compiled[index], className, start)) continue;
+          matched[index] = true;
+          remaining -= 1;
+        }
+        if (remaining === 0) break;
+      }
+      return list.filter((_, index) => !matched[index]);
+    }
+  };
+}
+function describe(value) {
+  if (typeof value === "string") return "an empty string";
+  if (value instanceof RegExp) return `a RegExp (${String(value)})`;
+  return `${typeof value} ${JSON.stringify(value) ?? String(value)}`;
+}
+function manglePreserveNoMatchMessage(entries) {
+  const sample = entries.slice(0, 8).join(", ");
+  const noun = entries.length === 1 ? "entry" : "entries";
+  return `[csszyx] production.manglePreserve: ${entries.length} ${noun} matched no csszyx class in this build (${sample}) \u2014 nothing was preserved for them. Check the spelling against the class census; an entry keeps a class only when its name is exact, or when it ends in \`*\` and the class starts with the rest.`;
+}
+const TOKEN_CHARACTERS = /^[0-9a-z]+$/i;
+function mangleExcludeNeverTokenEntries(entries) {
+  return [...entries].filter((entry) => !TOKEN_CHARACTERS.test(entry));
+}
+function mangleExcludeNeverTokenMessage(entries) {
+  const sample = entries.slice(0, 8).join(", ");
+  const noun = entries.length === 1 ? "name" : "names";
+  return `[csszyx] production.mangleExclude: ${entries.length} ${noun} can never be a mangle token (${sample}) \u2014 tokens are short base62 strings, so those entries do nothing. To keep a class from being renamed, list it in \`production.manglePreserve\` instead.`;
+}
+
 const MANGLE_RUNTIME_FILE = "mangle-runtime.mjs";
 function ensureMangleRuntimeFile(outputDir, globalVarAliasPrefix, exposeDebugGlobal) {
   const target = path__default.join(outputDir, MANGLE_RUNTIME_FILE);
@@ -2185,9 +2260,9 @@ let _hasWarnedTsConfig = false;
 let _hasWarnedTransformCacheVersion = false;
 let _hasWarnedNativeFallback = false;
 const _loggedActiveParsers = /* @__PURE__ */ new Set();
-const requireFromHere = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/unplugin.dz3AdzsO.cjs', document.baseURI).href)));
+const requireFromHere = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/unplugin.D3yBoTHP.cjs', document.baseURI).href)));
 const PLUGIN_VERSION = findPackageVersionFromFile(
-  node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/unplugin.dz3AdzsO.cjs', document.baseURI).href))),
+  node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/unplugin.D3yBoTHP.cjs', document.baseURI).href))),
   UNKNOWN_PACKAGE_VERSION
 );
 const COMPILER_VERSION = findPackageVersionFromModule("@csszyx/compiler", UNKNOWN_PACKAGE_VERSION);
@@ -2229,39 +2304,136 @@ function shouldWarnMissingTailwindEntry(ownedClassCount, sawTailwindEntry, sawAn
 function missingTailwindEntryMessage(ownedClassCount) {
   return `[csszyx] generated ${ownedClassCount} sz class(es) but found no CSS entry importing "tailwindcss" \u2014 those classes will produce no CSS. Import "tailwindcss" in a CSS file (csszyx auto-injects @source for the generated classes) so Tailwind emits their styles.`;
 }
-function collectMangleHybridHazards(mangleMap, mangledSources, externalClasses) {
+function asciiLower(text) {
+  return text.replace(/[A-Z]/g, (letter) => letter.toLowerCase());
+}
+function attributeSelectorPredicates(operator, value) {
+  const eq = (v) => (name) => name === v;
+  const startsWith = (v) => (name) => name.startsWith(v);
+  const endsWith = (v) => (name) => name.endsWith(v);
+  const includes = (v) => (name) => name.includes(v);
+  const dashPrefix = (v) => (name) => name === v || name.startsWith(`${v}-`);
+  const segments = value.split(/[\t\n\f\r ]+/);
+  if (segments.length === 1) {
+    switch (operator) {
+      case "=":
+      case "~=":
+        return [eq(value)];
+      case "|=":
+        return [dashPrefix(value)];
+      case "^=":
+        return [startsWith(value)];
+      case "$=":
+        return [endsWith(value)];
+      case "*=":
+        return [includes(value)];
+      default:
+        return [];
+    }
+  }
+  if (operator === "~=") return [];
+  const first = segments[0];
+  const last = segments[segments.length - 1];
+  const predicates = [];
+  if (first.length > 0) {
+    predicates.push(operator === "$=" || operator === "*=" ? endsWith(first) : eq(first));
+  }
+  for (const middle of segments.slice(1, -1)) predicates.push(eq(middle));
+  if (last.length > 0) {
+    if (operator === "^=" || operator === "*=") predicates.push(startsWith(last));
+    else if (operator === "|=") predicates.push(dashPrefix(last));
+    else predicates.push(eq(last));
+  }
+  return predicates;
+}
+function renderClassAttributeSelector(selector) {
+  const flag = selector.insensitive ? " i" : "";
+  return `[class${selector.operator}"${selector.value}"${flag}]`;
+}
+function selectorHazardFor(mangleMap, selector) {
+  const value = selector.insensitive ? asciiLower(selector.value) : selector.value;
+  const predicates = attributeSelectorPredicates(selector.operator, value);
+  if (predicates.length === 0) return null;
+  const fold = selector.insensitive ? asciiLower : (name) => name;
+  const matches = (name) => {
+    const folded = fold(name);
+    return predicates.some((predicate) => predicate(folded));
+  };
+  const renamed = compiler.sortStrings(Object.keys(mangleMap).filter(matches));
+  const matchedTokens = compiler.sortStrings(Object.values(mangleMap).filter(matches));
+  if (renamed.length === 0 && matchedTokens.length === 0) return null;
+  return {
+    selector: renderClassAttributeSelector(selector),
+    value: selector.value,
+    renamed,
+    matchedTokens
+  };
+}
+function collectMangleHybridHazards(mangleMap, mangledSources, externalClasses, attributeSelectors = []) {
   const tokenValues = new Set(Object.values(mangleMap));
   const collisions = compiler.sortStrings([...tokenValues].filter((token) => externalClasses.has(token)));
   const orphans = compiler.sortStrings(
     Object.keys(mangleMap).filter((source) => !mangledSources.has(source))
   );
-  return { collisions, orphans };
+  const hazards = /* @__PURE__ */ new Map();
+  for (const selector of attributeSelectors) {
+    const hazard = selectorHazardFor(mangleMap, selector);
+    if (hazard !== null) hazards.set(hazard.selector, hazard);
+  }
+  const selectorMatches = compiler.sortStrings([...hazards.keys()]).map(
+    (key) => hazards.get(key)
+  );
+  return { collisions, orphans, selectorMatches };
+}
+const BACKSLASH = String.fromCodePoint(92);
+const SINGLE_QUOTE = String.fromCodePoint(39);
+function quoteForConfig(entry) {
+  const escaped = entry.replaceAll(BACKSLASH, BACKSLASH + BACKSLASH).replaceAll(SINGLE_QUOTE, BACKSLASH + SINGLE_QUOTE);
+  return SINGLE_QUOTE + escaped + SINGLE_QUOTE;
+}
+function preserveEntriesFor(hazard) {
+  const quote = quoteForConfig;
+  const { value } = hazard;
+  if (hazard.renamed.every((name) => name === value)) return [quote(value)];
+  if (hazard.renamed.every((name) => name.startsWith(value))) return [quote(`${value}*`)];
+  return hazard.renamed.map(quote);
 }
 function mangleHybridHazardMessage(hazards) {
-  const { collisions, orphans } = hazards;
-  if (collisions.length === 0 && orphans.length === 0) {
+  const { collisions, orphans, selectorMatches = [] } = hazards;
+  if (collisions.length === 0 && orphans.length === 0 && selectorMatches.length === 0) {
     return null;
   }
+  const broken = selectorMatches.filter((hazard) => hazard.renamed.length > 0);
+  const newlyMatched = selectorMatches.filter((hazard) => hazard.matchedTokens.length > 0);
   const parts = ["[csszyx] production mangle found hybrid hazards:"];
   if (collisions.length > 0) {
     const sample = collisions.slice(0, 8).join(", ");
     parts.push(
-      ` ${collisions.length} mangled token(s) collide with class names in non-csszyx CSS (e.g. ${sample}) \u2014 those tokens will cross-contaminate external ".${collisions[0]}" elements.`
+      ` ${collisions.length} mangled token(s) collide with class names in non-csszyx CSS (e.g. ${sample}) \u2014 those tokens will cross-contaminate external ".${collisions[0]}" elements.`,
+      " HOTFIX: pass `production: { mangle: false }` to the csszyx plugin to ship now. THEN fix it: if these short names are in your OWN CSS, rename them to something specific (e.g. `.x` \u2192 `.resize-handle-x`) \u2014 short/common names also clash on specificity with other libraries. Only for names in a third-party stylesheet you cannot edit, list them in `production.mangleExclude` instead. Run `npx @csszyx/cli scan-collisions` to find every offending name."
     );
   }
   if (orphans.length > 0) {
     const sample = orphans.slice(0, 8).join(", ");
     parts.push(
-      ` ${orphans.length} mangled class(es) have no emitted CSS rule (e.g. ${sample}) \u2014 those elements lose styling.`
+      ` ${orphans.length} mangled class(es) have no emitted CSS rule (e.g. ${sample}) \u2014 those elements lose styling.`,
+      " Those classes are csszyx-owned but no CSS was emitted for them (e.g. a separate Tailwind plugin owns the utility CSS, or the class is not a real utility). Ensure that CSS is generated, or pass `production: { mangle: false }` to the csszyx plugin until the pipelines are reconciled."
     );
   }
-  if (collisions.length > 0) {
+  if (broken.length > 0) {
+    const sample = broken.slice(0, 3).map((hazard) => `${hazard.selector} \u2192 ${hazard.renamed.slice(0, 4).join(", ")}`).join("; ");
+    const entries = [...new Set(broken.flatMap(preserveEntriesFor))].join(", ");
     parts.push(
-      " HOTFIX: pass `production: { mangle: false }` to the csszyx plugin to ship now. THEN fix it: if these short names are in your OWN CSS, rename them to something specific (e.g. `.x` \u2192 `.resize-handle-x`) \u2014 short/common names also clash on specificity with other libraries. Only for names in a third-party stylesheet you cannot edit, list them in `production.mangleExclude` instead. Run `npx @csszyx/cli scan-collisions` to find every offending name."
+      ` ${broken.length} attribute selector(s) match class names by text (e.g. ${sample}) \u2014 those rules stop matching once the classes are renamed, so the elements lose those styles.`,
+      ` Keep those classes readable with production.manglePreserve: [${entries}] (paste-ready), or key the rule off a data attribute, which mangling never touches. production.mangleExclude cannot help here: it reserves token names and does not keep a class from being renamed.`
     );
-  } else {
+  }
+  if (newlyMatched.length > 0) {
+    const sample = newlyMatched.slice(0, 3).map((hazard) => `${hazard.selector} \u2192 ${hazard.matchedTokens.slice(0, 4).join(", ")}`).join("; ");
+    const tokens = [...new Set(newlyMatched.flatMap((hazard) => hazard.matchedTokens))].map(quoteForConfig).join(", ");
     parts.push(
-      " Those classes are csszyx-owned but no CSS was emitted for them (e.g. a separate Tailwind plugin owns the utility CSS, or the class is not a real utility). Ensure that CSS is generated, or pass `production: { mangle: false }` to the csszyx plugin until the pipelines are reconciled."
+      ` ${newlyMatched.length} attribute selector(s) would start matching mangled tokens instead (e.g. ${sample}).`,
+      ` Reserve those token names with production.mangleExclude: [${tokens}] (paste-ready) so no class is renamed to one of them, or key the rule off a data attribute, which mangling never touches; a prefix or substring selector goes on matching other tokens, so the data attribute is the durable fix.`
     );
   }
   return parts.join("");
@@ -2333,6 +2505,9 @@ function shouldEmitWarning(quiet, devOnly, isProduction) {
 function shouldEmitMissingCssFallback(quiet, message) {
   return resolveQuietMode(quiet) !== "all" && compiler.szFallbackConsequenceOf(message) === "missing-css";
 }
+function shouldHoldAdvisories(quiet, serving, nodeEnv) {
+  return quiet !== "off" || !serving && nodeEnv === "production";
+}
 function emitMissingCssFallback(quiet, message, id, emit) {
   if (shouldEmitMissingCssFallback(quiet, message)) emit(`[csszyx] ${id}
   ${message}`);
@@ -3162,12 +3337,15 @@ ${errors.join("\n")}`
 function createCsszyxPlugins(options = {}) {
   assertGlobalVarMangleConfig(options);
   let manglingEnabled = options.production?.mangle === true;
+  let serving = false;
   const importedStaticSzEnabled = options.build?.importedStaticSz ?? types.DEFAULT_IMPORTED_STATIC_SZ;
   const szvCrossModuleRegistry = /* @__PURE__ */ new Map();
   const szvCrossModuleForwards = /* @__PURE__ */ new Map();
   const szObjectProvidersExamined = /* @__PURE__ */ new Set();
   let specifierAliases = [];
   const mangleReserved = new Set(options.production?.mangleExclude ?? []);
+  const manglePreserve = compileManglePreserve(options.production?.manglePreserve);
+  let manglePreserveNoMatchWarned = false;
   let mangleMapFrozen = false;
   let prescanSawServerModule = false;
   let skipRscRecords = false;
@@ -3178,6 +3356,7 @@ function createCsszyxPlugins(options = {}) {
   let projectCssFiles = [];
   const transformMangledSources = /* @__PURE__ */ new Set();
   const transformExternalClasses = /* @__PURE__ */ new Set();
+  const transformAttributeSelectors = /* @__PURE__ */ new Map();
   if (options.production?.mangleMapDelivery !== void 0) {
     console.warn(removedMangleMapDeliveryMessage());
   }
@@ -3207,6 +3386,10 @@ function createCsszyxPlugins(options = {}) {
   if (unknownConfigKeys.length > 0) {
     emitWarning(unknownConfigKeysMessage(unknownConfigKeys));
   }
+  const excludeNeverTokens = mangleExcludeNeverTokenEntries(mangleReserved);
+  if (excludeNeverTokens.length > 0) {
+    emitWarning(mangleExcludeNeverTokenMessage(excludeNeverTokens));
+  }
   function emitWarning(message, opts = {}) {
     if (shouldEmitWarning(quiet, opts.devOnly ?? false, process.env.NODE_ENV === "production")) {
       console.warn(message);
@@ -4067,10 +4250,15 @@ function createCsszyxPlugins(options = {}) {
       ...state.authoredClasses,
       ...state.ownedClasses
     ]);
-    return allocateMangleTokens(
-      mangleEligibleClasses(state.ownedClasses, state.authoredClasses),
-      forbiddenTokens
+    const eligible = mangleEligibleClasses(state.ownedClasses, state.authoredClasses).filter(
+      (className) => !manglePreserve.test(className)
     );
+    if (!manglePreserveNoMatchWarned && manglingEnabled && state.ownedClasses.size > 0) {
+      manglePreserveNoMatchWarned = true;
+      const unmatched = manglePreserve.unmatched(state.ownedClasses);
+      if (unmatched.length > 0) emitWarning(manglePreserveNoMatchMessage(unmatched));
+    }
+    return allocateMangleTokens(eligible, forbiddenTokens);
   }
   function freezeMangleMap() {
     state.mangleMap = computeMangleMap();
@@ -4223,6 +4411,38 @@ function createCsszyxPlugins(options = {}) {
     }
     return modules;
   }
+  function handleHotFile(pass, ctx) {
+    const { isClientPass } = pass;
+    if (isClientPass) {
+      prescanResultHandoff.clear();
+    }
+    const scanCss = options.build?.scanCss;
+    const reloadThemeGroupsModule = () => {
+      const themeGroupsModule = ctx.server.moduleGraph.getModuleById(
+        themeGroupsFile.RESOLVED_THEME_GROUPS_VIRTUAL_ID
+      );
+      if (themeGroupsModule) {
+        ctx.server.moduleGraph.invalidateModule(themeGroupsModule);
+      }
+    };
+    if (isClientPass && ctx.file.endsWith(".css")) {
+      const root = state.rootDir;
+      const before = themeGroupsFile.createThemeGroupsModule(themeGroupTokens());
+      if (scanCss && matchesAnyPattern(ctx.file, scanCss, root)) {
+        state.scanCssTheme = runThemeScan(root, scanCss) ?? state.scanCssTheme;
+      }
+      runAutoThemeScan(root);
+      reloadThemeGroupsModule();
+      if (themeGroupsFile.createThemeGroupsModule(themeGroupTokens()) !== before) {
+        ctx.server.ws.send({ type: "full-reload" });
+      }
+    }
+    if (safelistSource.normalizePathSeparators(ctx.file) === safelistSource.normalizePathSeparators(path__namespace.join(state.rootDir, SAFELIST_FILENAME))) {
+      return tailwindEntryModules(pass.moduleGraph());
+    }
+    if (isClientPass) discoverHotFileClasses(ctx.file, ctx.server.watcher);
+    return void 0;
+  }
   function transformTailwindCssEntry(code, id) {
     state.sawAnyCss = true;
     const [cssFile] = id.split("?");
@@ -4258,7 +4478,7 @@ function createCsszyxPlugins(options = {}) {
     }
     const advisories = result.diagnostics.filter(isAdvisoryDiagnostic);
     if (advisories.length === 0) return;
-    if (quiet !== "off" || process.env.NODE_ENV === "production") {
+    if (shouldHoldAdvisories(quiet, serving, process.env.NODE_ENV)) {
       state.suppressedAdvisories += advisories.length;
       return;
     }
@@ -4677,6 +4897,7 @@ ${transformedCode}`;
           specifierAliases = transformCache.collectSpecifierAliases(root, config.resolve?.alias);
           if (config.command === "serve") {
             manglingEnabled = false;
+            serving = true;
           }
           if (manglingEnabled && config.build?.watch) {
             manglingEnabled = false;
@@ -4724,38 +4945,39 @@ ${transformedCode}`;
          * which leaves Vite's own handling in place.
          */
         hotUpdate(ctx) {
-          const isClientPass = (this.environment?.name ?? "client") === "client";
-          if (isClientPass) {
-            prescanResultHandoff.clear();
-          }
-          const scanCss = options.build?.scanCss;
-          const reloadThemeGroupsModule = () => {
-            const themeGroupsModule = ctx.server.moduleGraph.getModuleById(
-              themeGroupsFile.RESOLVED_THEME_GROUPS_VIRTUAL_ID
-            );
-            if (themeGroupsModule) {
-              ctx.server.moduleGraph.invalidateModule(themeGroupsModule);
-            }
-          };
-          if (isClientPass && ctx.file.endsWith(".css")) {
-            const root = ctx.server.config.root || process.cwd();
-            const before = themeGroupsFile.createThemeGroupsModule(themeGroupTokens());
-            if (scanCss && matchesAnyPattern(ctx.file, scanCss, root)) {
-              state.scanCssTheme = runThemeScan(root, scanCss) ?? state.scanCssTheme;
-            }
-            runAutoThemeScan(root);
-            reloadThemeGroupsModule();
-            if (themeGroupsFile.createThemeGroupsModule(themeGroupTokens()) !== before) {
-              ctx.server.ws.send({ type: "full-reload" });
-            }
-          }
-          if (safelistSource.normalizePathSeparators(ctx.file) === safelistSource.normalizePathSeparators(path__namespace.join(state.rootDir, SAFELIST_FILENAME))) {
-            return tailwindEntryModules(
-              this.environment?.moduleGraph ?? ctx.server.environments.client.moduleGraph
-            );
-          }
-          if (isClientPass) discoverHotFileClasses(ctx.file, ctx.server.watcher);
-          return void 0;
+          return handleHotFile(
+            {
+              isClientPass: (this.environment?.name ?? "client") === "client",
+              // `server.moduleGraph` holds the backward-compatible
+              // nodes Vite mapped back for the legacy hook only,
+              // so they are the wrong objects to hand this one —
+              // TypeScript says so too.
+              moduleGraph: () => this.environment?.moduleGraph ?? ctx.server.environments.client.moduleGraph
+            },
+            ctx
+          );
+        },
+        /**
+         * The hook Vite 5 calls. Vite 6 and later never run it while
+         * `hotUpdate` is declared, so declaring both costs nothing
+         * there and keeps a Vite 5 dev server compiling `sz` live.
+         *
+         * Vite 5 routes only a file CHANGE here, never a create, so a
+         * project with no `sz` at prescan still sees its first `sz`
+         * edit answered by `@tailwindcss/vite`'s full reload on that
+         * generation — the behaviour it always had there. The hook
+         * runs once, with no environment, so it is the client pass
+         * and answers from the server-wide graph.
+         *
+         * @param ctx - HMR context: the changed file and the dev server.
+         * @returns The modules a safelist write affects; undefined
+         * otherwise.
+         */
+        handleHotUpdate(ctx) {
+          return handleHotFile(
+            { isClientPass: true, moduleGraph: () => ctx.server.moduleGraph },
+            ctx
+          );
         },
         transformIndexHtml: {
           order: "pre",
@@ -4844,7 +5066,7 @@ ${transformedCode}`;
     recordCodePair(sizeAccount, before, after);
     return after;
   }
-  function rewriteOutputCss(source, file, shouldMangle, mangledSources, externalClasses) {
+  function rewriteOutputCss(source, file, shouldMangle, mangledSources, externalClasses, attributeSelectors) {
     const css = rewriteCssWithValidatedGlobalVarPlan(
       source,
       file,
@@ -4858,6 +5080,9 @@ ${transformedCode}`;
       });
       for (const className of result.mangledClasses) mangledSources.add(className);
       for (const className of result.unmangledClasses) externalClasses.add(className);
+      for (const selector of result.classAttributeSelectors) {
+        attributeSelectors.set(cssMangler.classAttributeSelectorKey(selector), selector);
+      }
       const mangled = result.transformedCount > 0 ? result.css : css;
       recordCssPair(sizeAccount, css, mangled);
       return mangled;
@@ -4866,10 +5091,12 @@ ${transformedCode}`;
       throw error;
     }
   }
-  function reportOutputMangleHazards(shouldMangle, mangledSources, externalClasses) {
+  function reportOutputMangleHazards(shouldMangle, mangledSources, externalClasses, attributeSelectors) {
     if (!shouldMangle) return;
     const message = mangleHybridHazardMessage(
-      collectMangleHybridHazards(state.mangleMap, mangledSources, externalClasses)
+      collectMangleHybridHazards(state.mangleMap, mangledSources, externalClasses, [
+        ...attributeSelectors.values()
+      ])
     );
     if (message) console.warn(message);
   }
@@ -4930,6 +5157,7 @@ ${transformedCode}`;
     }
     const mangledSources = /* @__PURE__ */ new Set();
     const externalClasses = /* @__PURE__ */ new Set();
+    const attributeSelectors = /* @__PURE__ */ new Map();
     for (const file in assets) {
       const source = assets[file].source().toString();
       if (file.endsWith(".css")) {
@@ -4938,7 +5166,8 @@ ${transformedCode}`;
           file,
           shouldMangle,
           mangledSources,
-          externalClasses
+          externalClasses,
+          attributeSelectors
         );
         if (css !== source) {
           compilation.updateAsset(file, new compiler.webpack.sources.RawSource(css));
@@ -4947,10 +5176,15 @@ ${transformedCode}`;
         rewriteWebpackCodeAsset(file, source, shouldMangle, compilation, compiler);
       }
     }
-    reportOutputMangleHazards(shouldMangle, mangledSources, externalClasses);
+    reportOutputMangleHazards(
+      shouldMangle,
+      mangledSources,
+      externalClasses,
+      attributeSelectors
+    );
     reportBuildSummary();
   }
-  function rewriteViteBundleEntry(chunk, file, shouldMangle, mangledSources, externalClasses) {
+  function rewriteViteBundleEntry(chunk, file, shouldMangle, mangledSources, externalClasses, attributeSelectors) {
     if (chunk.type !== "asset" || !chunk.fileName.endsWith(".css") || chunk.source === void 0) {
       return;
     }
@@ -4960,7 +5194,8 @@ ${transformedCode}`;
       file,
       shouldMangle,
       mangledSources,
-      externalClasses
+      externalClasses,
+      attributeSelectors
     );
     if (css !== originalCss) chunk.source = css;
   }
@@ -4971,7 +5206,8 @@ ${transformedCode}`;
       id,
       shouldMangle,
       transformMangledSources,
-      transformExternalClasses
+      transformExternalClasses,
+      transformAttributeSelectors
     );
     return css === code ? null : { code: css, map: null };
   }
@@ -4996,6 +5232,7 @@ ${transformedCode}`;
     }
     const mangledSources = new Set(transformMangledSources);
     const externalClasses = new Set(transformExternalClasses);
+    const attributeSelectors = new Map(transformAttributeSelectors);
     if (!cssRewrittenInTransform) {
       for (const file in bundle) {
         rewriteViteBundleEntry(
@@ -5003,11 +5240,17 @@ ${transformedCode}`;
           file,
           shouldMangle,
           mangledSources,
-          externalClasses
+          externalClasses,
+          attributeSelectors
         );
       }
     }
-    reportOutputMangleHazards(shouldMangle, mangledSources, externalClasses);
+    reportOutputMangleHazards(
+      shouldMangle,
+      mangledSources,
+      externalClasses,
+      attributeSelectors
+    );
   }
   const postPlugin = unplugin$1.createUnplugin(() => ({
     name: "csszyx:post",
@@ -5204,6 +5447,7 @@ exports.rollupPlugin = rollupPlugin;
 exports.scanGlobalVarCss = scanGlobalVarCss;
 exports.shouldEmitMissingCssFallback = shouldEmitMissingCssFallback;
 exports.shouldEmitWarning = shouldEmitWarning;
+exports.shouldHoldAdvisories = shouldHoldAdvisories;
 exports.shouldTrackGlobalVarSources = shouldTrackGlobalVarSources;
 exports.shouldWarnMissingTailwindEntry = shouldWarnMissingTailwindEntry;
 exports.shouldWarnUnscopedMonorepo = shouldWarnUnscopedMonorepo;