Tailwind 3.4.2 [publish]

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 0.7.5
+
+- Align `base.css` with Tailwind 3.4.2
+- Support named color (ie `text-[red]` generate a color utility)
+- Skip merging of utilities that contains vendor prefixes
+
 ## 0.7.4
 
 - Actually fix plugin usage in build watch mode

README.md

@@ -92,6 +92,8 @@ export const config: DownwindConfig = async () => {
 
 ## Differences with Tailwind
 
+The current implementation aligns with Tailwind 3.4.2.
+
 ### Components
 
 Downwind doesn't have the notion of components, but custom rules can be injected before core rules by using `injectFirst: true`.

package.json

@@ -3,7 +3,7 @@
   "description": "A bundler-first & PostCSS-independent implementation of Tailwind",
   "private": true,
   "type": "module",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "license": "MIT",
   "scripts": {
@@ -28,14 +28,14 @@
     "@arnaud-barre/config-loader": "^0.7.1"
   },
   "devDependencies": {
-    "@arnaud-barre/eslint-config": "^4.0.1",
+    "@arnaud-barre/eslint-config": "^4.1.1",
     "@arnaud-barre/prettier-plugin-sort-imports": "^0.1.3",
     "@arnaud-barre/tnode": "^0.19.2",
-    "@types/node": "^20.10.5",
-    "eslint": "^8.56.0",
-    "lightningcss": "^1.22.1",
+    "@types/node": "^20.12.7",
+    "eslint": "^8.57.0",
+    "lightningcss": "^1.24.1",
     "prettier": "3.0.3",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.9"
   }
 }

playground/vite/package.json

@@ -12,11 +12,11 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "lightningcss": "^1.22.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "lightningcss": "^1.24.1",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.9"
   }
 }

src/base/base.css

@@ -170,6 +170,7 @@ textarea {
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 3 */
@@ -190,9 +191,9 @@ select {
 */
 
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+input:where([type="button"]),
+input:where([type="reset"]),
+input:where([type="submit"]) {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */

src/coreRules.ts

@@ -1023,7 +1023,11 @@ export const getCoreRules = ({
     "background-blend-mode",
     blendModes,
   ),
-  mixBlendMode: enumRule("mix-blend-", "mix-blend-mode", blendModes),
+  mixBlendMode: enumRule(
+    "mix-blend-",
+    "mix-blend-mode",
+    blendModes.concat(["plus-darker", "plus-lighter"]),
+  ),
   // Non-compliant: incompatible with ring
   boxShadow: complexThemeRule("shadow", theme.boxShadow, (value) =>
     typeof value === "string"

src/index.ts

@@ -572,17 +572,12 @@ export const initDownwindWithConfig = ({
           nextLines = nextMatch ? getLines(nextMatch) : undefined;
           if (
             lines.length === nextLines?.length &&
-            nextLines.every((l, i) => l === lines[i])
+            nextLines.every((l, i) => l === lines[i]) &&
+            !isUnsafeSelector(selector)
           ) {
             utilsOutput += `${indentation}${selector},\n`;
           } else {
-            utilsOutput += printBlock(
-              selector,
-              match.type === "Rule"
-                ? toCSS(match.ruleEntry, match.important)
-                : [arbitraryPropertyMatchToLine(match)],
-              indentation,
-            );
+            utilsOutput += printBlock(selector, lines, indentation);
           }
         }
 
@@ -689,6 +684,16 @@ const isMatchesGroupEmpty = (group: MatchesGroup) => {
 const getOrder = (match: Match) =>
   match.type === "Rule" ? match.ruleEntry.order : Infinity;
 
+// If selector contains a vendor prefix after a pseudo element or class,
+// we consider them separately because merging the declarations into
+// a single rule will cause browsers that do not understand the
+// vendor prefix to throw out the whole rule
+// lightningcss smartly separate them afterward, but esbuild does not
+// For `:has`, for people that really want progressive enhancement for
+// they CSS should use lightningcss as a post processor
+const isUnsafeSelector = (selector: string) =>
+  selector.includes(":-") || selector.includes("::-");
+
 export const staticRules: typeof staticRulesDeclaration = (rules) =>
   Object.entries(rules).map(([key, value]) => [key, Object.entries(value)]);
 

src/theme/getBaseTheme.ts

@@ -167,7 +167,6 @@ export const getBaseTheme = (): DownwindTheme => ({
   },
   borderColor: (theme) => ({
     ...theme("colors"),
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     DEFAULT: theme("colors")["gray-200"] ?? "currentColor",
   }),
   borderOpacity: (theme) => theme("opacity"),
@@ -725,7 +724,6 @@ export const getBaseTheme = (): DownwindTheme => ({
     8: "8px",
   },
   ringColor: (theme) => ({
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     DEFAULT: theme("colors")["blue-500"] ?? "#3b82f6",
     ...theme("colors"),
   }),

src/vitePlugin.ts

@@ -222,7 +222,7 @@ const getBodyJson = <T>(req: IncomingMessage) =>
       try {
         resolve(JSON.parse(body));
       } catch (e) {
-        reject(e);
+        reject(e as Error);
       }
     });
   });

tests/generate.test.ts

@@ -89,7 +89,7 @@ const cases: [name: string, content: string, config?: UserConfig][] = [
   ],
   [
     "arbitrary-values",
-    "inset-[-10px] pt-[100px] w-[45%] text-[#ddd] text-[#f009] text-[12px] text-[10px] animate-[highlight_1s_ease-in-out_1] bg-[#ddd]/50 bg-[--primary] bg-red-500/[--opacity] text-[19px]/7 text-[19px]/[27px]",
+    "inset-[-10px] pt-[100px] w-[45%] text-[#ddd] text-[#f009] text-[red] text-[transparent] text-[12px] text-[10px] animate-[highlight_1s_ease-in-out_1] bg-[#ddd]/50 bg-[--primary] bg-red-500/[--opacity] text-[19px]/7 text-[19px]/[27px]",
   ],
   [
     "line height modifier",
@@ -111,6 +111,10 @@ const cases: [name: string, content: string, config?: UserConfig][] = [
   ["max-screen", "sm:max-md:p-2"],
   ["min-* max=*", "min-[900px]:p-4 max-[1200px]:m-4"],
   ["group-nested-media", "p-1 sm:p-3 sm:print:p-2 m-1 sm:m-3 sm:print:m-2"],
+  [
+    "skip merge for vendor prefixed",
+    "[&:-moz-focusring]:outline-none outline-none",
+  ],
   ["media-order-stable-1", "portrait:p-1 landscape:p-1"],
   ["media-order-stable-2", "landscape:p-1 portrait:p-1"],
   ["supports-*", "supports-[container-type]:grid supports-[display:grid]:grid"],

tests/vitePlugin.test.ts

@@ -11,8 +11,12 @@ pluginSnapshotTest("vite", async () => {
     root,
     plugins: [downwind()],
     logLevel: "warn",
-    css: { transformer: "lightningcss" },
-    build: { cssMinify: false, target: ["chrome104"] },
+    css: {
+      transformer: "lightningcss",
+      // eslint-disable-next-line no-bitwise
+      lightningcss: { targets: { chrome: 104 << 16 } },
+    },
+    build: { cssMinify: false },
     configFile: false,
   });
   return readFileSync(