Chore: Seperate vanilla extract API to ./compat

Author: black7375

examples/react-swc/src/App.css.ts

@@ -1,13 +1,13 @@
-import { globalStyle, keyframes, style } from "@mincho-js/css"
+import { globalCss, keyframes, css } from "@mincho-js/css"
 
-globalStyle("#root", {
+globalCss("#root", {
   maxWidth: "1280px",
   margin: "0 auto",
   padding: "2rem",
   textAlign: "center",
 });
 
-export const react = style({
+export const react = css({
 });
 const logoSpin = keyframes({
   "from": {
@@ -18,7 +18,7 @@ const logoSpin = keyframes({
   },
 });
 
-export const logo = style({
+export const logo = css({
   height: "6em",
   padding: "1.5em",
   willChange: "filter",
@@ -40,11 +40,11 @@ export const logo = style({
   },
 });
 
-export const card = style({
+export const card = css({
   padding: "2em",
 });
 
-export const readTheDocs = style({
+export const readTheDocs = css({
   color: "#888",
 });
 

examples/react-swc/src/index.css.ts

@@ -1,6 +1,6 @@
-import { globalStyle } from "@mincho-js/css"
+import { globalCss } from "@mincho-js/css"
 
-globalStyle(":root", {
+globalCss(":root", {
   fontFamily: "Inter , system-ui , Avenir , Helvetica , Arial , sans-serif",
   lineHeight: "1.5",
   fontWeight: "400",
@@ -20,32 +20,32 @@ globalStyle(":root", {
   },
 });
 
-globalStyle("a", {
+globalCss("a", {
   fontWeight: "500",
   color: "#646cff",
   textDecoration: "inherit",
 });
-globalStyle("a:hover", {
+globalCss("a:hover", {
   color: "#535bf2",
   "@media (prefers-color-scheme: light)": {
     color: "#747bff",
   },
 });
 
-globalStyle("body", {
+globalCss("body", {
   margin: "0",
   display: "flex",
   placeItems: "center",
   minWidth: "320px",
   minHeight: "100vh",
 });
 
-globalStyle("h1", {
+globalCss("h1", {
   fontSize: "3.2em",
   lineHeight: "1.1",
 });
 
-globalStyle("button", {
+globalCss("button", {
   borderRadius: "8px",
   border: "1px solid transparent",
   padding: "0.6em 1.2em",
@@ -60,11 +60,11 @@ globalStyle("button", {
   },
 });
 
-globalStyle("button:hover", {
+globalCss("button:hover", {
   borderColor: "#646cff",
 });
 
-globalStyle("button:focus, button:focus-visible", {
+globalCss("button:focus, button:focus-visible", {
   outline: "4px auto -webkit-focus-ring-color",
 });
 

packages/babel/src/styled.ts

@@ -55,7 +55,7 @@ export function styledComponentPlugin(): PluginObj<PluginState> {
 
               const recipeIdentifier = registerImportMethod(
                 callPath,
-                "recipe",
+                "rules",
                 "@mincho-js/css"
               );
 

packages/babel/src/utils.ts

@@ -70,6 +70,10 @@ export function getNearestIdentifier(path: NodePath<t.Node>) {
 export const extractionAPIs = [
   // @mincho-js/css
   "mincho$",
+  "css",
+  "cssVariants",
+  "globalCss",
+  "rules",
   // @vanilla-extract/css
   "style",
   "styleVariants",

packages/css/package.json

@@ -42,6 +42,16 @@
         "default": "./dist/cjs/index.cjs"
       }
     },
+    "./compat": {
+      "import": {
+        "types": "./dist/esm/compat.d.ts",
+        "default": "./dist/esm/compat.mjs"
+      },
+      "require": {
+        "types": "./dist/cjs/compat.d.cts",
+        "default": "./dist/cjs/compat.cjs"
+      }
+    },
     "./rules/createRuntimeFn": {
       "import": {
         "types": "./dist/esm/rules/createRuntimeFn.d.ts",

packages/css/src/css/index.ts

@@ -38,7 +38,6 @@ export function globalCss(selector: string, rule: GlobalCSSRule) {
     });
   }
 }
-export const globalStyle = globalCss;
 
 // TODO: Make more type-safe
 type UnknownObject = Record<string, unknown>;
@@ -105,7 +104,6 @@ function hoistSelectors(input: CSSRule): HoistResult {
 export function css(style: ComplexCSSRule, debugId?: string) {
   return vStyle(transform(style), debugId);
 }
-export const style = css;
 
 // == CSS Variants =============================================================
 // TODO: Need to optimize
@@ -138,7 +136,6 @@ export function cssVariants<
     return processVariants(styleMap, (style) => style, debugId);
   }
 }
-export const styleVariants = cssVariants;
 
 function isMapDataFunction<
   Data extends Record<string | number, unknown>,
@@ -203,7 +200,7 @@ if (import.meta.vitest) {
     });
 
     it("composition", () => {
-      const base = style({ padding: 12 }, "base");
+      const base = css({ padding: 12 }, "base");
       const result = css([base, { color: "red" }], debugId);
 
       assert.isString(result);
@@ -244,7 +241,7 @@ if (import.meta.vitest) {
     });
 
     it("Mapping Variants with composition", () => {
-      const base = style({ padding: 12 }, "base");
+      const base = css({ padding: 12 }, "base");
       const result = cssVariants(
         {
           primary: "blue",

packages/css/src/index.ts

@@ -1,4 +1,4 @@
-import type {
+export type {
   CSSProperties,
   ComplexCSSRule,
   GlobalCSSRule,
@@ -25,16 +25,8 @@ export {
   layer
 } from "@vanilla-extract/css";
 
-export {
-  globalCss,
-  globalStyle,
-  css,
-  style,
-  cssVariants,
-  styleVariants
-} from "./css/index.js";
-export { rules, recipe } from "./rules/index.js";
-export { createRuntimeFn } from "./rules/createRuntimeFn.js";
+export { globalCss, css, cssVariants } from "./css/index.js";
+export { rules } from "./rules/index.js";
 export type {
   VariantStyle,
   RulesVariants,
@@ -50,8 +42,3 @@ export type {
   VariantObjectSelection,
   ResolveComplex
 } from "./rules/types.js";
-
-export type { CSSProperties, ComplexCSSRule, GlobalCSSRule, CSSRule };
-export type ComplexStyleRule = ComplexCSSRule;
-export type GlobalStyleRule = GlobalCSSRule | ComplexCSSRule;
-export type StyleRule = CSSRule;

packages/css/src/rules/index.ts

@@ -184,7 +184,6 @@ export function rules<
     }
   );
 }
-export const recipe = rules;
 
 function processPropObject<Target extends PropTarget>(
   props: PropDefinition<Target>,

packages/css/vite.config.ts

@@ -10,7 +10,8 @@ export default (viteConfigEnv: ConfigEnv) => {
     build: {
       lib: {
         entry: {
-          // index: join(packageDir, "src", "index.ts"),
+          index: join(packageDir, "src", "index.ts"),
+          compat: join(packageDir, "src", "compat.ts"),
           "rules/createRuntimeFn": join(
             packageDir,
             "src",