Fix transition rule without DEFAULT [publish]

ArnaudBarre · Dec 11, 2022 · 31a2ad7 · 31a2ad7
1 parent 6630a86
commit 31a2ad7
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 13 deletions.
diff --git a/.idea/prettier.xml b/.idea/prettier.xml
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,9 @@
 # Changelog
 
-## Unreleased
+## 0.4.3
 
 - Fix cssModuleToJS with kebab case classes
+- Fix transition rule without DEFAULT
 
 ## 0.4.2
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@arnaud-barre/downwind",
   "description": "A PostCSS-less implementation of Tailwind based on Lightning CSS",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "license": "MIT",
   "scripts": {

diff --git a/src/coreRules.ts b/src/coreRules.ts
@@ -1063,17 +1063,20 @@ export const getCoreRules = ({
   transitionProperty: themeRule(
     "transition",
     theme.transitionProperty,
-    (value) =>
-      value === "none"
-        ? [["transition-property", "none"]]
-        : [
-            ["transition-property", value],
-            [
-              "transition-timing-function",
-              theme.transitionTimingFunction.DEFAULT!,
-            ],
-            ["transition-duration", theme.transitionDuration.DEFAULT!],
-          ],
+    (value) => {
+      if (value === "none") return [["transition-property", "none"]];
+      const entries: CSSEntries = [["transition-property", value]];
+      if (theme.transitionTimingFunction.DEFAULT) {
+        entries.push([
+          "transition-timing-function",
+          theme.transitionTimingFunction.DEFAULT,
+        ]);
+      }
+      if (theme.transitionDuration.DEFAULT) {
+        entries.push(["transition-duration", theme.transitionDuration.DEFAULT]);
+      }
+      return entries;
+    },
   ),
   transitionDelay: themeRule(
     "delay",

diff --git a/tests/generate.test.ts b/tests/generate.test.ts
@@ -31,6 +31,11 @@ const cases: [name: string, content: string, config?: UserConfig][] = [
     "box-shadow colors",
     "shadow shadow-lg shadow-none shadow-teal-800 shadow-[#dd2] shadow-[5px_10px_teal]",
   ],
+  [
+    "transition",
+    "transition-opacity",
+    { theme: { transitionTimingFunction: {} } },
+  ],
   ["container", "container md:p-6"],
   [
     "container-with-screen-max",

diff --git a/tests/snapshots/generate.css b/tests/snapshots/generate.css