Feat: CSS - css.multiple() API supports #221

Author: black7375

.changeset/sad-meals-rescue.md

@@ -0,0 +1,6 @@
+---
+"@mincho-js/babel": minor
+"@mincho-js/css": minor
+---
+
+css.multiple() API

packages/babel/src/utils.ts

@@ -71,7 +71,6 @@ export const extractionAPIs = [
   // @mincho-js/css
   "mincho$",
   "css",
-  "cssVariants",
   "globalCss",
   "rules",
   // @vanilla-extract/css

packages/css/src/css/index.ts

@@ -101,10 +101,14 @@ function hoistSelectors(input: CSSRule): HoistResult {
 }
 
 // == CSS ======================================================================
-export function css(style: ComplexCSSRule, debugId?: string) {
+export function cssImpl(style: ComplexCSSRule, debugId?: string) {
   return vStyle(transform(style), debugId);
 }
 
+export const css = Object.assign(cssImpl, {
+  multiple: cssVariants
+});
+
 // == CSS Variants =============================================================
 // TODO: Need to optimize
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#smart_self-overwriting_lazy_getters
@@ -208,9 +212,9 @@ if (import.meta.vitest) {
     });
   });
 
-  describe.concurrent("cssVariants()", () => {
+  describe.concurrent("css.multiple()", () => {
     it("Variants", () => {
-      const result = cssVariants(
+      const result = css.multiple(
         {
           primary: { background: "blue" },
           secondary: { background: "aqua" }
@@ -224,7 +228,7 @@ if (import.meta.vitest) {
     });
 
     it("Mapping Variants", () => {
-      const result = cssVariants(
+      const result = css.multiple(
         {
           primary: "blue",
           secondary: "aqua"
@@ -242,7 +246,7 @@ if (import.meta.vitest) {
 
     it("Mapping Variants with composition", () => {
       const base = css({ padding: 12 }, "base");
-      const result = cssVariants(
+      const result = css.multiple(
         {
           primary: "blue",
           secondary: "aqua"

packages/css/src/index.ts

@@ -25,7 +25,7 @@ export {
   layer
 } from "@vanilla-extract/css";
 
-export { globalCss, css, cssVariants } from "./css/index.js";
+export { globalCss, css } from "./css/index.js";
 export { rules } from "./rules/index.js";
 export type {
   VariantStyle,