diff --git a/.changeset/calm-heads-care.md b/.changeset/calm-heads-care.md new file mode 100644 index 00000000..19e9cdea --- /dev/null +++ b/.changeset/calm-heads-care.md @@ -0,0 +1,6 @@ +--- +"@mincho-js/babel": minor +"@mincho-js/css": minor +--- + +Separate vanilla extract API to `./compat` diff --git a/examples/react-swc/src/App.css.ts b/examples/react-swc/src/App.css.ts index 2ad67e83..b1bfa68b 100644 --- a/examples/react-swc/src/App.css.ts +++ b/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", }); diff --git a/examples/react-swc/src/index.css.ts b/examples/react-swc/src/index.css.ts index 729e1817..2b31b507 100644 --- a/examples/react-swc/src/index.css.ts +++ b/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,19 +20,19 @@ 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", @@ -40,12 +40,12 @@ globalStyle("body", { 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", }); diff --git a/packages/babel/src/styled.ts b/packages/babel/src/styled.ts index 27e053f9..47009d88 100644 --- a/packages/babel/src/styled.ts +++ b/packages/babel/src/styled.ts @@ -55,7 +55,7 @@ export function styledComponentPlugin(): PluginObj { const recipeIdentifier = registerImportMethod( callPath, - "recipe", + "rules", "@mincho-js/css" ); diff --git a/packages/babel/src/utils.ts b/packages/babel/src/utils.ts index 4c7b03b1..3ecf473a 100644 --- a/packages/babel/src/utils.ts +++ b/packages/babel/src/utils.ts @@ -70,6 +70,10 @@ export function getNearestIdentifier(path: NodePath) { export const extractionAPIs = [ // @mincho-js/css "mincho$", + "css", + "cssVariants", + "globalCss", + "rules", // @vanilla-extract/css "style", "styleVariants", diff --git a/packages/css/package.json b/packages/css/package.json index 7befa63d..52287f90 100644 --- a/packages/css/package.json +++ b/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", diff --git a/packages/css/src/compat.ts b/packages/css/src/compat.ts new file mode 100644 index 00000000..fe092080 --- /dev/null +++ b/packages/css/src/compat.ts @@ -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"; diff --git a/packages/css/src/css/index.ts b/packages/css/src/css/index.ts index 7df1ba3f..b1c5ee38 100644 --- a/packages/css/src/css/index.ts +++ b/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; @@ -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, @@ -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", diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts index 772abd7f..cc58bfad 100644 --- a/packages/css/src/index.ts +++ b/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; diff --git a/packages/css/src/rules/index.ts b/packages/css/src/rules/index.ts index 382f25ab..50561bf5 100644 --- a/packages/css/src/rules/index.ts +++ b/packages/css/src/rules/index.ts @@ -184,7 +184,6 @@ export function rules< } ); } -export const recipe = rules; function processPropObject( props: PropDefinition, diff --git a/packages/css/vite.config.ts b/packages/css/vite.config.ts index 72c89f45..4a0b62a5 100644 --- a/packages/css/vite.config.ts +++ b/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",