Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
github-actions merged 1 commit into from
Jul 19, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/sad-meals-rescue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@mincho-js/babel": minor
"@mincho-js/css": minor
---

css.multiple() API
1 change: 0 additions & 1 deletion packages/babel/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ export const extractionAPIs = [
// @mincho-js/css
"mincho$",
"css",
"cssVariants",
"globalCss",
"rules",
// @vanilla-extract/css
Expand Down
14 changes: 9 additions & 5 deletions packages/css/src/css/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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" }
Expand All @@ -224,7 +228,7 @@ if (import.meta.vitest) {
});

it("Mapping Variants", () => {
const result = cssVariants(
const result = css.multiple(
{
primary: "blue",
secondary: "aqua"
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/css/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Copy link

@coderabbitai coderabbitai bot Jul 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify that existing cssVariants usage has been updated.

The removal of cssVariants from the exports is correct for the new API design. However, ensure all existing usage of the standalone cssVariants import has been updated to use css.multiple instead.

🏁 Script executed:

#!/bin/bash
# Description: Check for any remaining direct imports or usage of cssVariants that might be broken
# Expected: No direct imports of cssVariants should remain

echo "Checking for direct cssVariants imports..."
rg "import.*cssVariants" --type ts --type tsx --type js --type jsx

echo "Checking for cssVariants usage (excluding the implementation file)..."
rg "cssVariants" --type ts --type tsx --type js --type jsx -A 2 | grep -v "packages/css/src/css/index.ts"

Length of output: 472

🏁 Script executed:

#!/bin/bash
# Re-run searches without relying on ripgrep’s file-type flags

echo "Checking for direct cssVariants imports across the repo..."
grep -R "import.*cssVariants" -n .

echo
echo "Checking for any cssVariants usage outside of the CSS package implementation..."
grep -R "cssVariants" -n . | grep -Ev 'packages/css/src/index.ts|packages/css/src/css/index.ts'

Length of output: 734

Update internal cssVariants references to use css.multiple

We’ve found remaining direct uses of the standalone cssVariants function inside the CSS package itself. To keep the API surface consistent, these should be updated to import only css and call css.multiple.

Locations to fix:

  • packages/css/src/rules/index.ts:11
    Change 
    import { css, cssVariants } from "../css/index.js";
    to 
    import { css } from "../css/index.js";
  • packages/css/src/rules/index.ts:113
    Replace 
    cssVariants(...)
    with 
    css.multiple(...)
  • packages/css/src/compat.ts:24
    Replace 
    cssVariants as styleVariants
    with 
    css.multiple as styleVariants

Once these are updated, the standalone cssVariants export removal from your main index.ts won’t break any internal or external code.

🤖 Prompt for AI Agents 
In packages/css/src/index.ts at line 28, remove the standalone export of
cssVariants and only export css and globalCss. Then, in
packages/css/src/rules/index.ts at line 11, update the import to remove
cssVariants and import only css from "../css/index.js". At line 113 in the same
file, replace all calls to cssVariants(...) with css.multiple(...). Finally, in
packages/css/src/compat.ts at line 24, replace the export or usage of
cssVariants as styleVariants with css.multiple as styleVariants. This ensures
all internal references use css.multiple consistently.

export { rules } from "./rules/index.js";
export type {
VariantStyle,
Expand Down