Fix: Transform structure

mincho-js · Nov 18, 2023 · dd0dc96 · dd0dc96
1 parent 6568706
commit dd0dc96
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 9 deletions.
diff --git a/packages/transform-to-vanilla/src/transform-values/simply-important.ts b/packages/transform-to-vanilla/src/transform-values/simply-important.ts
@@ -1,3 +1,4 @@
+// == Interface ================================================================
 export function simplyImportant(value: string) {
   return value.endsWith("!")
     ? value.endsWith(" !")
@@ -6,13 +7,21 @@ export function simplyImportant(value: string) {
     : value;
 }
 
-// in-source test suites
+// == Tests ====================================================================
 if (import.meta.vitest) {
-  const { it, expect } = import.meta.vitest;
+  const { describe, it, expect } = import.meta.vitest;
 
-  it("simple", () => {
-    expect(simplyImportant("red")).toBe("red");
-    expect(simplyImportant("red!")).toBe("red !important");
-    expect(simplyImportant("red !")).toBe("red !important");
+  describe.concurrent("simplyImportant", () => {
+    it("No important", () => {
+      expect(simplyImportant("red")).toBe("red");
+    });
+
+    it("! to End", () => {
+      expect(simplyImportant("red!")).toBe("red !important");
+    });
+
+    it("! to End with space", () => {
+      expect(simplyImportant("red !")).toBe("red !important");
+    });
   });
 }
diff --git a/packages/transform-to-vanilla/src/transform.ts b/packages/transform-to-vanilla/src/transform.ts
@@ -1,17 +1,105 @@
 import type { ComplexStyleRule } from "@vanilla-extract/css";
-import type { ComplexCSSRule, CSSRule } from "./types/style-rule";
+import type {
+  ComplexCSSRule,
+  CSSRule,
+  VanillaStyleArray,
+  VanillaClassNames
+} from "./types/style-rule";
 
-// TODO: Need traverse
+// == Interface ================================================================
 export function transform(style: ComplexCSSRule): ComplexStyleRule {
   if (Array.isArray(style)) {
     return style.map((eachStyle) => {
-      return eachStyle;
+      return isClassNames(eachStyle) ? eachStyle : transformStyle(eachStyle);
     });
   }
   return transformStyle(style);
 }
 
+// == Utils ====================================================================
+function isClassNames(
+  style: VanillaStyleArray[number]
+): style is VanillaClassNames {
+  return typeof style === "string" || Array.isArray(style);
+}
+
 // TODO: Need traverse
 function transformStyle(style: CSSRule) {
   return style;
 }
+
+// == Tests ====================================================================
+if (import.meta.vitest) {
+  const { describe, it, expect } = import.meta.vitest;
+
+  describe.concurrent("transform", () => {
+    it("Class Names", () => {
+      const classNames = ["myClassName1", "myClassName2"];
+      const resultClassNames = transform(classNames);
+      expect(resultClassNames).toStrictEqual(classNames);
+
+      const nestedClassNames = [
+        "nestedClassName1",
+        ["nestedClassName2", "nestedClassName3"],
+        "nestedClassName4"
+      ];
+      const resultNestedClassNames = transform(nestedClassNames);
+      expect(resultNestedClassNames).toStrictEqual(nestedClassNames);
+    });
+
+    it("Style", () => {
+      const style = {
+        color: "red",
+        borderRadius: 5
+      };
+      const result = transform(style);
+
+      expect(result).toStrictEqual({
+        color: "red",
+        borderRadius: 5
+      });
+    });
+
+    it("Style Array", () => {
+      const style1 = {
+        color: "red",
+        borderRadius: 5
+      };
+      const style2 = {
+        background: "blue"
+      };
+      const result = transform([style1, style2]);
+
+      expect(result).toStrictEqual([style1, style2]);
+    });
+
+    it("Complex Array", () => {
+      const classNames = ["myClassName1", "myClassName2"];
+      const nestedClassNames = [
+        "nestedClassName1",
+        ["nestedClassName2", "nestedClassName3"],
+        "nestedClassName4"
+      ];
+      const style1 = {
+        color: "red",
+        borderRadius: 5
+      };
+      const style2 = {
+        background: "blue"
+      };
+
+      expect([classNames, nestedClassNames, style1, style2]).toStrictEqual([
+        classNames,
+        nestedClassNames,
+        style1,
+        style2
+      ]);
+      expect([style1, nestedClassNames, classNames, style2]).toStrictEqual([
+        style1,
+        nestedClassNames,
+        classNames,
+        style2
+      ]);
+    });
+  });
+}
diff --git a/packages/transform-to-vanilla/src/types/style-rule.ts b/packages/transform-to-vanilla/src/types/style-rule.ts
@@ -2,3 +2,6 @@ import type { ComplexStyleRule, StyleRule } from "@vanilla-extract/css";
 
 export type ComplexCSSRule = ComplexStyleRule;
 export type CSSRule = StyleRule;
+
+export type VanillaStyleArray = Exclude<ComplexStyleRule, StyleRule>;
+export type VanillaClassNames = Exclude<VanillaStyleArray[number], StyleRule>;