Update

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aet/tailwind",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -33,12 +33,12 @@
     }
   },
   "devDependencies": {
-    "@aet/eslint-rules": "2.0.29",
+    "@aet/eslint-rules": "2.0.35",
     "@types/babel__core": "^7.20.5",
     "@types/bun": "^1.2.0",
     "@types/dedent": "^0.7.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.10.10",
+    "@types/node": "^22.13.0",
     "@types/postcss-safe-parser": "^5.0.4",
     "@types/react": "^19.0.8",
     "@types/stylis": "^4.2.7",
@@ -48,13 +48,13 @@
     "css-what": "^6.1.0",
     "dedent": "^1.5.3",
     "esbuild-register": "^3.6.0",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "nolyfill": "^1.0.43",
     "postcss-nested": "^7.0.2",
     "prettier": "^3.4.2",
     "tailwindcss": "^3.4.17",
     "tslib": "^2.8.1",
-    "tsup": "^8.3.5",
+    "tsup": "^8.3.6",
     "typescript": "^5.7.3",
     "vite": "^6.0.11",
     "vitest": "^3.0.4"
@@ -63,7 +63,7 @@
     "tailwindcss": "^3.4.17"
   },
   "dependencies": {
-    "@babel/core": "^7.26.0",
+    "@babel/core": "^7.26.7",
     "@emotion/hash": "^0.9.2",
     "esbuild": "^0.24.2",
     "json5": "^2.2.3",

src/classed.tsx

@@ -1,5 +1,5 @@
-import { type FunctionComponent, forwardRef } from "react";
 import cx from "clsx";
+import { type FunctionComponent, forwardRef } from "react";
 
 export interface WithClassName<Props = object> extends FunctionComponent<Props> {
   className: string;

src/index.ts

@@ -121,7 +121,7 @@ export const getClassName: GetClassName = cls => "tw-" + hash(cls);
  * });
  */
 export function getTailwindPlugins(options: TailwindPluginOptions) {
-  const { addSourceAsComment } = options;
+  const { addSourceAsComment, compile: _compile } = options;
   const resolvedOptions: ResolveTailwindOptions = {
     getClassName,
     jsxAttributeAction: "delete",
@@ -135,7 +135,7 @@ export function getTailwindPlugins(options: TailwindPluginOptions) {
   const getCompiler = () => createPostCSS(resolvedOptions);
 
   const { styleMap } = resolvedOptions;
-  const compile = options.compile ?? memoize(getCompiler());
+  const compile = _compile ?? memoize(getCompiler());
 
   const buildStyleFile: BuildStyleFile = async path => {
     const styles = styleMap.get(path)!;
@@ -169,7 +169,10 @@ export function getTailwindPlugins(options: TailwindPluginOptions) {
     babel: (onCollect?: ClassNameCollector) => babelTailwind(resolvedOptions, onCollect),
     esbuild: () => esbuildPlugin({ styleMap, compile, buildStyleFile }),
     /** Requires `options.vite` to be `true`. */
-    vite: () => vitePlugin({ styleMap, compile, buildStyleFile }),
+    vite: () => {
+      resolvedOptions.vite = true;
+      return vitePlugin({ styleMap, compile, buildStyleFile });
+    },
     styleMap,
     options,
     getCompiler,

src/macro.d.ts

@@ -119,7 +119,7 @@ export type TailwindFunction = {
 } & {
   [tag in SupportedTag]: (
     strings: TemplateStringsArray
-  ) => React.FunctionComponent<JSX.IntrinsicElements[tag]>;
+  ) => React.FunctionComponent<React.JSX.IntrinsicElements[tag]>;
 };
 
 /**

src/vendor/container-queries.ts

@@ -1,4 +1,4 @@
-// https://github.com/tailwindlabs/tailwindcss-container-queries/commit/f8d4307afdd3d913c3ddd406334c1a07f427c5b3
+// https://github.com/tailwindlabs/tailwindcss-container-queries/commit/ef92eba7a7df60659da1ab8dd584346f00efae73
 import plugin from "tailwindcss/plugin.js";
 
 function parseValue(value: string) {

src/vendor/forms.ts

@@ -125,6 +125,16 @@ type Strategy = "base" | "class";
 export default plugin.withOptions<{ strategy?: Strategy }>(
   options =>
     function ({ addBase, addComponents, theme }) {
+      function resolveChevronColor(color: string, fallback: string) {
+        const resolved = theme(color);
+
+        if (!resolved || resolved.includes("var(")) {
+          return fallback;
+        }
+
+        return resolved.replace("<alpha-value>", "1");
+      }
+
       const strategy =
         options?.strategy === undefined ? ["base", "class"] : [options.strategy];
 
@@ -259,7 +269,7 @@ export default plugin.withOptions<{ strategy?: Strategy }>(
           class: [".form-select"],
           styles: {
             "background-image": `url("${svgToDataUri(
-              `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
+              `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${resolveChevronColor(
                 "colors.gray.500",
                 colors.gray[500]
               )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`

src/vendor/react-aria-components-4.ts

@@ -0,0 +1,158 @@
+// https://github.com/adobe/react-spectrum/blob/41ef71d18049af1fcec7d4a9953c2600ed1fa116/packages/tailwindcss-react-aria-components/src/index.js
+import plugin from "tailwindcss/plugin.js";
+import type { PluginAPI } from "tailwindcss/types/config";
+
+// Order of these is important because it determines which states win in a conflict.
+// We mostly follow Tailwind's defaults, adding our additional states following the categories they define.
+// https://github.com/tailwindlabs/tailwindcss/blob/304c2bad6cb5fcb62754a4580b1c8f4c16b946ea/src/corePlugins.js#L83
+const attributes = {
+  boolean: [
+    // Conditions
+    "allows-removing",
+    "allows-sorting",
+    "allows-dragging",
+    "has-submenu",
+
+    // States
+    "open",
+    "expanded",
+    "entering",
+    "exiting",
+    "indeterminate",
+    ["placeholder-shown", "placeholder"],
+    "current",
+    "required",
+    "unavailable",
+    "invalid",
+    ["read-only", "readonly"],
+    "outside-month",
+    "outside-visible-range",
+    "pending",
+
+    // Content
+    "empty",
+
+    // Interactive states
+    "focus-within",
+    ["hover", "hovered"],
+    ["focus", "focused"],
+    "focus-visible",
+    "pressed",
+    "selected",
+    "selection-start",
+    "selection-end",
+    "dragging",
+    "drop-target",
+    "resizing",
+    "disabled",
+  ] as const,
+  enum: {
+    placement: ["left", "right", "top", "bottom"],
+    type: ["literal", "year", "month", "day"],
+    layout: ["grid", "stack"],
+    orientation: ["horizontal", "vertical"],
+    "selection-mode": ["single", "multiple"],
+    "resizable-direction": ["right", "left", "both"],
+    "sort-direction": ["ascending", "descending"],
+  },
+};
+
+const shortNames: Record<string, string> = {
+  "selection-mode": "selection",
+  "resizable-direction": "resizable",
+  "sort-direction": "sort",
+};
+
+// Variants we use that are already defined by Tailwind:
+// https://github.com/tailwindlabs/tailwindcss/blob/a2fa6932767ab328515f743d6188c2164ad2a5de/src/corePlugins.js#L84
+const nativeVariants = [
+  "indeterminate",
+  "required",
+  "invalid",
+  "empty",
+  "focus-visible",
+  "focus-within",
+  "disabled",
+];
+const nativeVariantSelectors = new Map<string, string>([
+  ...nativeVariants.map(variant => [variant, `:${variant}`] as const),
+  ["hovered", ":hover"],
+  ["focused", ":focus"],
+  ["readonly", ":read-only"],
+  ["open", "[open]"],
+  ["expanded", "[expanded]"],
+]);
+
+// Variants where both native and RAC attributes should apply. We don't override these.
+const nativeMergeSelectors = new Map([["placeholder", ":placeholder-shown"]]);
+
+type SelectorFn = (wrap: (s: string) => string) => string;
+type SelectorValue = string | SelectorFn;
+type Selector = string | [string, SelectorValue];
+
+// If no prefix is specified, we want to avoid overriding native variants on non-RAC components, so we only target elements with the data-rac attribute for those variants.
+function getSelector(
+  prefix: string,
+  attributeName: string,
+  attributeValue: string | null
+): Selector {
+  const baseSelector = attributeValue
+    ? `[data-${attributeName}="${attributeValue}"]`
+    : `[data-${attributeName}]`;
+  const nativeSelector = nativeVariantSelectors.get(attributeName);
+  if (prefix === "" && nativeSelector) {
+    const wrappedNativeSelector = `&:not([data-rac])${nativeSelector}`;
+    let nativeSelectorGenerator: SelectorValue = wrappedNativeSelector;
+    if (nativeSelector === ":hover") {
+      nativeSelectorGenerator = wrap =>
+        `@media (hover: hover) { ${wrap(wrappedNativeSelector)} }`;
+    }
+    return [`&[data-rac]${baseSelector}`, nativeSelectorGenerator];
+  } else if (prefix === "" && nativeMergeSelectors.has(attributeName)) {
+    return [`&${baseSelector}`, `&${nativeMergeSelectors.get(attributeName)}`];
+  } else {
+    return `&${baseSelector}`;
+  }
+}
+
+const mapSelector = (selector: Selector, fn: (v: SelectorValue) => string) =>
+  Array.isArray(selector) ? selector.map(fn) : fn(selector);
+
+const wrapSelector = (selector: SelectorValue, wrap: (text: string) => string) =>
+  typeof selector === "function" ? selector(wrap) : wrap(selector);
+
+const addVariants = (
+  variantName: string,
+  selectors: Selector,
+  addVariant: PluginAPI["addVariant"]
+) => {
+  addVariant(
+    variantName,
+    mapSelector(selectors, selector => wrapSelector(selector, s => s))
+  );
+};
+
+export default plugin.withOptions<{ prefix: string }>(options => ({ addVariant }) => {
+  const prefix = options?.prefix ? `${options.prefix}-` : "";
+
+  // Enum attributes go first because currently they are all non-interactive states.
+  for (const [attributeName, value] of Object.entries(attributes.enum) as [
+    keyof typeof attributes.enum,
+    string[],
+  ][]) {
+    for (const [i, attributeValue] of value.entries()) {
+      const name = shortNames[attributeName] || attributeName;
+      const variantName = `${prefix}${name}-${attributeValue}`;
+      const selectors = getSelector(prefix, attributeName, attributeValue);
+      addVariants(variantName, selectors, addVariant, i);
+    }
+  }
+
+  for (const [i, attribute] of attributes.boolean.entries()) {
+    let variantName = Array.isArray(attribute) ? attribute[0] : attribute;
+    variantName = `${prefix}${variantName}`;
+    const attributeName = Array.isArray(attribute) ? attribute[1] : attribute;
+    const selectors = getSelector(prefix, attributeName, null);
+    addVariants(variantName, selectors, addVariant, i);
+  }
+});

src/vendor/typography.ts

@@ -1,4 +1,4 @@
-// https://github.com/tailwindlabs/tailwindcss-typography/commit/7b43b3b33bb74c57a68852330105bb34d11a806a
+// https://github.com/tailwindlabs/tailwindcss-typography/commit/d1e6421d4c07c15b3e1db6b6b10549df96fb129d
 import { castArray, merge } from "lodash-es";
 import parser, { type Pseudo } from "postcss-selector-parser";
 import colors from "tailwindcss/colors.js";