From 40466ac53067116fe1a45a9981c368bf8b90af6e Mon Sep 17 00:00:00 2001 From: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> Date: Mon, 5 Dec 2022 20:03:09 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dcss=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=BC=96=E8=AF=91=E6=8A=A5=E9=94=99=E9=97=AE?= =?UTF-8?q?=E9=A2=98&chore=EF=BC=9A=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E6=A0=A1=E9=AA=8C=20(#5862)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复css变量文件编译报错问题 * chore: 添加样式校验 --- .husky/pre-commit | 1 + .stylelintrc.json | 17 ++++++ package.json | 5 +- packages/amis-ui/scss/_properties.scss | 61 ++++++++++--------- packages/amis-ui/scss/components/_badge.scss | 17 +++--- .../amis-ui/scss/components/_timeline.scss | 3 +- .../scss/components/react-datetime.scss | 16 ++--- 7 files changed, 70 insertions(+), 50 deletions(-) create mode 100644 .stylelintrc.json diff --git a/.husky/pre-commit b/.husky/pre-commit index 36af21989..bab3cb09f 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -2,3 +2,4 @@ . "$(dirname "$0")/_/husky.sh" npx lint-staged +npm run stylelint diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 000000000..cf2e05ac8 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,17 @@ +{ + "rules": { + "color-hex-case": "lower", + "no-extra-semicolons": true, + "declaration-colon-space-after": "always-single-line", + "block-no-empty": true + }, + "overrides": [ + { + "files": [ + "*.scss", + "**/*.scss" + ], + "customSyntax": "postcss-scss" + } + ] +} \ No newline at end of file diff --git a/package.json b/package.json index fa20966b2..96df9a242 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "version": "lerna version", "release": "npm run build --workspaces && lerna publish from-package --registry=https://registry.npmjs.org --ignore-scripts", "revision": "ts-node ./scripts/generate-revision.ts", - "publish-to-internal": "sh ./publish-to-internal.sh" + "publish-to-internal": "sh ./publish-to-internal.sh", + "stylelint": "npx stylelint 'packages/**/*.scss'" }, "dependencies": { "postcss": "^8.4.14", @@ -111,4 +112,4 @@ "printBasicPrototype": false } } -} +} \ No newline at end of file diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index 33d8a2116..fac9d9b18 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -254,7 +254,7 @@ $remFactor: 16px; --Calendar-color: #151b26; --Calendar-fontSize: var(--fontSizeSm); --Calendar-input-borderColor: var(--borderColor); - --Calendar-input-borderRadius: var(--borders-radius-3); + --Calendar-input-borderRadius: var(--borders-radius-3); --Calendar-input-color: var(--info); --Calendar-input-fontSize: var(--fontSizeBase); --Calendar-input-height: #{px2rem(40px)}; @@ -286,7 +286,7 @@ $remFactor: 16px; --Calendar-schedule-content-color: (--colors-neutral-text-11); --Card-actions-borderColor: var(--colors-neutral-line-10); - --Card-actions-fontSize: var(--fonts-size-8); + --Card-actions-fontSize: var(--fonts-size-8); --Card-actions-onChecked-onHover-bg: var(--colors-neutral-fill-11); --Card-actions-onChecked-onHover-color: var(--colors-neutral-fill-11); --Card-actions-onHover-bg: var(--colors-neutral-fill-11); @@ -390,16 +390,16 @@ $remFactor: 16px; --Combo-addBtn-bg: var(--colors-brand-5); --Combo-addBtn-border: var(--colors-neutral-line-11); --Combo-addBtn-borderRadius: var(--borders-radius-3); - --Combo-addBtn-color: var(--colors-neutral-text-11); + --Combo-addBtn-color: var(--colors-neutral-text-11); --Combo-addBtn-fontSize: var(--fonts-size-8); - --Combo-addBtn-height:var(--sizes-base-14); - --Combo-addBtn-lineHeight: var(--fonts-lineHeight-2); + --Combo-addBtn-height: var(--sizes-base-14); + --Combo-addBtn-lineHeight: var(--fonts-lineHeight-2); --Combo-addBtn-onActive-bg: var(--colors-brand-4); --Combo-addBtn-onActive-border: var(--colors-neutral-line-4); --Combo-addBtn-onActive-color: var(--Combo-addBtn-color); --Combo-addBtn-onHover-bg: var(--colors-brand-6); --Combo-addBtn-onHover-color: var(--Combo-addBtn-color); - --Combo-addBtn-paddingX: var(--sizes-size-5); + --Combo-addBtn-paddingX: var(--sizes-size-5); --Combo-addBtn-paddingY: calc( ( var(--Combo-addBtn-height) - var(--borders-width-2) * 2 - @@ -427,7 +427,7 @@ $remFactor: 16px; --Collapse-header-collapsed-border: var(--borderWidth) solid var(--Collapse-border-color); --Collapse-header-collapsed-borderTop: none; - --Collapse-header-collapsed-borderBottom: none + --Collapse-header-collapsed-borderBottom: none; --Collapse-header-wrapper-direction: row-reverse; --Collapse-header-bg-disabled-color: var(--colors-neutral-fill-6); --Collapse-content-padding: var(--sizes-size-9); @@ -443,7 +443,7 @@ $remFactor: 16px; --DatePicker-borderColor: var(--Form-input-borderColor); --DatePicker-borderRadius: var(--borders-radius-3); --DatePicker-borderWidth: var(--borders-width-2); - --DatePicker-color: var(--colors-neutral-text-2); + --DatePicker-color: var(--colors-neutral-text-2); --DatePicker-header-onHover-color: var(--colors-brand-6); --DatePicker-arrow-color: #84868c; --DatePicker-fontSize: var(--fontSizeSm); @@ -464,7 +464,7 @@ $remFactor: 16px; var(--DatePicker-fontSize) ) / 2 - var(--DatePicker-borderWidth) ); - --DatePicker-placeholderColor: var(--colors-neutral-text-6); + --DatePicker-placeholderColor: var(--colors-neutral-text-6); --DatePicker-minWidth: calc( var(--fontSizeLg) * 5 + var(--DatePicker-paddingX) * 2 + var(--Form-input-clearBtn-size) * 2 @@ -476,7 +476,7 @@ $remFactor: 16px; --DateRangePicker-activeCursor-color: var(--colors-brand-4); --DateRangePicker-activeCursor-height: 2px; - --LocationPicker-borderRadius: var(--borders-radius-3); + --LocationPicker-borderRadius: var(--borders-radius-3); --Divider-borderStyle: solid; @@ -700,10 +700,10 @@ $remFactor: 16px; --ImageControl-addBtn-onActive-border: var(--colors-brand-5); --ImageControl-addBtn-onActive-color: var(--colors-brand-5); --ImageControl-addBtn-onDisabled-bg: var(--colors-neutral-fill-10); - --ImageControl-addBtn-onDisabled-border: var(--colors-neutral-line-8);; + --ImageControl-addBtn-onDisabled-border: var(--colors-neutral-line-8); --ImageControl-addBtn-onDisabled-color: var(--colors-neutral-text-6); --ImageControl-addBtn-onHover-bg: var(--colors-neutral-fill-11); - --ImageControl-addBtn-onHover-border:var(--colors-brand-5); + --ImageControl-addBtn-onHover-border: var(--colors-brand-5); --ImageControl-addBtn-onHover-color: var(--colors-brand-5); --ImageControl-addBtn-upload-color: var(--colors-neutral-text-3); --ImageControl-progress-borderRadius: var(--borders-radius-2); @@ -890,8 +890,8 @@ $remFactor: 16px; --ListMenu-item--onHover-bg: var(--colors-neutral-fill-8); --ListMenu-item--onHover-color: var(--colors-neutral-text-2); --ListMenu-item-bg: var(--colors-neutral-fill-11); - --ListMenu-item-color: var(--colors-neutral-text-2); - --ListMenu-item-height:var(--sizes-base-16); + --ListMenu-item-color: var(--colors-neutral-text-2); + --ListMenu-item-height: var(--sizes-base-16); --Log-bg: #222; --Log-padding: var(--gap-sm) 0; @@ -941,7 +941,7 @@ $remFactor: 16px; --Nav-item-fontSize: var(--fonts-size-6); --Nav-item-onActive-bg: var(--colors-neutral-fill-10); --Nav-item-onActive-borderLeft: var(--borders-width-4) var(--borders-style-2) - var(--colors-brand-5); + var(--colors-brand-5); --Nav-item-onActive-color: var(--colors-brand-5); --Nav-item-onDisabled-color: var(--text--muted-color); --Nav-item-onHover-bg: rgba(0, 0, 0, 0.05); @@ -993,7 +993,7 @@ $remFactor: 16px; --Pagination-minWidth: #{px2rem(32px)}; --Pagination-onActive-backgroundColor: var(--colors-neutral-fill-11); --Pagination-onActive-border: var(--borders-width-2) var(--borders-style-2) - var(--colors-brand-5); + var(--colors-brand-5); --Pagination-onActive-color: var(--colors-brand-5); --Pagination-onDisabled-color: var(--colors-neutral-text-6); --Pagination-onDisabled-backgroundColor: var(--colors-neutral-fill-10); @@ -1077,7 +1077,7 @@ $remFactor: 16px; --Remark-bg: var(--colors-neutral-text-11); --Remark-borderColor: var(--colors-neutral-line-8); - --Remark-borderWidth:var(--borders-width-2); + --Remark-borderWidth: var(--borders-width-2); --Remark-icon-fontSize: var(--fonts-size-8); --Remark-iconColor: var(--colors-neutral-text-5); --Remark-marginLeft: var(--gap-sm); @@ -1172,15 +1172,15 @@ $remFactor: 16px; --Table-lineHeight: var(--fonts-lineHeight-2); --Table-onChecked-bg: var(--colors-neutral-fill-10); --Table-onChecked-borderColor: var(--colors-neutral-line-8); - --Table-onChecked-color: var(--colors-neutral-text-6) + --Table-onChecked-color: var(--colors-neutral-text-6); --Table-onChecked-onHover-bg: var(--colors-neutral-fill-10); --Table-onChecked-onHover-borderColor: var(--colors-neutral-line-8); - --Table-onChecked-onHover-color: var( --colors-neutral-line-4); + --Table-onChecked-onHover-color: var(--colors-neutral-line-4); --Table-onDragging-opacity: 0.1; // 背景用到了 rgba，所以必须再提供这种写法，搜一下这个变量就知道为什么了 --Table-onHover-bg-rgb: 245, 251, 255; --Table-onHover-bg: var(--colors-brand-10); - --Table-onHover-borderColor:var(--colors-neutral-line-8); + --Table-onHover-borderColor: var(--colors-neutral-line-8); --Table-onHover-boxShadow: var(--shadows-shadow-normal); --Table-onHover-color: var(--text-color); --Table-onModified-bg: #e8f0fe; @@ -1197,7 +1197,7 @@ $remFactor: 16px; --Table-thead-iconColor: var(--colors-neutral-text-5); --Table-toolbar-marginX: #{px2rem(4px)}; --Table-toolbar-marginY: var(--gap-base); - --Table-tree-borderColor:var(--colors-neutral-line-8); + --Table-tree-borderColor: var(--colors-neutral-line-8); --Table-searchableForm-backgroundColor: #f6f7f8; --Table-searchableForm-borderRadius: #{px2rem(4px)}; --Table-empty-icon-size: #{px2rem(74px)}; @@ -1209,9 +1209,9 @@ $remFactor: 16px; --TableCell--edge-paddingX-default: var(--gap-base); --TableCell-filterBtn--onActive-color: var(--colors-brand-5); --TableCell-filterBtn-width: #{px2rem(16px)}; - --TableCell-filterPopOver-dropDownItem-height: var(--sizes-base-16); + --TableCell-filterPopOver-dropDownItem-height: var(--sizes-base-16); --TableCell-filterPopOver-dropDownItem-padding: var(--sizes-size-0) - var(--sizes-size-6); + var(--sizes-size-6); --TableCell-line-height-large: #{px2rem(40px)}; --TableCell-line-height-middle: #{px2rem(30px)}; --TableCell-height: #{px2rem(40px)}; @@ -1248,7 +1248,7 @@ $remFactor: 16px; --TableCell-sortBtn--default-onActive-opacity: 1; --TableCell-sortBtn--default-opacity: 0; --TableCell-sortBtn--onActive-color: var(--colors-brand-5); - --TableCell-sortBtn-width:var(--sizes-size-8); + --TableCell-sortBtn-width: var(--sizes-size-8); --TableCell-icon-gap: var(--gap-sm); --Table-fixedLeftLast-boxShadow: inset 10px 0 8px -8px #00000026; @@ -1287,7 +1287,7 @@ $remFactor: 16px; --Tabs--simple-split-size: var(--sizes-size-3) var(--sizes-size-9); --Tabs--sidebar-iconColor: var(--colors-brand-5); - --Tabs--simple-split-color: var(--colors-neutral-text-8); + --Tabs--simple-split-color: var(--colors-neutral-text-8); --Tabs-borderRadius: var(--borderRadius); --Tabs-borderWidth: var(--borderWidth); --Tabs-color: var(--text-color); @@ -1361,7 +1361,7 @@ $remFactor: 16px; --Toast--danger-color: var(--colors-neutral-text-2); --Toast--info-bgColor: var(--colors-neutral-fill-11); --Toast--info-borderColor: var(--colors-neutral-line-11); - --Toast--info-color:var(--colors-neutral-text-2); + --Toast--info-color: var(--colors-neutral-text-2); --Toast--success-bgColor: var(--colors-neutral-fill-11); --Toast--success-borderColor: var(--colors-neutral-line-11); --Toast--success-color: var(--colors-neutral-text-2); @@ -1369,7 +1369,7 @@ $remFactor: 16px; --Toast--warning-borderColor: var(--colors-neutral-line-11); --Toast--warning-color: var(--colors-neutral-text-2); - --Toast-border-width:var(--borders-width-2); + --Toast-border-width: var(--borders-width-2); --Toast-borderRadius: var(--borders-radius-3); --Toast-box-shadow: 0px 4px 6px 0px rgba(8, 14, 26, 0.06), 0px 1px 10px 0px rgba(8, 14, 26, 0.05), @@ -1445,7 +1445,7 @@ $remFactor: 16px; --Tree-item-onHover-bg: var(--colors-neutral-fill-10); --Tree-item-onHover-bg-pure: var(--colors-neutral-fill-10); --Tree-itemArrowWidth: #{px2rem(16px)}; - --Tree-itemHeight:var(--sizes-base-13); + --Tree-itemHeight: var(--sizes-base-13); --Tree-itemLabel--onChecked-color: var(--Form-selectValue-color); --TreeSelect-popover-bg: var(--colors-neutral-fill-11); --Tree-item-text-max-height: #{px2rem(250px)}; @@ -1456,11 +1456,12 @@ $remFactor: 16px; --Tree-item-onChekced-bg-borderRadius: var(--borders-radius-2); --Wizard-badge-bg: var(--colors-neutral-fill-11); - --Wizard-badge-border: var(--borders-width-2) var(--borders-style-2) var(--colors-neutral-fill-6); + --Wizard-badge-border: var(--borders-width-2) var(--borders-style-2) + var(--colors-neutral-fill-6); --Wizard-badge-borderRadius: var(--borders-radius-7); --Wizard-badge-color: var(--colors-neutral-text-6); --Wizard-badge-fontSize: var(--fonts-size-7); - --Wizard-badge-marginRight: var(--sizes-size-4); + --Wizard-badge-marginRight: var(--sizes-size-4); --Wizard-badge-onActive-backgroundColor: var(--colors-neutral-text-3); --Wizard-badge-onComplete-backgroundColor: var(--colors-neutral-text-3); --Wizard-badge-size: var(--sizes-base-14); diff --git a/packages/amis-ui/scss/components/_badge.scss b/packages/amis-ui/scss/components/_badge.scss index 7c41c01cf..37a9e8de4 100644 --- a/packages/amis-ui/scss/components/_badge.scss +++ b/packages/amis-ui/scss/components/_badge.scss @@ -61,7 +61,7 @@ white-space: nowrap; text-align: center; padding: 0 6px; - border: 1px solid #FFFFFF; + border: 1px solid #ffffff; } // 只显示小红点 @@ -78,14 +78,14 @@ position: absolute; top: 0; bottom: 0; - right: 0 + right: 0; } &-ribbon { color: var(--Badge-color); height: var(--Badge-size); line-height: var(--Badge-size); - transform: translateX(calc(50% - 5px)) rotate(45deg) scale(.7); + transform: translateX(calc(50% - 5px)) rotate(45deg) scale(0.7); transform-origin: 50% 0; border-radius: 0; text-align: center; @@ -93,19 +93,20 @@ top: 5px; } - &-ribbon-out--top-left, &-ribbon-out--bottom-left { + &-ribbon-out--top-left, + &-ribbon-out--bottom-left { left: 0; - right: auto + right: auto; } &-ribbon--top-left { - transform: translateX(calc(-50% + 5px)) rotate(-45deg) scale(.7); + transform: translateX(calc(-50% + 5px)) rotate(-45deg) scale(0.7); left: 0; right: auto; } &-ribbon--bottom-left { - transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(.7); + transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(0.7); transform-origin: 50% 100%; left: 0; right: auto; @@ -114,7 +115,7 @@ } &-ribbon--bottom-right { - transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(.7); + transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(0.7); transform-origin: 50% 100%; left: auto; right: 0; diff --git a/packages/amis-ui/scss/components/_timeline.scss b/packages/amis-ui/scss/components/_timeline.scss index 2e63e8b2e..db21da0fb 100644 --- a/packages/amis-ui/scss/components/_timeline.scss +++ b/packages/amis-ui/scss/components/_timeline.scss @@ -166,7 +166,7 @@ position: absolute; height: var(--TimelineItem--left-line-width); width: calc(100% - var(--TimelineItem--left-line-left)); - left: var(--TimelineItem--horizontal-left-line-top); + left: var(--TimelineItem--horizontal-left-line-top); top: var(--TimelineItem--left-line-left); background-color: var(--TimelineItem--line-bg); } @@ -220,7 +220,6 @@ color: var(--TimelineItem--text-primary-color); font-size: var(--Timeline--font-size); margin-bottom: var(--TimelineItem--content-title-margin-bottom); - } .#{$ns}TimelineItem-detail { diff --git a/packages/amis-ui/scss/components/react-datetime.scss b/packages/amis-ui/scss/components/react-datetime.scss index 84ad553a0..dab11e124 100644 --- a/packages/amis-ui/scss/components/react-datetime.scss +++ b/packages/amis-ui/scss/components/react-datetime.scss @@ -47,7 +47,7 @@ } .headerTable { border-spacing: 0; - border-bottom: 1px solid #E8E9EB; + border-bottom: 1px solid #e8e9eb; } } .rdtPicker td, @@ -76,12 +76,12 @@ } .rdtPicker td.rdtOld, .rdtPicker td.rdtNew { - color: #B8BABF; + color: #b8babf; } .rdtPicker td.rdtToday { position: relative; > span { - border: 1px solid #2468F2; + border: 1px solid #2468f2; } } .rdtPicker td.rdtActive, @@ -96,20 +96,20 @@ .rdtPicker td.rdtDisabled, .rdtPicker td.rdtDisabled:hover { background: none; - color: #B8BABF; + color: #b8babf; cursor: not-allowed; } .rdtPicker td span.rdtOld { - color: #B8BABF; + color: #b8babf; } .rdtPicker td span.rdtDisabled, .rdtPicker td span.rdtDisabled:hover { background: none; - color: #B8BABF; + color: #b8babf; cursor: not-allowed; > span { - border-color: #E8E9EB; + border-color: #e8e9eb; } } .rdtPicker th { @@ -147,7 +147,7 @@ .rdtPicker th.rdtDisabled, .rdtPicker th.rdtDisabled:hover { background: none; - color: #B8BABF; + color: #b8babf; cursor: not-allowed; } .rdtPicker thead tr:first-of-type th {