Feat: Transform style initial implemented with simply important (#6)

packages/transform-to-vanilla/src/transform-object/index.ts

@@ -0,0 +1,48 @@
+import { simplyImportant } from "@/transform-values/simply-important";
+import type { StyleRule } from "@vanilla-extract/css";
+import type {
+  CSSRule,
+  CSSRuleKey,
+  CSSRuleValue,
+  StyleRuleValue
+} from "@/types/style-rule";
+
+// == Interface ================================================================
+export function transformStyle(style: CSSRule) {
+  const result: {
+    // key in StyleRuleKey occur a error
+    // Type '{}' is missing the following properties from type
+    // '{ accentColor: StyleRuleValue; alignContent: StyleRuleValue; alignItems: StyleRuleValue; alignSelf: StyleRuleValue; ... 904 more ...;
+    //  vars: StyleRuleValue; }': accentColor, alignContent, alignItems, alignSelf, and 905 more.ts(2740)
+    [key in string]: StyleRuleValue;
+  } = {};
+
+  for (const [key, value] of Object.entries(style) as [
+    CSSRuleKey,
+    CSSRuleValue
+  ][]) {
+    if (typeof value === "string") {
+      result[key] = simplyImportant(value);
+      continue;
+    }
+    result[key] = value;
+  }
+  return result as StyleRule;
+}
+
+// == Tests ====================================================================
+if (import.meta.vitest) {
+  const { describe, it, expect } = import.meta.vitest;
+
+  describe.concurrent("transform", () => {
+    it("Simply Important", () => {
+      expect(
+        transformStyle({
+          color: "red!"
+        })
+      ).toStrictEqual({
+        color: "red !important"
+      } satisfies StyleRule);
+    });
+  });
+}

packages/transform-to-vanilla/src/transform.ts

@@ -1,7 +1,7 @@
+import { transformStyle } from "./transform-object/index";
 import type { ComplexStyleRule } from "@vanilla-extract/css";
 import type {
   ComplexCSSRule,
-  CSSRule,
   VanillaStyleArray,
   VanillaClassNames
 } from "./types/style-rule";
@@ -23,11 +23,6 @@ function isClassNames(
   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;

packages/transform-to-vanilla/src/types/style-rule.ts

@@ -3,5 +3,10 @@ import type { ComplexStyleRule, StyleRule } from "@vanilla-extract/css";
 export type ComplexCSSRule = ComplexStyleRule;
 export type CSSRule = StyleRule;
 
+export type StyleRuleKey = keyof StyleRule;
+export type StyleRuleValue = StyleRule[StyleRuleKey];
+export type CSSRuleKey = keyof CSSRule;
+export type CSSRuleValue = CSSRule[CSSRuleKey];
+
 export type VanillaStyleArray = Exclude<ComplexStyleRule, StyleRule>;
 export type VanillaClassNames = Exclude<VanillaStyleArray[number], StyleRule>;