teacss 0.1.20 → 0.2.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "teacss",
-  "version": "0.1.20",
+  "version": "0.2.0-alpha.1",
   "license": "MIT",
   "description": "Teacss aims to provide a one-stop solution for writing stylesheet.",
   "author": "Billgo <hi@billgo.me>",
@@ -63,7 +63,7 @@
     },
     "./*": "./*"
   },
-  "files": ["dist", "README.md"],
+  "files": ["dist", "types", "README.md"],
   "scripts": {
     "prepublishOnly": "bun run build",
     "build": "bunx rimraf dist && bun run build:esm && bun run build:bun && rollup -c",
@@ -95,36 +95,36 @@
     "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.0",
     "@devjskit/biome-config": "^0.1.6",
     "@devjskit/copy-files": "^1.0.0",
     "@devjskit/cross-env": "^1.0.0",
     "@devjskit/kill-port": "^1.0.0",
     "@devjskit/rimraf": "^1.0.0",
-    "@happy-dom/global-registrator": "^15.7.3",
-    "@rsbuild/core": "^0.7.10",
-    "@rsbuild/plugin-react": "^0.7.10",
-    "@rsbuild/plugin-svgr": "^0.7.10",
-    "@tanstack/react-query": "^5.55.4",
-    "@tanstack/react-query-devtools": "^5.55.4",
+    "@happy-dom/global-registrator": "^15.7.4",
+    "@rsbuild/core": "^1.0.4",
+    "@rsbuild/plugin-react": "^1.0.2",
+    "@rsbuild/plugin-svgr": "^1.0.2",
+    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query-devtools": "^5.56.2",
     "@types/bun": "^1.1.9",
     "@types/postcss-import": "^14.0.3",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@types/web": "^0.0.155",
+    "@types/web": "^0.0.163",
     "cpy-cli": "^5.0.0",
     "cypress": "^13.14.2",
     "cypress-real-events": "^1.13.0",
     "ky": "^1.7.2",
     "nprogress": "^0.2.0",
-    "postcss": "^8.4.45",
+    "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-intl": "^6.6.8",
     "react-router-dom": "^6.26.2",
-    "rollup": "^4.21.2",
+    "rollup": "^4.21.3",
     "rollup-plugin-dts": "^6.1.1",
     "styled-components": "^6.1.13",
     "stylelint": "^16.9.0",

package/types/config.d.ts

@@ -0,0 +1,218 @@
+import type * as CSSUtil from "./css-util";
+import type Stitches from "./stitches";
+
+/** Configuration Interface */
+declare namespace ConfigType {
+  /** Prefix interface. */
+  export type Prefix<T = ""> = T extends string ? T : string;
+
+  /** Media interface. */
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  export type Media<T = {}> = {
+    [name in keyof T]: T[name] extends string ? T[name] : string;
+  };
+
+  /** Theme interface. */
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  export type Theme<T = {}> = {
+    borderStyles?: { [token in number | string]: boolean | number | string };
+    borderWidths?: { [token in number | string]: boolean | number | string };
+    colors?: { [token in number | string]: boolean | number | string };
+    fonts?: { [token in number | string]: boolean | number | string };
+    fontSizes?: { [token in number | string]: boolean | number | string };
+    fontWeights?: { [token in number | string]: boolean | number | string };
+    letterSpacings?: { [token in number | string]: boolean | number | string };
+    lineHeights?: { [token in number | string]: boolean | number | string };
+    radii?: { [token in number | string]: boolean | number | string };
+    shadows?: { [token in number | string]: boolean | number | string };
+    sizes?: { [token in number | string]: boolean | number | string };
+    space?: { [token in number | string]: boolean | number | string };
+    transitions?: { [token in number | string]: boolean | number | string };
+    zIndices?: { [token in number | string]: boolean | number | string };
+  } & {
+    [Scale in keyof T]: {
+      [Token in keyof T[Scale]]: T[Scale][Token] extends boolean | number | string ? T[Scale][Token] : boolean | number | string;
+    };
+  };
+
+  /** ThemeMap interface. */
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  export type ThemeMap<T = {}> = {
+    [Property in keyof T]: T[Property] extends string ? T[Property] : string;
+  };
+
+  /** Utility interface. */
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  export type Utils<T = {}> = {
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    [Property in keyof T]: T[Property] extends (value: infer V) => {}
+      ?
+          | T[Property]
+          | ((value: V) => {
+              [K in keyof CSSUtil.CSSProperties]?: CSSUtil.CSSProperties[K] | V;
+            })
+      : never;
+  };
+}
+
+/** Default ThemeMap. */
+export interface DefaultThemeMap {
+  gap: "space";
+  gridGap: "space";
+  columnGap: "space";
+  gridColumnGap: "space";
+  rowGap: "space";
+  gridRowGap: "space";
+  inset: "space";
+  insetBlock: "space";
+  insetBlockEnd: "space";
+  insetBlockStart: "space";
+  insetInline: "space";
+  insetInlineEnd: "space";
+  insetInlineStart: "space";
+  margin: "space";
+  marginTop: "space";
+  marginRight: "space";
+  marginBottom: "space";
+  marginLeft: "space";
+  marginBlock: "space";
+  marginBlockEnd: "space";
+  marginBlockStart: "space";
+  marginInline: "space";
+  marginInlineEnd: "space";
+  marginInlineStart: "space";
+  padding: "space";
+  paddingTop: "space";
+  paddingRight: "space";
+  paddingBottom: "space";
+  paddingLeft: "space";
+  paddingBlock: "space";
+  paddingBlockEnd: "space";
+  paddingBlockStart: "space";
+  paddingInline: "space";
+  paddingInlineEnd: "space";
+  paddingInlineStart: "space";
+  scrollMargin: "space";
+  scrollMarginTop: "space";
+  scrollMarginRight: "space";
+  scrollMarginBottom: "space";
+  scrollMarginLeft: "space";
+  scrollMarginBlock: "space";
+  scrollMarginBlockEnd: "space";
+  scrollMarginBlockStart: "space";
+  scrollMarginInline: "space";
+  scrollMarginInlineEnd: "space";
+  scrollMarginInlineStart: "space";
+  scrollPadding: "space";
+  scrollPaddingTop: "space";
+  scrollPaddingRight: "space";
+  scrollPaddingBottom: "space";
+  scrollPaddingLeft: "space";
+  scrollPaddingBlock: "space";
+  scrollPaddingBlockEnd: "space";
+  scrollPaddingBlockStart: "space";
+  scrollPaddingInline: "space";
+  scrollPaddingInlineEnd: "space";
+  scrollPaddingInlineStart: "space";
+  top: "space";
+  right: "space";
+  bottom: "space";
+  left: "space";
+
+  fontSize: "fontSizes";
+
+  background: "colors";
+  backgroundColor: "colors";
+  backgroundImage: "colors";
+  borderImage: "colors";
+  border: "colors";
+  borderBlock: "colors";
+  borderBlockEnd: "colors";
+  borderBlockStart: "colors";
+  borderBottom: "colors";
+  borderBottomColor: "colors";
+  borderColor: "colors";
+  borderInline: "colors";
+  borderInlineEnd: "colors";
+  borderInlineStart: "colors";
+  borderLeft: "colors";
+  borderLeftColor: "colors";
+  borderRight: "colors";
+  borderRightColor: "colors";
+  borderTop: "colors";
+  borderTopColor: "colors";
+  caretColor: "colors";
+  color: "colors";
+  columnRuleColor: "colors";
+  outline: "colors";
+  outlineColor: "colors";
+  fill: "colors";
+  stroke: "colors";
+  textDecorationColor: "colors";
+
+  fontFamily: "fonts";
+
+  fontWeight: "fontWeights";
+  lineHeight: "lineHeights";
+
+  letterSpacing: "letterSpacings";
+
+  blockSize: "sizes";
+  minBlockSize: "sizes";
+  maxBlockSize: "sizes";
+  inlineSize: "sizes";
+  minInlineSize: "sizes";
+  maxInlineSize: "sizes";
+  width: "sizes";
+  minWidth: "sizes";
+  maxWidth: "sizes";
+  height: "sizes";
+  minHeight: "sizes";
+  maxHeight: "sizes";
+  flexBasis: "sizes";
+  gridTemplateColumns: "sizes";
+  gridTemplateRows: "sizes";
+
+  borderWidth: "borderWidths";
+  borderTopWidth: "borderWidths";
+  borderLeftWidth: "borderWidths";
+  borderRightWidth: "borderWidths";
+  borderBottomWidth: "borderWidths";
+
+  borderStyle: "borderStyles";
+  borderTopStyle: "borderStyles";
+  borderLeftStyle: "borderStyles";
+  borderRightStyle: "borderStyles";
+  borderBottomStyle: "borderStyles";
+
+  borderRadius: "radii";
+  borderTopLeftRadius: "radii";
+  borderTopRightRadius: "radii";
+  borderBottomRightRadius: "radii";
+  borderBottomLeftRadius: "radii";
+
+  boxShadow: "shadows";
+  textShadow: "shadows";
+
+  transition: "transitions";
+
+  zIndex: "zIndices";
+}
+
+/** Returns a function used to create a new Stitches interface. */
+export type CreateStitches = <
+  Prefix extends string = "",
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  Media extends {} = {},
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  Theme extends {} = {},
+  ThemeMap extends {} = DefaultThemeMap,
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  Utils extends {} = {},
+>(config?: {
+  prefix?: ConfigType.Prefix<Prefix>;
+  media?: ConfigType.Media<Media>;
+  theme?: ConfigType.Theme<Theme>;
+  themeMap?: ConfigType.ThemeMap<ThemeMap>;
+  utils?: ConfigType.Utils<Utils>;
+}) => Stitches<Prefix, Media, Theme, ThemeMap, Utils>;

package/types/css-util.d.ts

@@ -0,0 +1,79 @@
+import type * as Config from "./config";
+import type * as Native from "./css";
+import type * as ThemeUtil from "./theme";
+import type * as Util from "./util";
+
+export type { Native };
+
+/** CSS style declaration object. */
+export interface CSSProperties extends Native.StandardLonghandProperties, Native.StandardShorthandProperties, Native.SvgProperties {}
+
+type ValueByPropertyName<PropertyName> = PropertyName extends keyof CSSProperties ? CSSProperties[PropertyName] : never;
+
+type TokenByPropertyName<PropertyName, Theme, ThemeMap> = PropertyName extends keyof ThemeMap ? TokenByScaleName<ThemeMap[PropertyName], Theme> : never;
+
+type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme ? Util.Prefixed<"$", keyof Theme[ScaleName]> : never;
+
+/** Returns a Style interface, leveraging the given media and style map. */
+// biome-ignore lint/complexity/noBannedTypes: <explanation>
+export type CSS<Media = {}, Theme = {}, ThemeMap = Config.DefaultThemeMap, Utils = {}> = {
+  // nested at-rule css styles
+  [K in Util.Prefixed<"@", keyof Media>]?: CSS<Media, Theme, ThemeMap, Utils>;
+} & {
+  // known property styles
+  [K in keyof CSSProperties]?:
+    | ValueByPropertyName<K>
+    | TokenByPropertyName<K, Theme, ThemeMap>
+    | Native.Globals
+    | ThemeUtil.ScaleValue
+    | Util.Index
+    | undefined;
+} & {
+  // known utility styles
+  [K in keyof Utils as K extends keyof CSSProperties ? never : K]?: Utils[K] extends (arg: infer P) => any
+    ?
+        | (P extends any[]
+            ?
+                | ($$PropertyValue extends keyof P[0]
+                    ?
+                        | ValueByPropertyName<P[0][$$PropertyValue]>
+                        | TokenByPropertyName<P[0][$$PropertyValue], Theme, ThemeMap>
+                        | Native.Globals
+                        | ThemeUtil.ScaleValue
+                        | undefined
+                    : $$ScaleValue extends keyof P[0]
+                      ? TokenByScaleName<P[0][$$ScaleValue], Theme> | { scale: P[0][$$ScaleValue] } | undefined
+                      : never)[]
+                | P
+            : $$PropertyValue extends keyof P
+              ? ValueByPropertyName<P[$$PropertyValue]> | TokenByPropertyName<P[$$PropertyValue], Theme, ThemeMap> | Native.Globals | undefined
+              : $$ScaleValue extends keyof P
+                ? TokenByScaleName<P[$$ScaleValue], Theme> | { scale: P[$$ScaleValue] } | undefined
+                : never)
+        | P
+    : never;
+} & {
+  // known theme styles
+  [K in keyof ThemeMap as K extends keyof CSSProperties ? never : K extends keyof Utils ? never : K]?: Native.Globals | Util.Index | undefined;
+} & {
+  // unknown css declaration styles
+  /** Unknown property. */
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  [K: string]: number | string | CSS<Media, Theme, ThemeMap, Utils> | {} | undefined;
+};
+
+/** Unique symbol used to reference a property value. */
+export declare const $$PropertyValue: any;
+
+/** Unique symbol used to reference a property value. */
+export type $$PropertyValue = typeof $$PropertyValue;
+
+/** Unique symbol used to reference a token value. */
+export declare const $$ScaleValue: unique symbol;
+
+/** Unique symbol used to reference a token value. */
+export type $$ScaleValue = typeof $$ScaleValue;
+
+export declare const $$ThemeValue: unique symbol;
+
+export type $$ThemeValue = typeof $$ThemeValue;