folinhilo/defgov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mm

Browse Source
This commit is contained in:
folinhilo
2026-05-11 05:30:03 +08:00
parent eeda1e68e8
commit 33951a649b
48 changed files with 640 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/css/package.json
View File

@@ -30,10 +30,12 @@
"devDependencies": {
"@types/node": "^25.6.0",
"@vitejs/plugin-react": "^6.0.1",
"glob": "^13.0.6",
"tinyglobby": "^0.2.16",
"ts-node": "^10.9.2",
"typescript": "^6.0.3",
"vite": "^8.0.10"
"vite": "^8.0.10",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3"
},
"peerDependencies": {
"react": "^19",

8
packages/css/scripts/gen-index.ts
View File

@@ -1,6 +1,7 @@
import fs from "fs";
import path from "path";
import { globSync } from "glob";
// 1. 引入 tinyglobby
import { globSync } from "tinyglobby";
interface Config {
outputDir: string;
@@ -77,13 +78,12 @@ function generateIndexFile(config: Config) {
// ------ scanDirs forEach start ------------------------
config.scanDirs.forEach((dir) => {
// 2. 路径模式保持不变，tinyglobby 能够正确处理
const scanPattern = path.resolve(currentPath, dir, "**", "*.*");
const allFilePath = globSync(scanPattern, {
absolute: true,
windowsPathsNoEscape: true,
dot: false,
follow: true,
// 3. 移除了 windowsPathsNoEscape，tinyglobby 默认处理路径更智能
});
const validFiles = allFilePath.filter((filePath) => {

37
packages/css/src/index.css
View File

@@ -1,37 +0,0 @@
@import './base/root.css';
@import './utility/size-insensitive/align-content.css';
@import './utility/size-insensitive/align-items.css';
@import './utility/size-insensitive/align-self.css';
@import './utility/size-insensitive/animation.css';
@import './utility/size-insensitive/box-decoration.css';
@import './utility/size-insensitive/box-inside.css';
@import './utility/size-insensitive/box-sizing.css';
@import './utility/size-insensitive/brand.css';
@import './utility/size-insensitive/break-after.css';
@import './utility/size-insensitive/break-before.css';
@import './utility/size-insensitive/cursor.css';
@import './utility/size-insensitive/display.css';
@import './utility/size-insensitive/drop-shadow.css';
@import './utility/size-insensitive/flex-direction.css';
@import './utility/size-insensitive/flex-wrap.css';
@import './utility/size-insensitive/font-family.css';
@import './utility/size-insensitive/justify-content.css';
@import './utility/size-insensitive/justify-items.css';
@import './utility/size-insensitive/justify-self.css';
@import './utility/size-insensitive/overflow.css';
@import './utility/size-insensitive/overscroll-behavior.css';
@import './utility/size-insensitive/position.css';
@import './utility/size-insensitive/screen-reader.css';
@import './utility/size-insensitive/theme.css';
@import './utility/size-insensitive/user-select.css';
@import './utility/size-insensitive/z-index.css';
@import './utility/size-sensitive/border-radius.css';
@import './utility/size-sensitive/font-size.css';
@import './utility/size-sensitive/font-weight.css';
@import './utility/size-sensitive/gap.css';
@import './utility/size-sensitive/height.css';
@import './utility/size-sensitive/margin-block.css';
@import './utility/size-sensitive/margin-inline.css';
@import './utility/size-sensitive/padding-long.css';
@import './utility/size-sensitive/padding-short.css';
@import './utility/size-sensitive/width.css';

5
packages/css/src/index.ts
View File

@@ -1,4 +1 @@
import "./index.css";
export * from "./utils/cpm.ts";
export * from "./utils/cvr.ts";
export * from "./utils/prefix-list.ts";
import './index.css'

89
packages/css/src/recipe/itemSizeRecipe.ts Normal file
View File

@@ -0,0 +1,89 @@
import { cvr } from "../utils/cvr";
export const itemSizeRecipe = cvr({
base: "relative select-none flex flex-nowrap justify-center items-center",
variants: {
size: {
xs: "text-xs h-item-xs gap-xs px-xs",
sm: "text-sm h-item-sm gap-sm px-sm",
md: "text-md h-item-md gap-md px-md",
lg: "text-lg h-item-lg gap-lg px-lg",
xl: "text-xl h-item-xl gap-xl px-xl",
"2xl": "text-2xl h-item-2xl gap-2xl px-2xl",
},
shape: {
square: "rounded-none",
rounded: "",
circle: "rounded-full",
},
iconOnly: {
true: "px-none",
false: "",
},
},
compoundVariants: [
{ iconOnly: false, size: "xs", class: "px-xs" },
{ iconOnly: false, size: "sm", class: "px-sm" },
{ iconOnly: false, size: "md", class: "px-md" },
{ iconOnly: false, size: "lg", class: "px-lg" },
{ iconOnly: false, size: "xl", class: "px-xl" },
{ iconOnly: false, size: "2xl", class: "px-2xl" },
{ shape: "rounded", size: "xs", class: "rounded-sm" },
{
shape: "rounded",
size: "sm",
class: "rounded-md",
},
{
shape: "rounded",
size: "md",
class: "rounded-lg",
},
{
shape: "rounded",
size: "lg",
class: "rounded-xl",
},
{
shape: "rounded",
size: "xl",
class: "rounded-2xl",
},
{
shape: "rounded",
size: "2xl",
class: "rounded-3xl",
},
// --------------------------------------------------
{
iconOnly: true,
size: "xs",
class: "w-item-xs",
},
{
iconOnly: true,
size: "sm",
class: "w-item-sm",
},
{
iconOnly: true,
size: "md",
class: "w-item-md",
},
{
iconOnly: true,
size: "lg",
class: "w-item-lg",
},
{
iconOnly: true,
size: "xl",
class: "w-item-xl",
},
{
iconOnly: true,
size: "2xl",
class: "w-item-2xl",
},
],
});

6
packages/css/src/utility/size-insensitive/flex-wrap.css
View File

@@ -1,13 +1,13 @@
@layer utility {
.flex-wrap-nowrap {
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap-wrap {
.flex-wrap {
flex-wrap: wrap;
}
.flex-wrap-wrap-reverse {
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
}

2
packages/css/src/utility/size-sensitive/height.css
View File

@@ -25,9 +25,11 @@
}
/* -------------- */
.h-inline-xs {
/* 16px */
height: calc(var(--font-size-xs) * var(--line-height-xs));
}
.h-inline-sm {
/* 20px */
height: calc(var(--font-size-sm) * var(--line-height-sm));
}
.h-inline-md {

4
packages/css/src/utility/size-sensitive/padding-short.css
View File

@@ -3,11 +3,11 @@
padding-inline: 0px;
}
.px-xs {
/* 6px */
/* 4px, 24px - 16px = 8px */
padding-inline: var(--padding-xs);
}
.px-sm {
/* 8px */
/* 4px, 28px - 20px = 8px */
padding-inline: var(--padding-sm);
}
.px-md {

11
packages/css/src/utils/cpm.ts
View File

@@ -14,23 +14,22 @@ function matchLongestPrefix(cls: string, prefixList: string[]): string {
}
// 重载 1
export function cpm(...classes: Array<string | readonly string[]>): string;
export function cpm(...classes: Array<string | string[]>): string;
// 重载 2
export function cpm(
options: { extendedPrefixList?: string[] },
...classes: Array<string | readonly string[]>
...classes: Array<string | string[]>
): string;
export function cpm(
arg1: { extendedPrefixList?: string[] } | string | readonly string[],
...rest: Array<string | readonly string[]>
arg1: { extendedPrefixList?: string[] } | string | string[],
...rest: Array<string | string[]>
): string {
const map = new Map<string, string>();
// ✅ 明确拆分 options / classes
let options: { extendedPrefixList?: string[] } = {};
let classes: Array<string | readonly string[]>;
let classes: Array<string | string[]>;
if (typeof arg1 === "object" && !Array.isArray(arg1)) {
options = arg1 as { extendedPrefixList?: string[] };

24
packages/css/src/utils/cvr.ts
View File

@@ -1,15 +1,21 @@
import { cpm } from "./cpm";
// 1. 允许变体值的键可以是字符串，也可以是布尔值（为了开发体验，允许传 true/false）
// 但底层存储我们统一视为字符串处理
type VariantValue = string | boolean;
type VariantsConfig<V extends Record<string, Record<string, string>>> = {
base?: string;
variants?: V;
compoundVariants?: Array<
Partial<{ [K in keyof V]: keyof V[K] }> & { class: string }
// 修改这里：允许 compoundVariants 的值是 VariantValue，而不仅仅是 keyof V[K]
Partial<{ [K in keyof V]: VariantValue }> & { class: string }
>;
};
// 2. 修改 Props 定义，允许传入 boolean，因为 JS 对象 key 访问时，boolean 会被转为 string
type VariantProps<V extends Record<string, Record<string, string>>> = Partial<{
[K in keyof V]: keyof V[K];
[K in keyof V]: keyof V[K] | boolean;
}>;
export function cvr<V extends Record<string, Record<string, string>>>(
@@ -21,10 +27,12 @@ export function cvr<V extends Record<string, Record<string, string>>>(
if (config.base) classes.push(config.base);
if (config.variants) {
for (const [key, map] of Object.entries(config.variants) as any) {
for (const [key, map] of Object.entries(config.variants)) {
const value = props[key];
if (value && map[value]) {
classes.push(map[value]);
// 运行时修复：如果传入的是 boolean true，需要转为字符串 "true" 才能匹配 map
const stringifiedValue = String(value);
if (value && map[stringifiedValue]) {
classes.push(map[stringifiedValue]);
}
}
}
@@ -33,7 +41,11 @@ export function cvr<V extends Record<string, Record<string, string>>>(
for (const cv of config.compoundVariants) {
const match = Object.entries(cv)
.filter(([k]) => k !== "class")
.every(([k, v]) => props[k] === v);
.every(([k, v]) => {
const propValue = props[k as keyof V];
// 运行时修复：统一转为字符串比较，确保 "true" === true 能匹配（虽然不建议混用，但要兼容）
return String(propValue) === String(v);
});
if (match && cv.class) {
classes.push(cv.class);

2
packages/css/src/utils/prefix-list.ts
View File

@@ -13,7 +13,7 @@ export const defaultPrefixList = [
"cursor",
"display",
"flex-direction",
"flex-wrap",
"flex",
"font-family",
"font-weight",
"text",

4
packages/css/tsconfig.build.json
View File

@@ -4,9 +4,9 @@
"noEmit": false,
"emitDeclarationOnly": true,
"declaration": true,
"declarationDir": "./dist",
"rootDir": "./src",
"outDir": "./dist",
"declarationDir": "./dist"
"outDir": "./dist"
},
"include": ["src"],
"exclude": [