diff --git a/.vscode/settings.json b/.vscode/settings.json index 6800d1c..485e0c4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,9 @@ { "files.associations": { - "packages/ui-web/**/*.css": "tailwindcss" + "packages/ui-web-tw/**/*.css": "tailwindcss" + }, + "tailwindCSS.experimental.configFile": { + "packages/ui-web-tw/src/index.css": "packages/ui-web-tw/src/**" }, "editor.quickSuggestions": { "strings": "on" diff --git a/packages/ui-web/src/componnets/button/ButtonIcon.tsx b/packages/ui-web/src/componnets/button/ButtonIcon.tsx index f7ff592..93df617 100644 --- a/packages/ui-web/src/componnets/button/ButtonIcon.tsx +++ b/packages/ui-web/src/componnets/button/ButtonIcon.tsx @@ -1,9 +1,7 @@ -import { ComponentPropsWithRef } from "react"; +import { Slot } from "../../utils/Slot"; -type ButtonIconProps = ComponentPropsWithRef<"span">; - -export const ButtonIcon = (props: ButtonIconProps) => { +export const ButtonIcon = (props: any) => { const { children, ...rest } = props; - return {children}; + return {children}; }; ButtonIcon.displayName = "ButtonIcon"; diff --git a/packages/ui-web/src/componnets/button/ButtonLoading.tsx b/packages/ui-web/src/componnets/button/ButtonLoading.tsx index bb693ca..af1932a 100644 --- a/packages/ui-web/src/componnets/button/ButtonLoading.tsx +++ b/packages/ui-web/src/componnets/button/ButtonLoading.tsx @@ -1,9 +1,7 @@ -import { ComponentPropsWithRef } from "react"; +import { Slot } from "../../utils/Slot"; -type ButtonLoadingProps = ComponentPropsWithRef<"span">; - -export const ButtonLoading = (props: ButtonLoadingProps) => { +export const ButtonLoading = (props: any) => { const { children, ...rest } = props; - return {children}; + return {children}; }; ButtonLoading.displayName = "ButtonLoading"; diff --git a/packages/ui-web/src/styles/base/root.css b/packages/ui-web/src/styles/base/root.css index 36feec1..4f36dba 100644 --- a/packages/ui-web/src/styles/base/root.css +++ b/packages/ui-web/src/styles/base/root.css @@ -396,6 +396,6 @@ --padding-xl: calc(var(--spacing) * 2); --padding-2xl: calc(var(--spacing) * 2); - --drop-shadow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.12)) + --drop-shadow-md: drop-shadow(0 0 4px rgba(0, 0, 0, 0.12)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14)); } diff --git a/packages/ui-web/src/styles/recipe/inlineSizeRecipe.ts b/packages/ui-web/src/styles/recipe/inlineSizeRecipe.ts new file mode 100644 index 0000000..3e68858 --- /dev/null +++ b/packages/ui-web/src/styles/recipe/inlineSizeRecipe.ts @@ -0,0 +1,15 @@ +import { cvr } from "../utils/cvr"; + +export const inlineSizeRecipe = cvr({ + base: "flex flex-nowrap justify-center items-center", + variants: { + size: { + xs: "text-xs h-inline-xs gap-xs", + sm: "text-sm h-inline-sm gap-sm", + md: "text-md h-inline-md gap-md", + lg: "text-lg h-inline-lg gap-lg", + xl: "text-xl h-inline-xl gap-xl", + "2xl": "text-2xl h-inline-2xl gap-2xl", + }, + }, +}); diff --git a/packages/ui-web/src/styles/recipe/itemSizeRecipe.ts b/packages/ui-web/src/styles/recipe/itemSizeRecipe.ts index 3b1b4da..68ccf6b 100644 --- a/packages/ui-web/src/styles/recipe/itemSizeRecipe.ts +++ b/packages/ui-web/src/styles/recipe/itemSizeRecipe.ts @@ -1,7 +1,7 @@ import { cvr } from "../utils/cvr"; export const itemSizeRecipe = cvr({ - base: "relative select-none flex flex-nowrap justify-center items-center", + base: "relative select-none display-flex flex-nowrap justify-center items-center", variants: { size: { xs: "text-xs h-item-xs gap-xs px-xs", @@ -29,6 +29,7 @@ export const itemSizeRecipe = cvr({ { 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", @@ -54,7 +55,7 @@ export const itemSizeRecipe = cvr({ size: "2xl", class: "rounded-3xl", }, - // -------------------------------------------------- + // ================================================== { iconOnly: true, size: "xs", diff --git a/packages/ui-web/src/styles/utility/size-insensitive/align-content.css b/packages/ui-web/src/styles/utility/size-insensitive/align-content.css index 288a3e4..0167e53 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/align-content.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/align-content.css @@ -1,37 +1,37 @@ @layer utility { - .align-content-normal { + .align-content--normal { align-content: normal; } - .align-content-center { + .align-content--center { align-content: center; } - .align-content-start { + .align-content--start { align-content: flex-start; } - .align-content-end { + .align-content--end { align-content: flex-end; } - .align-content-between { + .align-content--between { align-content: space-between; } - .align-content-around { + .align-content--around { align-content: space-around; } - .align-content-evenly { + .align-content--evenly { align-content: space-evenly; } - .align-content-baseline { + .align-content--baseline { align-content: baseline; } - .align-content-stretch { + .align-content--stretch { align-content: stretch; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/align-items.css b/packages/ui-web/src/styles/utility/size-insensitive/align-items.css index 7153426..0ed767c 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/align-items.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/align-items.css @@ -1,33 +1,33 @@ @layer utility { - .items-start { + .items--start { align-items: flex-start; } - .items-end { + .items--end { align-items: flex-end; } - .items-end-safe { + .items-end--safe { align-items: safe flex-end; } - .items-center { + .items--center { align-items: center; } - .items-center-safe { + .items--center-safe { align-items: safe center; } - .items-baseline { + .items--baseline { align-items: baseline; } - .items-baseline-last { + .items--baseline-last { align-items: last baseline; } - .items-stretch { + .items--stretch { align-items: stretch; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/align-self.css b/packages/ui-web/src/styles/utility/size-insensitive/align-self.css index 493dc0c..514ff39 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/align-self.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/align-self.css @@ -1,37 +1,37 @@ @layer utility { - .align-self-auto { + .align-self--auto { align-self: auto; } - .align-self-start { + .align-self--start { align-self: flex-start; } - .align-self-end { + .align-self--end { align-self: flex-end; } - .align-self-end-safe { + .align-self--end-safe { align-self: safe flex-end; } - .align-self-center { + .align-self--center { align-self: center; } - .align-self-center-safe { + .align-self--center-safe { align-self: safe center; } - .align-self-stretch { + .align-self--stretch { align-self: stretch; } - .align-self-baseline { + .align-self--baseline { align-self: baseline; } - .align-self-baseline-last { + .align-self--baseline-last { align-self: last baseline; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/animation.css b/packages/ui-web/src/styles/utility/size-insensitive/animation.css index 563c38f..bb6ab06 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/animation.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/animation.css @@ -1,5 +1,5 @@ @layer utility { - .animate-fade-in-down { + .animate--fade-in-down { animation: var(--animate-fade-in-down); @keyframes fade-in-down { @@ -13,7 +13,7 @@ } } } - .animate-fade-out-down { + .animate--fade-out-down { animation: var(--animate-fade-out-down); } @@ -27,7 +27,7 @@ transform: translate3d(0, 100%, 0); } } - .animate-fade-in-up { + .animate--fade-in-up { animation: var(--animate-fade-in-up); } @@ -41,7 +41,7 @@ transform: translate3d(0, 0, 0); } } - .animate-fade-out-up { + .animate--fade-out-up { animation: var(--animate-fade-out-up); } @@ -55,7 +55,7 @@ transform: translate3d(0, -100%, 0); } } - .animate-spin { + .animate--spin { animation: var(--animate-spin); @keyframes spin { @@ -64,7 +64,7 @@ } } } - .animate-ping { + .animate--ping { animation: var(--animate-ping); @keyframes ping { @@ -75,7 +75,7 @@ } } } - .animate-pulse { + .animate--pulse { animation: var(--animate-pulse); @keyframes pulse { @@ -84,7 +84,7 @@ } } } - .animate-bounce { + .animate--bounce { animation: var(--animate-bounce); /* bounce 1s infinite */ @keyframes bounce { @@ -99,7 +99,7 @@ } } } - .animate-none { + .animate--none { animation: none; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/box-decoration.css b/packages/ui-web/src/styles/utility/size-insensitive/box-decoration.css index c7d0dd5..36545b5 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/box-decoration.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/box-decoration.css @@ -1,9 +1,9 @@ @layer utility { - .box-decoration-clone { + .box-decoration--clone { box-decoration-break: clone; } - .box-decoration-slice { + .box-decoration--slice { box-decoration-break: slice; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/box-inside.css b/packages/ui-web/src/styles/utility/size-insensitive/box-inside.css index 6701b78..c8e338e 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/box-inside.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/box-inside.css @@ -1,17 +1,17 @@ @layer utility { - .break-inside-auto { + .break-inside--auto { break-inside: auto; } - .break-inside-avoid { + .break-inside--avoid { break-inside: avoid; } - .break-inside-avoid-page { + .break-inside--avoid-page { break-inside: avoid-page; } - .break-inside-avoid-column { + .break-inside--avoid-column { break-inside: avoid-column; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/box-sizing.css b/packages/ui-web/src/styles/utility/size-insensitive/box-sizing.css index 49bf665..f8c8b9e 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/box-sizing.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/box-sizing.css @@ -1,9 +1,9 @@ @layer utility { - .box-sizing-border { + .box-sizing--border { box-sizing: border-box; } - .box-sizing-content { + .box-sizing--content { box-sizing: content-box; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/brand.css b/packages/ui-web/src/styles/utility/size-insensitive/brand.css index 78684e6..b34b0fe 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/brand.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/brand.css @@ -1,5 +1,5 @@ @layer utility { - .brand-info { + .brand--info { --brand-bg: var(--info-bg); --brand-bg-hover: var(--info-bg-hover); --brand-bg-active: var(--info-bg-active); @@ -7,7 +7,7 @@ --brand-bg-low-hover: var(--info-bg-low-hover); --brand-bg-low-active: var(--info-bg-low-active); } - .brand-danger { + .brand--danger { --brand-bg: var(--danger-bg); --brand-bg-hover: var(--danger-bg-hover); --brand-bg-active: var(--danger-bg-active); @@ -15,7 +15,7 @@ --brand-bg-low-hover: var(--danger-bg-low-hover); --brand-bg-low-active: var(--danger-bg-low-active); } - .brand-success { + .brand--success { --brand-bg: var(--success-bg); --brand-bg-hover: var(--success-bg-hover); --brand-bg-active: var(--success-bg-active); @@ -23,7 +23,7 @@ --brand-bg-low-hover: var(--success-bg-low-hover); --brand-bg-low-active: var(--success-bg-low-active); } - .brand-warning { + .brand--warning { --brand-bg: var(--warning-bg); --brand-bg-hover: var(--warning-bg-hover); --brand-bg-active: var(--warning-bg-active); @@ -31,7 +31,7 @@ --brand-bg-low-hover: var(--warning-bg-low-hover); --brand-bg-low-active: var(--warning-bg-low-active); } - .brand-default { + .brand--default { --brand-bg: var(--default-bg); --brand-bg-hover: var(--default-bg-hover); --brand-bg-active: var(--default-bg-active); diff --git a/packages/ui-web/src/styles/utility/size-insensitive/break-after.css b/packages/ui-web/src/styles/utility/size-insensitive/break-after.css index 4b06b39..59e545e 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/break-after.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/break-after.css @@ -1,33 +1,33 @@ @layer utility { - .break-after-auto { + .break-after--auto { break-after: auto; } - .break-after-avoid { + .break-after--avoid { break-after: avoid; } - .break-after-all { + .break-after--all { break-after: all; } - .break-after-avoid-page { + .break-after--avoid-page { break-after: avoid-page; } - .break-after-page { + .break-after--page { break-after: page; } - .break-after-left { + .break-after--left { break-after: left; } - .break-after-right { + .break-after--right { break-after: right; } - .break-after-column { + .break-after--column { break-after: column; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/break-before.css b/packages/ui-web/src/styles/utility/size-insensitive/break-before.css index 6e8982e..cab23cd 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/break-before.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/break-before.css @@ -1,33 +1,33 @@ @layer utility { - .break-before-auto { + .break-before--auto { break-before: auto; } - .break-before-avoid { + .break-before--avoid { break-before: avoid; } - .break-before-all { + .break-before--all { break-before: all; } - .break-before-avoid-page { + .break-before--avoid-page { break-before: avoid-page; } - .break-before-page { + .break-before--page { break-before: page; } - .break-before-left { + .break-before--left { break-before: left; } - .break-before-right { + .break-before--right { break-before: right; } - .break-before-column { + .break-before--column { break-before: column; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/cursor.css b/packages/ui-web/src/styles/utility/size-insensitive/cursor.css index 5a53e4a..6f552df 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/cursor.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/cursor.css @@ -1,111 +1,111 @@ @layer utility { /* ===== 基础光标 ===== */ - .cursor-auto { + .cursor--auto { cursor: auto; } - .cursor-default { + .cursor--default { cursor: default; } - .cursor-pointer { + .cursor--pointer { cursor: pointer; } - .cursor-wait { + .cursor--wait { cursor: wait; } - .cursor-text { + .cursor--text { cursor: text; } - .cursor-move { + .cursor--move { cursor: move; } - .cursor-help { + .cursor--help { cursor: help; } - .cursor-not-allowed { + .cursor--not-allowed { cursor: not-allowed; } /* ===== 拖拽 / 抓取 ===== */ - .cursor-grab { + .cursor--grab { cursor: grab; } - .cursor-grabbing { + .cursor--grabbing { cursor: grabbing; } /* ===== 调整大小（通用 & 方向）===== */ - .cursor-resize { + .cursor--resize { cursor: resize; } - .cursor-ew-resize { + .cursor--ew-resize { cursor: ew-resize; } - .cursor-ns-resize { + .cursor--ns-resize { cursor: ns-resize; } - .cursor-nesw-resize { + .cursor--nesw-resize { cursor: nesw-resize; } - .cursor-nwse-resize { + .cursor--nwse-resize { cursor: nwse-resize; } - .cursor-col-resize { + .cursor--col-resize { cursor: col-resize; } - .cursor-row-resize { + .cursor--row-resize { cursor: row-resize; } - .cursor-n-resize { + .cursor--n-resize { cursor: n-resize; } - .cursor-e-resize { + .cursor--e-resize { cursor: e-resize; } - .cursor-s-resize { + .cursor--s-resize { cursor: s-resize; } - .cursor-w-resize { + .cursor--w-resize { cursor: w-resize; } - .cursor-ne-resize { + .cursor--ne-resize { cursor: ne-resize; } - .cursor-nw-resize { + .cursor--nw-resize { cursor: nw-resize; } - .cursor-se-resize { + .cursor--se-resize { cursor: se-resize; } - .cursor-sw-resize { + .cursor--sw-resize { cursor: sw-resize; } /* ===== 视觉反馈 ===== */ - .cursor-crosshair { + .cursor--crosshair { cursor: crosshair; } - .cursor-progress { + .cursor--progress { cursor: progress; } - .cursor-no-drop { + .cursor--no-drop { cursor: no-drop; } - .cursor-vertical-text { + .cursor--vertical-text { cursor: vertical-text; } /* ===== 现代 / 扩展光标 ===== */ - .cursor-zoom-in { + .cursor--zoom-in { cursor: zoom-in; } - .cursor-zoom-out { + .cursor--zoom-out { cursor: zoom-out; } - .cursor-alias { + .cursor--alias { cursor: alias; } - .cursor-copy { + .cursor--copy { cursor: copy; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/display.css b/packages/ui-web/src/styles/utility/size-insensitive/display.css index c612ce9..d182a68 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/display.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/display.css @@ -1,90 +1,90 @@ @layer utility { /* 基础 display */ - .display-inline { + .display--inline { display: inline; } - .display-block { + .display--block { display: block; } - .display-inline-block { + .display--inline-block { display: inline-block; } - .display-flow-root { + .display--flow-root { display: flow-root; } - .display-contents { + .display--contents { display: contents; } - .display-none { + .display--none { display: none; } /* Flex */ - .display-flex { + .display--flex { display: flex; } - .display-inline-flex { + .display--inline-flex { display: inline-flex; } /* Grid */ - .display-grid { + .display--grid { display: grid; } - .display-inline-grid { + .display--inline-grid { display: inline-grid; } /* Table */ - .display-table { + .display--table { display: table; } - .display-inline-table { + .display--inline-table { display: inline-table; } - .display-table-caption { + .display--table-caption { display: table-caption; } - .display-table-cell { + .display--table-cell { display: table-cell; } - .display-table-column { + .display--table-column { display: table-column; } - .display-table-column-group { + .display--table-column-group { display: table-column-group; } - .display-table-footer-group { + .display--table-footer-group { display: table-footer-group; } - .display-table-header-group { + .display--table-header-group { display: table-header-group; } - .display-table-row-group { + .display--table-row-group { display: table-row-group; } - .display-table-row { + .display--table-row { display: table-row; } /* List */ - .display-list-item { + .display--list-item { display: list-item; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/drop-shadow.css b/packages/ui-web/src/styles/utility/size-insensitive/drop-shadow.css index d100e0f..7b0797a 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/drop-shadow.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/drop-shadow.css @@ -1,5 +1,5 @@ @layer utility { - .drop-shadow { - filter: var(--drop-shadow); + .drop-shadow--md { + filter: var(--drop-shadow-md); } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/flex-direction.css b/packages/ui-web/src/styles/utility/size-insensitive/flex-direction.css index 3c38b84..7c4c98b 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/flex-direction.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/flex-direction.css @@ -1,14 +1,14 @@ @layer utility { - .flex-direction-row { + .flex-direction--row { flex-direction: row; } - .flex-direction-row-reverse { + .flex-direction--row-reverse { flex-direction: row-reverse; } - .flex-direction-col { + .flex-direction--col { flex-direction: column; } - .flex-direction-col-reverse { + .flex-direction--col-reverse { flex-direction: column-reverse; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/flex-wrap.css b/packages/ui-web/src/styles/utility/size-insensitive/flex-wrap.css index 53e8c7d..dc46624 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/flex-wrap.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/flex-wrap.css @@ -1,13 +1,13 @@ @layer utility { - .flex-nowrap { + .flex--nowrap { flex-wrap: nowrap; } - .flex-wrap { + .flex--wrap { flex-wrap: wrap; } - .flex-wrap-reverse { + .flex--wrap-reverse { flex-wrap: wrap-reverse; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/font-family.css b/packages/ui-web/src/styles/utility/size-insensitive/font-family.css index 28b3655..32b99f3 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/font-family.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/font-family.css @@ -1,11 +1,11 @@ @layer utility { - .font-family-sans { + .font-family--sans { font-family: var(--font-sans); } - .font-family-serif { + .font-family--serif { font-family: var(--font-serif); } - .font-family-mono { + .font-family--mono { font-family: var(--font-mono); } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/justify-content.css b/packages/ui-web/src/styles/utility/size-insensitive/justify-content.css index f537e45..b70dcc8 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/justify-content.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/justify-content.css @@ -1,45 +1,45 @@ @layer utility { - .justify-start { + .justify--start { justify-content: flex-start; } - .justify-end { + .justify--end { justify-content: flex-end; } - .justify-end-safe { + .justify--end-safe { justify-content: safe flex-end; } - .justify-center { + .justify--center { justify-content: center; } - .justify-center-safe { + .justify--center-safe { justify-content: safe center; } - .justify-between { + .justify--between { justify-content: space-between; } - .justify-around { + .justify--around { justify-content: space-around; } - .justify-evenly { + .justify--evenly { justify-content: space-evenly; } - .justify-stretch { + .justify--stretch { justify-content: stretch; } - .justify-baseline { + .justify--baseline { justify-content: baseline; } - .justify-normal { + .justify--normal { justify-content: normal; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/justify-items.css b/packages/ui-web/src/styles/utility/size-insensitive/justify-items.css index 56e70c1..557e884 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/justify-items.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/justify-items.css @@ -1,29 +1,29 @@ @layer utility { - .justify-items-start { + .justify-items--start { justify-items: start; } - .justify-items-end { + .justify-items--end { justify-items: end; } - .justify-items-end-safe { + .justify-items--end-safe { justify-items: safe end; } - .justify-items-center { + .justify-items--center { justify-items: center; } - .justify-items-center-safe { + .justify-items--center-safe { justify-items: safe center; } - .justify-items-stretch { + .justify-items--stretch { justify-items: stretch; } - .justify-items-normal { + .justify-items--normal { justify-items: normal; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/justify-self.css b/packages/ui-web/src/styles/utility/size-insensitive/justify-self.css index 03152c4..46ba34d 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/justify-self.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/justify-self.css @@ -1,29 +1,29 @@ @layer utility { - .justify-self-auto { + .justify-self--auto { justify-self: auto; } - .justify-self-start { + .justify-self--start { justify-self: start; } - .justify-self-center { + .justify-self--center { justify-self: center; } - .justify-self-center-safe { + .justify-self--center-safe { justify-self: safe center; } - .justify-self-end { + .justify-self--end { justify-self: end; } - .justify-self-end-safe { + .justify-self--end-safe { justify-self: safe end; } - .justify-self-stretch { + .justify-self--stretch { justify-self: stretch; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/overflow.css b/packages/ui-web/src/styles/utility/size-insensitive/overflow.css index 26a6153..f0b5f5c 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/overflow.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/overflow.css @@ -1,61 +1,61 @@ @layer utility { - .overflow-auto { + .overflow--auto { overflow: auto; } - .overflow-hidden { + .overflow--hidden { overflow: hidden; } - .overflow-clip { + .overflow--clip { overflow: clip; } - .overflow-visible { + .overflow--visible { overflow: visible; } - .overflow-scroll { + .overflow--scroll { overflow: scroll; } - .overflow-x-auto { + .overflow--x--auto { overflow-x: auto; } - .overflow-y-auto { + .overflow--y--auto { overflow-y: auto; } - .overflow-x-hidden { + .overflow--x--hidden { overflow-x: hidden; } - .overflow-y-hidden { + .overflow--y--hidden { overflow-y: hidden; } - .overflow-x-clip { + .overflow--x--clip { overflow-x: clip; } - .overflow-y-clip { + .overflow--y--clip { overflow-y: clip; } - .overflow-x-visible { + .overflow--x--visible { overflow-x: visible; } - .overflow-y-visible { + .overflow--y--visible { overflow-y: visible; } - .overflow-x-scroll { + .overflow--x--scroll { overflow-x: scroll; } - .overflow-y-scroll { + .overflow--y--scroll { overflow-y: scroll; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/overscroll-behavior.css b/packages/ui-web/src/styles/utility/size-insensitive/overscroll-behavior.css index 43a57a0..f9fbacc 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/overscroll-behavior.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/overscroll-behavior.css @@ -1,37 +1,37 @@ @layer utility { - .overscroll-auto { + .overscroll--auto { overscroll-behavior: auto; } - .overscroll-contain { + .overscroll--contain { overscroll-behavior: contain; } - .overscroll-none { + .overscroll--none { overscroll-behavior: none; } - .overscroll-x-auto { + .overscroll--x--auto { overscroll-behavior-x: auto; } - .overscroll-x-contain { + .overscroll--x--contain { overscroll-behavior-x: contain; } - .overscroll-x-none { + .overscroll--x--none { overscroll-behavior-x: none; } - .overscroll-y-auto { + .overscroll--y--auto { overscroll-behavior-y: auto; } - .overscroll-y-contain { + .overscroll--y--contain { overscroll-behavior-y: contain; } - .overscroll-y-none { + .overscroll--y--none { overscroll-behavior-y: none; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/position.css b/packages/ui-web/src/styles/utility/size-insensitive/position.css index d0d9f5e..70d3bb9 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/position.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/position.css @@ -1,21 +1,21 @@ @layer utility { - .position-static { + .position--static { position: static; } - .position-fixed { + .position--fixed { position: fixed; } - .position-absolute { + .position--absolute { position: absolute; } - .position-relative { + .position--relative { position: relative; } - .position-sticky { + .position--sticky { position: sticky; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/screen-reader.css b/packages/ui-web/src/styles/utility/size-insensitive/screen-reader.css index 49b8048..aea57f7 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/screen-reader.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/screen-reader.css @@ -10,7 +10,7 @@ white-space: nowrap; border-width: 0; } - .sr-only-cancel { + .sr-only--cancel { position: static; width: auto; height: auto; diff --git a/packages/ui-web/src/styles/utility/size-insensitive/theme.css b/packages/ui-web/src/styles/utility/size-insensitive/theme.css index df187ac..ce2dc7c 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/theme.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/theme.css @@ -1,10 +1,10 @@ @layer utility { - .theme-light { + .theme--light { --base-fg: var(--color-gray-950); --base-bg: var(--color-white); } - .theme-dark { + .theme--dark { --base-fg: var(--color-gray-50); --base-bg: var(--color-black); } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/user-select.css b/packages/ui-web/src/styles/utility/size-insensitive/user-select.css index a2deadf..cc325db 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/user-select.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/user-select.css @@ -1,14 +1,14 @@ @layer utility { - .select-none { + .select--none { user-select: none; } - .select-text { + .select--text { user-select: text; } - .select-all { + .select--all { user-select: all; } - .select-auto { + .select--auto { user-select: auto; } } diff --git a/packages/ui-web/src/styles/utility/size-insensitive/z-index.css b/packages/ui-web/src/styles/utility/size-insensitive/z-index.css index 8b0ec99..d42e57c 100644 --- a/packages/ui-web/src/styles/utility/size-insensitive/z-index.css +++ b/packages/ui-web/src/styles/utility/size-insensitive/z-index.css @@ -1,43 +1,43 @@ @layer utility { /* 自动 & 零 */ - .z-auto { + .z--auto { z-index: auto; } - .z-0 { + .z--0 { z-index: 0; } /* 正值 */ - .z-10 { + .z--10 { z-index: 10; } - .z-20 { + .z--20 { z-index: 20; } - .z-30 { + .z--30 { z-index: 30; } - .z-40 { + .z--40 { z-index: 40; } - .z-50 { + .z--50 { z-index: 50; } /* 负值（negative） */ - .z-n-10 { + .z--n--10 { z-index: -10; } - .z-n-20 { + .z--n--20 { z-index: -20; } - .z-n-30 { + .z--n--30 { z-index: -30; } - .z-n-40 { + .z--n--40 { z-index: -40; } - .z-n-50 { + .z--n--50 { z-index: -50; } } diff --git a/packages/ui-web/src/styles/utility/size-sensitive/border-radius.css b/packages/ui-web/src/styles/utility/size-sensitive/border-radius.css index 47a04ce..9e90d1c 100644 --- a/packages/ui-web/src/styles/utility/size-sensitive/border-radius.css +++ b/packages/ui-web/src/styles/utility/size-sensitive/border-radius.css @@ -1,26 +1,26 @@ @layer utility { - .rounded-full { + .rounded--full { border-radius: 9999px; } - .rounded-none { + .rounded--none { border-radius: 0; } - .rounded-xs { + .rounded--xs { border-radius: var(--radius-xs); } - .rounded-sm { + .rounded--sm { border-radius: var(--radius-sm); } - .rounded-md { + .rounded--md { border-radius: var(--radius-md); } - .rounded-lg { + .rounded--lg { border-radius: var(--radius-lg); } - .rounded-xl { + .rounded--xl { border-radius: var(--radius-xl); } - .rounded-2xl { + .rounded--2xl { border-radius: var(--radius-2xl); } } diff --git a/packages/ui-web/src/styles/utility/size-sensitive/font-size.css b/packages/ui-web/src/styles/utility/size-sensitive/font-size.css index c92ab65..3ca5c39 100644 --- a/packages/ui-web/src/styles/utility/size-sensitive/font-size.css +++ b/packages/ui-web/src/styles/utility/size-sensitive/font-size.css @@ -1,35 +1,35 @@ @layer utility { - .text-xs { + .text--xs { /* 12px 支持rem字体放大 */ font-size: var(--font-size-xs); /* 不能超过 16px */ line-height: var(--line-height-xs); } - .text-sm { + .text--sm { /* 14px 支持rem字体放大 */ font-size: var(--font-size-sm); /* 不能超过 20px */ line-height: var(--line-height-sm); } - .text-md { + .text--md { /* 16px 支持rem字体放大 */ font-size: var(--font-size-md); /* 不能超过 24px */ line-height: var(--line-height-md); } - .text-lg { + .text--lg { /* 18px 支持rem字体放大 */ font-size: var(--font-size-lg); /* 不能超过 28px */ line-height: var(--line-height-lg); } - .text-xl { + .text--xl { /* 24px 支持rem字体放大 */ font-size: var(--font-size-2xl); /* 不能超过 32px */ line-height: var(--line-height-2xl); } - .text-2xl { + .text--2xl { /* 30px 支持rem字体放大 */ font-size: var(--font-size-2xl); /* 不能超过 36px */ diff --git a/packages/ui-web/src/styles/utility/size-sensitive/font-weight.css b/packages/ui-web/src/styles/utility/size-sensitive/font-weight.css index f178f2c..17b4754 100644 --- a/packages/ui-web/src/styles/utility/size-sensitive/font-weight.css +++ b/packages/ui-web/src/styles/utility/size-sensitive/font-weight.css @@ -1,20 +1,20 @@ @layer utility { - .font-weight-light { + .font-weight--light { font-weight: 300; } - .font-weight-normal { + .font-weight--normal { font-weight: 400; } - .font-weight-extranormal { + .font-weight--extranormal { font-weight: 500; } - .font-weight-semibold { + .font-weight--semibold { font-weight: 600; } - .font-weight-bold { + .font-weight--bold { font-weight: 700; } - .font-weight-extrabold { + .font-weight--extrabold { font-weight: 700; } } diff --git a/packages/ui-web/src/styles/utility/size-sensitive/gap.css b/packages/ui-web/src/styles/utility/size-sensitive/gap.css index 618b984..0534faa 100644 --- a/packages/ui-web/src/styles/utility/size-sensitive/gap.css +++ b/packages/ui-web/src/styles/utility/size-sensitive/gap.css @@ -1,23 +1,23 @@ @layer utility { - .gap-xs { + .gap--xs { /* 2px */ gap: calc(var(--spacing)); } - .gap-sm { + .gap--sm { /* 4px */ gap: calc(var(--spacing) * 2); } - .gap-md { + .gap--md { /* 6px */ gap: calc(var(--spacing) * 3); } - .gap-lg { + .gap--lg { gap: calc(var(--spacing) * 2); } - .gap-xl { + .gap--xl { gap: calc(var(--spacing) * 2.5); } - .gap-2xl { + .gap--2xl { gap: calc(var(--spacing) * 2.5); } } diff --git a/packages/ui-web/src/styles/utility/size-sensitive/height.css b/packages/ui-web/src/styles/utility/size-sensitive/height.css index c377814..2067c22 100644 --- a/packages/ui-web/src/styles/utility/size-sensitive/height.css +++ b/packages/ui-web/src/styles/utility/size-sensitive/height.css @@ -1,47 +1,47 @@ @layer utility { - .h-item-xs { + .h--item--xs { /* 24px minimum touch size for text line */ height: var(--height-item-xs); } - .h-item-sm { + .h--item--sm { /* 28px save space for most used size */ height: var(--height-item-sm); } - .h-item-md { + .h--item--md { /* 34px most used size */ height: var(--height-item-md); } - .h-item-lg { + .h--item--lg { /* 44px maximum touch size without waste */ height: var(--height-item-lg); } - .h-item-xl { + .h--item--xl { /* 56px section-header bar */ height: var(--height-item-xl); } - .h-item-2xl { + .h--item--2xl { /* 64px navigation bar */ height: var(--height-item-2xl); } /* -------------- */ - .h-inline-xs { + .h--inline--xs { /* 16px */ height: calc(var(--font-size-xs) * var(--line-height-xs)); } - .h-inline-sm { + .h--inline--sm { /* 20px */ height: calc(var(--font-size-sm) * var(--line-height-sm)); } - .h-inline-md { + .h--inline--md { height: calc(var(--font-size-md) * var(--line-height-md)); } - .h-inline-lg { + .h--inline--lg { height: calc(var(--font-size-lg) * var(--line-height-lg)); } - .h-inline-xl { + .h--inline--xl { height: calc(var(--font-size-xl) * var(--line-height-xl)); } - .h-inline-2xl { + .h--inline--2xl { height: calc(var(--font-size-2xl) * var(--line-height-2xl)); } } diff --git a/packages/ui-web/src/styles/utility/size-sensitive/margin-block.css b/packages/ui-web/src/styles/utility/size-sensitive/margin-block.css index 1221094..6d949be 100644 --- a/packages/ui-web/src/styles/utility/size-sensitive/margin-block.css +++ b/packages/ui-web/src/styles/utility/size-sensitive/margin-block.css @@ -1,67 +1,67 @@ @layer utility { - .my-e-none { + .my--e--none { margin-block-end: 0; } - .my-e-xs { + .my--e--xs { margin-block-end: var(--margin-xs); } - .my-e-sm { + .my--e--sm { margin-block-end: var(--margin-sm); } - .my-e-md { + .my--e--md { margin-block-end: var(--margin-md); } - .my-e-lg { + .my--e--lg { margin-block-end: var(--margin-lg); } - .my-e-xl { + .my--e--xl { margin-block-end: var(--margin-xl); } - .my-e-2xl { + .my--e--2xl { margin-block-end: var(--margin-2xl); } /* ------------------ */ - .my-s-none { + .my--s--none { margin-block-start: 0; } - .my-s-xs { + .my--s--xs { margin-block-start: var(--margin-xs); } - .my-s-sm { + .my--s--sm { margin-block-start: var(--margin-sm); } - .my-s-md { + .my--s--md { margin-block-start: var(--margin-md); } - .my-s-lg { + .my--s--lg { margin-block-start: var(--margin-lg); } - .my-s-xl { + .my--s--xl { margin-block-start: var(--margin-xl); } - .my-s-2xl { + .my--s--2xl { margin-block-start: var(--margin-2xl); } /* --------------------- */ - .my-none { + .my--none { margin-block: 0; } - .my-xs { + .my--xs { margin-block: var(--margin-xs); } - .my-sm { + .my--sm { margin-block: var(--margin-sm); } - .my-md { + .my--md { margin-block: var(--margin-md); } - .my-lg { + .my--lg { margin-block: var(--margin-lg); } - .my-xl { + .my--xl { margin-block: var(--margin-xl); } - .my-2xl { + .my--2xl { margin-block: var(--margin-2xl); } } diff --git a/packages/ui-web/src/styles/utility/size-sensitive/margin-inline.css b/packages/ui-web/src/styles/utility/size-sensitive/margin-inline.css index 40e1e9c..bc215b0 100644 --- a/packages/ui-web/src/styles/utility/size-sensitive/margin-inline.css +++ b/packages/ui-web/src/styles/utility/size-sensitive/margin-inline.css @@ -1,67 +1,67 @@ @layer utility { - .mx-e-none { + .mx--e--none { margin-inline-end: 0; } - .mx-e-xs { + .mx--e--xs { margin-inline-end: var(--margin-xs); } - .mx-e-sm { + .mx--e--sm { margin-inline-end: var(--margin-sm); } - .mx-e-md { + .mx--e--md { margin-inline-end: var(--margin-md); } - .mx-e-lg { + .mx--e--lg { margin-inline-end: var(--margin-lg); } - .mx-e-xl { + .mx--e--xl { margin-inline-end: var(--margin-xl); } - .mx-e-2xl { + .mx--e--2xl { margin-inline-end: var(--margin-2xl); } /* ------------------ */ - .mx-s-none { + .mx--s--none { margin-inline-start: 0; } - .mx-s-xs { + .mx--s--xs { margin-inline-start: var(--margin-xs); } - .mx-s-sm { + .mx--s--sm { margin-inline-start: var(--margin-sm); } - .mx-s-md { + .mx--s--md { margin-inline-start: var(--margin-md); } - .mx-s-lg { + .mx--s--lg { margin-inline-start: var(--margin-lg); } - .mx-s-xl { + .mx--s--xl { margin-inline-start: var(--margin-xl); } - .mx-s-2xl { + .mx--s--2xl { margin-inline-start: var(--margin-2xl); } /* --------------------- */ - .mx-none { + .mx--none { margin-inline: 0; } - .mx-xs { + .mx--xs { margin-inline: var(--margin-xs); } - .mx-sm { + .mx--sm { margin-inline: var(--margin-sm); } - .mx-md { + .mx--md { margin-inline: var(--margin-md); } - .mx-lg { + .mx--lg { margin-inline: var(--margin-lg); } - .mx-xl { + .mx--xl { margin-inline: var(--margin-xl); } - .mx-2xl { + .mx--2xl { margin-inline: var(--margin-2xl); } } diff --git a/packages/ui-web/src/styles/utility/size-sensitive/padding-long.css b/packages/ui-web/src/styles/utility/size-sensitive/padding-long.css index 235fff5..dea45ad 100644 --- a/packages/ui-web/src/styles/utility/size-sensitive/padding-long.css +++ b/packages/ui-web/src/styles/utility/size-sensitive/padding-long.css @@ -1,24 +1,24 @@ @layer utility { - .px-long-xs { + .px--long--xs { /* 6px */ padding-inline: var(--padding-long-xs); } - .px-long-sm { + .px--long--sm { /* 8px */ padding-inline: var(--padding-long-sm); } - .px-long-md { + .px--long--md { /* 10px */ padding-inline: var(--padding-long-md); } - .px-long-lg { + .px--long--lg { /* 16px */ padding-inline: var(--padding-long-lg); } - .px-long-xl { + .px--long--xl { padding-inline: var(--padding-long-xl); } - .px-long-2xl { + .px--long--2xl { padding-inline: var(--padding-long-2xl); } } diff --git a/packages/ui-web/src/styles/utility/size-sensitive/padding-short.css b/packages/ui-web/src/styles/utility/size-sensitive/padding-short.css index 28ca845..73e0fb0 100644 --- a/packages/ui-web/src/styles/utility/size-sensitive/padding-short.css +++ b/packages/ui-web/src/styles/utility/size-sensitive/padding-short.css @@ -1,49 +1,49 @@ @layer utility { - .px-none { + .px--none { padding-inline: 0px; } - .px-xs { + .px--xs { /* 4px, 24px - 16px = 8px */ padding-inline: var(--padding-xs); } - .px-sm { + .px--sm { /* 4px, 28px - 20px = 8px */ padding-inline: var(--padding-sm); } - .px-md { + .px--md { /* 10px */ padding-inline: var(--padding-md); } - .px-lg { + .px--lg { /* 16px */ padding-inline: var(--padding-lg); } - .px-xl { + .px--xl { padding-inline: var(--padding-xl); } - .px-2xl { + .px--2xl { padding-inline: var(--padding-2xl); } /* ------------------------ */ - .py-none { + .py--none { padding-block: 0px; } - .py-xs { + .py--xs { padding-block: var(--padding-xs); } - .py-sm { + .py--sm { padding-block: var(--padding-sm); } - .py-md { + .py--md { padding-block: var(--padding-md); } - .py-lg { + .py--lg { padding-block: var(--padding-lg); } - .py-xl { + .py--xl { padding-block: var(--padding-xl); } - .py-2xl { + .py--2xl { padding-block: var(--padding-2xl); } } diff --git a/packages/ui-web/src/styles/utility/size-sensitive/width.css b/packages/ui-web/src/styles/utility/size-sensitive/width.css index 7384f89..788dc24 100644 --- a/packages/ui-web/src/styles/utility/size-sensitive/width.css +++ b/packages/ui-web/src/styles/utility/size-sensitive/width.css @@ -1,45 +1,45 @@ @layer utility { - .w-item-xs { + .w--item--xs { /* 24px minimum touch size for text line */ width: var(--height-item-xs); } - .w-item-sm { + .w--item--sm { /* 30px save space for most used size */ width: var(--height-item-sm); } - .w-item-md { + .w--item--md { /* 34px most used size */ width: var(--height-item-lg); } - .w-item-lg { + .w--item-lg { /* 44px maximum touch size without waste */ width: var(--height-item-lg); } - .w-item-xl { + .w--item--xl { /* 56px section-header bar */ width: var(--height-item-xl); } - .w-item-2xl { + .w--item--2xl { /* 64px navigation bar */ width: var(--height-item-xl); } /* ---------------------------------------------------- */ - .w-inline-xs { + .w--inline--xs { width: calc(var(--font-size-xs) * var(--line-height-xs)); } - .w-inline-sm { + .w--inline--sm { width: calc(var(--font-size-sm) * var(--line-height-sm)); } - .w-inline-md { + .w--inline--md { width: calc(var(--font-size-md) * var(--line-height-md)); } - .w-inline-lg { + .w--inline--lg { width: calc(var(--font-size-lg) * var(--line-height-lg)); } - .w-inline-xl { + .w--inline--xl { width: calc(var(--font-size-xl) * var(--line-height-xl)); } - .w-inline-xl { + .w--inline--xl { width: calc(var(--font-size-2xl) * var(--line-height-2xl)); } } diff --git a/packages/ui-web/src/styles/utils/cpm.ts b/packages/ui-web/src/styles/utils/cpm.ts index 94a8456..83ee851 100644 --- a/packages/ui-web/src/styles/utils/cpm.ts +++ b/packages/ui-web/src/styles/utils/cpm.ts @@ -1,61 +1,49 @@ -import { defaultPrefixList } from "./prefix-list"; - -function matchLongestPrefix(cls: string, prefixList: string[]): string { - let bestPrefix: string | undefined; - - for (const prefix of prefixList) { - const reg = new RegExp(`^${prefix}(?:-|$)`); - if (reg.test(cls) && (!bestPrefix || prefix.length > bestPrefix.length)) { - bestPrefix = prefix; - } - } - - return bestPrefix ?? cls; -} - -// 重载 1 -export function cpm(...classes: Array): string; - -// 重载 2 -export function cpm( - options: { extendedPrefixList?: string[] }, - ...classes: Array -): string; - -export function cpm( - arg1: { extendedPrefixList?: string[] } | string | string[], - ...rest: Array -): string { +export function cpm(...classes: (string[] | string)[]) { const map = new Map(); - let options: { extendedPrefixList?: string[] } = {}; - let classes: Array; + function dealClass(cls: string) { + // 提取多段 prefix，以“--”为分隔符 + const fragments = cls.split("--"); + // 前缀后面剩下的部分 + const suffix = fragments.pop() ?? ""; + // ['1', '1--2', '1--2--3'] + const stepwisePrefixList = fragments.map((_, index, array) => { + if (index === 0) return array[0]; + // 截取子数组（注意不是子字符串） + return array.slice(0, index + 1).join("--"); + }); - if (typeof arg1 === "object" && !Array.isArray(arg1)) { - options = arg1 as { extendedPrefixList?: string[] }; - classes = rest; - } else { - classes = [arg1, ...rest]; + // 覆盖，短前缀 + stepwisePrefixList.forEach((key) => { + map.delete(key); + }); + // 覆盖延长前缀，overflow--x 会覆盖 overflow--x--l + // 不覆盖分支前缀，overflow--x 不会覆盖 overfl--y + for (const key of map.keys()) { + if (key.includes(stepwisePrefixList[-1])) { + // 包含 overflow--x 的全部删除 + map.delete(key); + } + } + // 把本次值加进去 + map.set(stepwisePrefixList[-1], suffix); } - const mergedPrefixList: string[] = [ - ...new Set([...(options.extendedPrefixList ?? []), ...defaultPrefixList]), - ]; - classes.forEach((item) => { - if (Array.isArray(item)) { - item.forEach((i) => { - const bestPrefix = matchLongestPrefix(i, mergedPrefixList); - map.set(bestPrefix, i); - }); - return; - } - + // 如果是 string 直接处理 if (typeof item === "string") { - const bestPrefix = matchLongestPrefix(item, mergedPrefixList); - map.set(bestPrefix, item); + dealClass(item); + } else { + // 否则肯定是 string[] + item.forEach((i) => { + dealClass(i); + }); } }); - return Object.values(map).join(" "); + const resultString = [...map] + .map(([key, value]) => `${key}--${value}`) + .join(" "); + + return resultString; } diff --git a/packages/ui-web/src/styles/utils/cvr.ts b/packages/ui-web/src/styles/utils/cvr.ts index ee73442..5f9f1d3 100644 --- a/packages/ui-web/src/styles/utils/cvr.ts +++ b/packages/ui-web/src/styles/utils/cvr.ts @@ -1,6 +1,7 @@ +// 1. 允许变体值的键可以是字符串，也可以是布尔值（为了开发体验，允许传 true/false） + import { cpm } from "./cpm"; -// 1. 允许变体值的键可以是字符串，也可以是布尔值（为了开发体验，允许传 true/false） // 但底层存储我们统一视为字符串处理 type VariantValue = string | boolean; diff --git a/packages/ui-web/src/styles/utils/prefix-list.ts b/packages/ui-web/src/styles/utils/prefix-list.ts deleted file mode 100644 index 93f1806..0000000 --- a/packages/ui-web/src/styles/utils/prefix-list.ts +++ /dev/null @@ -1,38 +0,0 @@ -export const defaultPrefixList = [ - "align-content", - "items", - "align-self", - "animate", - "rounded", - "box-decoration", - "break-inside", - "box-sizing", - "brand", - "break-after", - "break-before", - "cursor", - "display", - "flex-direction", - "flex", - "font-family", - "font-weight", - "text", - "gap", - "h", - "justify", - "justify-items", - "justify-self", - "mx", - "my", - "px", - "py", - "overflow", - "overscroll", - "position", - "sr", - "theme", - "w", - "z", - "drop-shadow", - "select", -]; diff --git a/packages/ui-web/src/utils/Slot.tsx b/packages/ui-web/src/utils/Slot.tsx new file mode 100644 index 0000000..a0a07e8 --- /dev/null +++ b/packages/ui-web/src/utils/Slot.tsx @@ -0,0 +1,14 @@ +import { cloneElement, isValidElement } from "react"; +import { mergeProps } from "./mergeProps"; + +export const Slot = (props: any) => { + const { children, ...rest } = props; + + if (!isValidElement(children)) { + throw new Error("Slot requires a single valid React element"); + } + + const mergedProps = mergeProps(children.props as Record, rest); + + return cloneElement(children, mergedProps); +}; diff --git a/packages/ui-web/tsconfig.json b/packages/ui-web/tsconfig.json index eb90b48..f79e3c5 100644 --- a/packages/ui-web/tsconfig.json +++ b/packages/ui-web/tsconfig.json @@ -16,11 +16,6 @@ "noEmit": true, "jsx": "react-jsx", - /* Linting */ - "noUnusedLocals": true, - "noUnusedParameters": true, - "erasableSyntaxOnly": true, - "noFallthroughCasesInSwitch": true }, "include": ["src", "scripts", "vite.config.ts"] } diff --git a/templates/vite-react-lib/playground/App.tsx b/templates/vite-react-lib/playground/App.tsx new file mode 100644 index 0000000..8083649 --- /dev/null +++ b/templates/vite-react-lib/playground/App.tsx @@ -0,0 +1,7 @@ + + +function App() { + return
; +} + +export default App; diff --git a/templates/vite-react-lib/playground/index.html b/templates/vite-react-lib/playground/index.html new file mode 100644 index 0000000..ce9e98b --- /dev/null +++ b/templates/vite-react-lib/playground/index.html @@ -0,0 +1,12 @@ + + + + + + vite-project + + +
+ + + diff --git a/templates/vite-react-lib/playground/main.tsx b/templates/vite-react-lib/playground/main.tsx new file mode 100644 index 0000000..4aff025 --- /dev/null +++ b/templates/vite-react-lib/playground/main.tsx @@ -0,0 +1,9 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import App from './App.tsx' + +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/templates/vite-react-lib/tsconfig.json b/templates/vite-react-lib/tsconfig.json index eb90b48..f79e3c5 100644 --- a/templates/vite-react-lib/tsconfig.json +++ b/templates/vite-react-lib/tsconfig.json @@ -16,11 +16,6 @@ "noEmit": true, "jsx": "react-jsx", - /* Linting */ - "noUnusedLocals": true, - "noUnusedParameters": true, - "erasableSyntaxOnly": true, - "noFallthroughCasesInSwitch": true }, "include": ["src", "scripts", "vite.config.ts"] } diff --git a/templates/vite-react-lib/vite.config.ts b/templates/vite-react-lib/vite.config.ts index c632b6e..4418ded 100644 --- a/templates/vite-react-lib/vite.config.ts +++ b/templates/vite-react-lib/vite.config.ts @@ -2,38 +2,40 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from "path"; -export default defineConfig({ - // d.ts 由 tsc 完成，使用专门配置 tsconfig.build.json - // 转换由 oxc 完成 - // 打包由 rolldown 完成 - plugins: [react()], +export default defineConfig(({ command }) => { + if (command === "serve") { + return { + plugins: [react()], + root: "playground", + }; + } - build: { - cssMinify: false, - lib: { - entry: path.resolve(import.meta.dirname, "src/index.ts"), - // 不写 vite 默认是 index.mjs 和 index.js，不方便识别 - formats: ["es", "cjs"], - // package.json 管别人怎么使用， - // build.lib 管怎么打包，生成什么 - // 如果不一致，就会报错，指向文件不存在 - fileName: (format) => `index.${format}.js`, - }, - rolldownOptions: { - // 避免这些被打包，peerDependencies 对 rolldown 是无效的，不会自动 external - external: ["react", "react-dom", "react/jsx-runtime"], - // 专门给 UMD / IIFE​ 的映射表 - output: { - globals: { - react: "React", - "react-dom": "ReactDOM", + return { + plugins: [react()], + + build: { + cssMinify: false, + + lib: { + entry: path.resolve(import.meta.dirname, "src/index.ts"), + formats: ["es", "cjs"], + fileName: (format) => `index.${format}.js`, + }, + + rolldownOptions: { + external: ["react", "react-dom", "react/jsx-runtime"], + output: { + globals: { + react: "React", + "react-dom": "ReactDOM", + }, }, }, - }, - emptyOutDir: true, // 防止旧产物残留 - sourcemap: true, // 方便调试 - cssCodeSplit: false, // 合并成一个css文件 - outDir: "dist", // 专管打包输出目录，tsconfig.build.json 中的 outDir 管的是 d.ts 输出目录 - }, + emptyOutDir: true, + sourcemap: true, + cssCodeSplit: false, + outDir: "dist", + }, + }; });