Skip to content

Chore: Seperate vanilla extract API to ./compat #219

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

Chore: Seperate vanilla extract API to ./compat #219

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/calm-heads-care.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
---

Separate vanilla extract API to `./compat`
12 changes: 6 additions & 6 deletions examples/react-swc/src/App.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand All @@ -18,7 +18,7 @@ const logoSpin = keyframes({
},
});

export const logo = style({
export const logo = css({
height: "6em",
padding: "1.5em",
willChange: "filter",
Expand All @@ -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",
});

18 changes: 9 additions & 9 deletions examples/react-swc/src/index.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
Expand All @@ -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",
});

2 changes: 1 addition & 1 deletion packages/babel/src/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function styledComponentPlugin(): PluginObj<PluginState> {

const recipeIdentifier = registerImportMethod(
callPath,
"recipe",
"rules",
"@mincho-js/css"
);

Expand Down
4 changes: 4 additions & 0 deletions packages/babel/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 10 additions & 0 deletions packages/css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
49 changes: 49 additions & 0 deletions packages/css/src/compat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
export type { Adapter, FileScope } from "@vanilla-extract/css";
export {
assignVars,
composeStyles,
createContainer,
createGlobalTheme,
createGlobalThemeContract,
createTheme,
createThemeContract,
createVar,
fallbackVar,
fontFace,
generateIdentifier,
globalFontFace,
globalKeyframes,
globalLayer,
keyframes,
layer
} from "@vanilla-extract/css";

export {
globalCss as globalStyle,
css as style,
cssVariants as styleVariants
} from "./css/index.js";

export type {
VariantStyle,
RulesVariants,
RecipeVariants,
RuntimeFn,
VariantGroups,
PatternOptions,
VariantSelection,
ComplexPropDefinitions,
PropTarget,
VariantDefinitions,
ConditionalVariants,
VariantObjectSelection,
ResolveComplex
} from "./rules/types.js";
export { rules as recipe } from "./rules/index.js";

export type {
CSSProperties,
ComplexCSSRule as ComplexStyleRule,
CSSRule as StyleRule,
GlobalCSSRule as GlobalStyleRule
} from "@mincho-js/transform-to-vanilla";
7 changes: 2 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 @@ -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>;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>,
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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",
Expand Down
19 changes: 3 additions & 16 deletions packages/css/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type {
export type {
CSSProperties,
ComplexCSSRule,
GlobalCSSRule,
Expand All @@ -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";
Comment on lines +28 to +29
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 removed exports are available in compat module.

The export reduction correctly removes Vanilla Extract aliases (globalStyle, style, styleVariants) and recipe/createRuntimeFn, aligning with the PR objective to separate these APIs. However, please ensure these removed functions are properly exported from the new ./compat module for backward compatibility.

🏁 Script executed:

#!/bin/bash
# Description: Verify that removed exports are available in the compat module
# Expected: compat.ts should export the removed aliases and functions

# Check if compat.ts exists and contains the expected exports
fd -t f "compat.ts" packages/css/src/ --exec cat {} \; | head -20

# Search for the removed function exports in compat module
rg -A 3 "export.*(?:globalStyle|style|styleVariants|recipe|createRuntimeFn)" packages/css/src/

Length of output: 699

Missing backward‐compat exports in the compat module

I didn’t find a compat.ts (or compat/index.ts) exporting the removed aliases and functions. To preserve backwards compatibility, please add or update that file under packages/css/src/ so it re‐exports:

  • globalStyle (alias for globalCss)
  • style (alias for css)
  • styleVariants (alias for cssVariants)
  • recipe (from ./rules)
  • createRuntimeFn (from ./rules/createRuntimeFn)

Example implementation:

// packages/css/src/compat.ts
export { globalCss as globalStyle, css as style, cssVariants as styleVariants } from "./css/index.js";
export { recipe } from "./rules/index.js";
export { createRuntimeFn } from "./rules/createRuntimeFn.js";

Please ensure this file is included in your package entrypoints so consumers relying on the old API continue to work.

🤖 Prompt for AI Agents 
In packages/css/src/compat.ts, create a new file that re-exports the
backward-compatible aliases and functions: export globalCss as globalStyle, css
as style, and cssVariants as styleVariants from "./css/index.js"; export recipe
from "./rules/index.js"; and export createRuntimeFn from
"./rules/createRuntimeFn.js". Then update the package entrypoints to include
this compat.ts file so that consumers relying on the old API continue to work
without issues.

export type {
VariantStyle,
RulesVariants,
Expand All @@ -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;
1 change: 0 additions & 1 deletion packages/css/src/rules/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,6 @@ export function rules<
}
);
}
export const recipe = rules;

function processPropObject<Target extends PropTarget>(
props: PropDefinition<Target>,
Expand Down
3 changes: 2 additions & 1 deletion packages/css/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down