mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 11:32:52 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

perf: only one parent selector in style (#40325)

Browse Source 
* chore: add parent selector

* chore: update lint script

* chore: code clean

* perf: style

* chore: remove demo test cssinjs

* fix: input group
This commit is contained in:
MadCcc 2023-01-20 10:31:27 +08:00 committed by GitHub
parent c054a2bb80
commit 40944a1c02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 266 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.dumi/theme/layouts/GlobalLayout.tsx
View File

@ -2,6 +2,7 @@ import {
createCache, createCache,
legacyNotSelectorLinter, legacyNotSelectorLinter,
logicalPropertiesLinter, logicalPropertiesLinter,
parentSelectorLinter,
StyleProvider, StyleProvider,
} from '@ant-design/cssinjs'; } from '@ant-design/cssinjs';
import { ConfigProvider, theme as antdTheme } from 'antd'; import { ConfigProvider, theme as antdTheme } from 'antd';
@ -107,7 +108,10 @@ const GlobalLayout: React.FC = () => {
); );
return ( return (
<StyleProvider cache={styleCache} linters={[logicalPropertiesLinter, legacyNotSelectorLinter]}> <StyleProvider
cache={styleCache}
linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
>
<SiteContext.Provider value={siteContextValue}> <SiteContext.Provider value={siteContextValue}>
<ConfigProvider <ConfigProvider
theme={{ theme={{

6
components/alert/style/index.ts
View File

@ -53,7 +53,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
wordWrap: 'break-word', wordWrap: 'break-word',
borderRadius, borderRadius,
'&&-rtl': { [`&${componentCls}-rtl`]: {
direction: 'rtl', direction: 'rtl',
}, },
@ -77,7 +77,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
color: colorText, color: colorText,
}, },
'&&-motion-leave': { [`&${componentCls}-motion-leave`]: {
overflow: 'hidden', overflow: 'hidden',
opacity: 1, opacity: 1,
transition: `max-height ${duration} ${motionEaseInOutCirc}, opacity ${duration} ${motionEaseInOutCirc}, transition: `max-height ${duration} ${motionEaseInOutCirc}, opacity ${duration} ${motionEaseInOutCirc},
@ -85,7 +85,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
margin-bottom ${duration} ${motionEaseInOutCirc}`, margin-bottom ${duration} ${motionEaseInOutCirc}`,
}, },
'&&-motion-leave-active': { [`&${componentCls}-motion-leave-active`]: {
maxHeight: 0, maxHeight: 0,
marginBottom: '0 !important', marginBottom: '0 !important',
paddingTop: 0, paddingTop: 0,

46
components/button/style/index.ts
View File

@ -55,30 +55,13 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
}, },
// make `btn-icon-only` not too narrow // make `btn-icon-only` not too narrow
'&-icon-only&-compact-item': { [`&-icon-only${componentCls}-compact-item`]: {
flex: 'none', flex: 'none',
}, },
// Special styles for Primary Button // Special styles for Primary Button
[`&-compact-item${componentCls}-primary`]: { [`&-compact-item${componentCls}-primary`]: {
'&:not([disabled]) + &:not([disabled])': { [`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
position: 'relative', {
'&:before': {
position: 'absolute',
top: -token.lineWidth,
insetInlineStart: -token.lineWidth,
display: 'inline-block',
width: token.lineWidth,
height: `calc(100% + ${token.lineWidth * 2}px)`,
backgroundColor: token.colorPrimaryHover,
content: '""',
},
},
},
// Special styles for Primary Button
'&-compact-vertical-item': {
[`&${componentCls}-primary`]: {
'&:not([disabled]) + &:not([disabled])': {
position: 'relative', position: 'relative',
'&:before': { '&:before': {
@ -86,12 +69,31 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
top: -token.lineWidth, top: -token.lineWidth,
insetInlineStart: -token.lineWidth, insetInlineStart: -token.lineWidth,
display: 'inline-block', display: 'inline-block',
width: `calc(100% + ${token.lineWidth * 2}px)`, width: token.lineWidth,
height: token.lineWidth, height: `calc(100% + ${token.lineWidth * 2}px)`,
backgroundColor: token.colorPrimaryHover, backgroundColor: token.colorPrimaryHover,
content: '""', content: '""',
}, },
}, },
},
// Special styles for Primary Button
'&-compact-vertical-item': {
[`&${componentCls}-primary`]: {
[`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
{
position: 'relative',
'&:before': {
position: 'absolute',
top: -token.lineWidth,
insetInlineStart: -token.lineWidth,
display: 'inline-block',
width: `calc(100% + ${token.lineWidth * 2}px)`,
height: token.lineWidth,
backgroundColor: token.colorPrimaryHover,
content: '""',
},
},
}, },
}, },
}, },

2
components/calendar/style/index.ts
View File

@ -119,7 +119,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
display: 'none', display: 'none',
}, },
// >>> Selected // >>> Selected
'&-in-view:is(&-selected)': { [`&-in-view${componentCls}-cell-selected`]: {
[`${calendarCls}-date, ${calendarCls}-date-today`]: { [`${calendarCls}-date, ${calendarCls}-date-today`]: {
background: calendarItemActiveBg, background: calendarItemActiveBg,
}, },

4
components/checkbox/style/index.ts
View File

@ -55,11 +55,11 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
}, },
// Checkbox near checkbox // Checkbox near checkbox
'& + &': { [`& + ${wrapperCls}`]: {
marginInlineStart: token.marginXS, marginInlineStart: token.marginXS,
}, },
'&&-in-form-item': { [`&${wrapperCls}-in-form-item`]: {
'input[type="checkbox"]': { 'input[type="checkbox"]': {
width: 14, // FIXME: magic width: 14, // FIXME: magic
height: 14, // FIXME: magic height: 14, // FIXME: magic

7
components/config-provider/style/index.ts
View File

@ -9,7 +9,12 @@ const useStyle = (iconPrefixCls: string) => {
{ theme, token, hashId: '', path: ['ant-design-icons', iconPrefixCls] }, { theme, token, hashId: '', path: ['ant-design-icons', iconPrefixCls] },
() => [ () => [
{ {
[`.${iconPrefixCls}`]: resetIcon(), [`.${iconPrefixCls}`]: {
...resetIcon(),
[`.${iconPrefixCls} .${iconPrefixCls}-icon`]: {
display: 'block',
},
},
}, },
], ],
); );

58
components/date-picker/style/index.ts
View File

@ -870,7 +870,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
return { return {
[componentCls]: { [componentCls]: {
'&-status-error&': { [`&-status-error${componentCls}`]: {
'&, &:not([disabled]):hover': { '&, &:not([disabled]):hover': {
backgroundColor: colorBgContainer, backgroundColor: colorBgContainer,
borderColor: colorError, borderColor: colorError,
@ -891,7 +891,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
}, },
}, },
'&-status-warning&': { [`&-status-warning${componentCls}`]: {
'&, &:not([disabled]):hover': { '&, &:not([disabled]):hover': {
backgroundColor: colorBgContainer, backgroundColor: colorBgContainer,
borderColor: colorWarning, borderColor: colorWarning,
@ -984,7 +984,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
...genActiveStyle(token), ...genActiveStyle(token),
}, },
'&&-disabled': { [`&${componentCls}-disabled`]: {
background: colorBgContainerDisabled, background: colorBgContainerDisabled,
borderColor: colorBorder, borderColor: colorBorder,
cursor: 'not-allowed', cursor: 'not-allowed',
@ -994,7 +994,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
}, },
}, },
'&&-borderless': { [`&${componentCls}-borderless`]: {
backgroundColor: 'transparent !important', backgroundColor: 'transparent !important',
borderColor: 'transparent !important', borderColor: 'transparent !important',
boxShadow: 'none !important', boxShadow: 'none !important',
@ -1178,11 +1178,11 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
}, },
zIndex: zIndexPopup, zIndex: zIndexPopup,
'&&-hidden': { [`&${componentCls}-dropdown-hidden`]: {
display: 'none', display: 'none',
}, },
'&&-placement-bottomLeft': { [`&${componentCls}-dropdown-placement-bottomLeft`]: {
[`${componentCls}-range-arrow`]: { [`${componentCls}-range-arrow`]: {
top: 0, top: 0,
display: 'block', display: 'block',
@ -1190,7 +1190,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
}, },
}, },
'&&-placement-topLeft': { [`&${componentCls}-dropdown-placement-topLeft`]: {
[`${componentCls}-range-arrow`]: { [`${componentCls}-range-arrow`]: {
bottom: 0, bottom: 0,
display: 'block', display: 'block',
@ -1198,29 +1198,33 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
}, },
}, },
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft, [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight, &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft, &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: { &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topRight`]:
animationName: slideDownIn, {
}, animationName: slideDownIn,
},
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft, [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomRight, &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft, &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomRight`]: { &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomRight`]:
animationName: slideUpIn, {
}, animationName: slideUpIn,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft, [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: { &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topRight`]:
animationName: slideDownOut, {
}, animationName: slideDownOut,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft, [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomRight`]: { &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomRight`]:
animationName: slideUpOut, {
}, animationName: slideUpOut,
},
// Time picker with additional style // Time picker with additional style
[`${componentCls}-panel > ${componentCls}-time-panel`]: { [`${componentCls}-panel > ${componentCls}-time-panel`]: {

58
components/divider/style/index.ts
View File

@ -43,7 +43,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
margin: `${token.dividerHorizontalGutterMargin}px 0`, margin: `${token.dividerHorizontalGutterMargin}px 0`,
}, },
'&-horizontal&-with-text': { [`&-horizontal${componentCls}-with-text`]: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`, margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
@ -66,7 +66,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
}, },
}, },
'&-horizontal&-with-text-left': { [`&-horizontal${componentCls}-with-text-left`]: {
'&::before': { '&::before': {
width: '5%', width: '5%',
}, },
@ -76,7 +76,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
}, },
}, },
'&-horizontal&-with-text-right': { [`&-horizontal${componentCls}-with-text-right`]: {
'&::before': { '&::before': {
width: '95%', width: '95%',
}, },
@ -98,52 +98,54 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
borderWidth: `${lineWidth}px 0 0`, borderWidth: `${lineWidth}px 0 0`,
}, },
'&-horizontal&-with-text&-dashed': { [`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: {
'&::before, &::after': { '&::before, &::after': {
borderStyle: 'dashed none none', borderStyle: 'dashed none none',
}, },
}, },
'&-vertical&-dashed': { [`&-vertical${componentCls}-dashed`]: {
borderInlineStart: lineWidth, borderInlineStart: lineWidth,
borderInlineEnd: 0, borderInlineEnd: 0,
borderBlockStart: 0, borderBlockStart: 0,
borderBlockEnd: 0, borderBlockEnd: 0,
}, },
'&-plain&-with-text': { [`&-plain${componentCls}-with-text`]: {
color: token.colorText, color: token.colorText,
fontWeight: 'normal', fontWeight: 'normal',
fontSize: token.fontSize, fontSize: token.fontSize,
}, },
'&-horizontal&-with-text-left&-no-default-orientation-margin-left': { [`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]:
'&::before': { {
width: 0, '&::before': {
width: 0,
},
'&::after': {
width: '100%',
},
[`${componentCls}-inner-text`]: {
paddingInlineStart: sizePaddingEdgeHorizontal,
},
}, },
'&::after': { [`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]:
width: '100%', {
}, '&::before': {
width: '100%',
},
[`${componentCls}-inner-text`]: { '&::after': {
paddingInlineStart: sizePaddingEdgeHorizontal, width: 0,
}, },
},
'&-horizontal&-with-text-right&-no-default-orientation-margin-right': { [`${componentCls}-inner-text`]: {
'&::before': { paddingInlineEnd: sizePaddingEdgeHorizontal,
width: '100%', },
}, },
'&::after': {
width: 0,
},
[`${componentCls}-inner-text`]: {
paddingInlineEnd: sizePaddingEdgeHorizontal,
},
},
}, },
}; };
}; };

68
components/dropdown/style/index.ts
View File

@ -104,17 +104,17 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
// ============================================================= // =============================================================
// Offset the popover to account for the dropdown arrow // Offset the popover to account for the dropdown arrow
[` [`
&-show-arrow&-placement-topLeft, &-show-arrow${componentCls}-placement-topLeft,
&-show-arrow&-placement-top, &-show-arrow${componentCls}-placement-top,
&-show-arrow&-placement-topRight &-show-arrow${componentCls}-placement-topRight
`]: { `]: {
paddingBottom: dropdownArrowDistance, paddingBottom: dropdownArrowDistance,
}, },
[` [`
&-show-arrow&-placement-bottomLeft, &-show-arrow${componentCls}-placement-bottomLeft,
&-show-arrow&-placement-bottom, &-show-arrow${componentCls}-placement-bottom,
&-show-arrow&-placement-bottomRight &-show-arrow${componentCls}-placement-bottomRight
`]: { `]: {
paddingTop: dropdownArrowDistance, paddingTop: dropdownArrowDistance,
}, },
@ -201,35 +201,39 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
// ============================================================= // =============================================================
// When position is not enough for dropdown, the placement will revert. // When position is not enough for dropdown, the placement will revert.
// We will handle this with revert motion name. // We will handle this with revert motion name.
[`&${antCls}-slide-down-enter${antCls}-slide-down-enter-active&-placement-bottomLeft, [`&${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottomLeft,
&${antCls}-slide-down-appear${antCls}-slide-down-appear-active&-placement-bottomLeft &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottomLeft,
&${antCls}-slide-down-enter${antCls}-slide-down-enter-active&-placement-bottom, &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottom,
&${antCls}-slide-down-appear${antCls}-slide-down-appear-active&-placement-bottom, &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottom,
&${antCls}-slide-down-enter${antCls}-slide-down-enter-active&-placement-bottomRight, &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottomRight,
&${antCls}-slide-down-appear${antCls}-slide-down-appear-active&-placement-bottomRight`]: { &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottomRight`]:
animationName: slideUpIn, {
}, animationName: slideUpIn,
},
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft, [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-topLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft, &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-topLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-top, &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-top,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-top, &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-top,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight, &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-topRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: { &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-topRight`]:
animationName: slideDownIn, {
}, animationName: slideDownIn,
},
[`&${antCls}-slide-down-leave${antCls}-slide-down-leave-active&-placement-bottomLeft, [`&${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottomLeft,
&${antCls}-slide-down-leave${antCls}-slide-down-leave-active&-placement-bottom, &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottom,
&${antCls}-slide-down-leave${antCls}-slide-down-leave-active&-placement-bottomRight`]: { &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottomRight`]:
animationName: slideUpOut, {
}, animationName: slideUpOut,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft, [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-top, &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-top,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: { &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topRight`]:
animationName: slideDownOut, {
}, animationName: slideDownOut,
},
}, },
}, },

2
components/float-button/style/index.ts
View File

@ -103,7 +103,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
position: 'relative', position: 'relative',
marginBottom: margin, marginBottom: margin,
}, },
'&&-rtl': { [`&${groupPrefixCls}-rtl`]: {
direction: 'rtl', direction: 'rtl',
}, },
[componentCls]: { [componentCls]: {

2
components/input/style/index.ts
View File

@ -388,7 +388,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
}, },
}, },
'&&-compact': { [`&${componentCls}-group-compact`]: {
display: 'block', display: 'block',
...clearFix(), ...clearFix(),

32
components/pagination/style/index.tsx
View File

@ -118,24 +118,25 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
const { componentCls } = token; const { componentCls } = token;
return { return {
[`&&-mini ${componentCls}-total-text, &&-mini ${componentCls}-simple-pager`]: { [`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]:
height: token.paginationItemSizeSM, {
lineHeight: `${token.paginationItemSizeSM}px`, height: token.paginationItemSizeSM,
}, lineHeight: `${token.paginationItemSizeSM}px`,
},
[`&&-mini ${componentCls}-item`]: { [`&${componentCls}-mini ${componentCls}-item`]: {
minWidth: token.paginationItemSizeSM, minWidth: token.paginationItemSizeSM,
height: token.paginationItemSizeSM, height: token.paginationItemSizeSM,
margin: 0, margin: 0,
lineHeight: `${token.paginationItemSizeSM - 2}px`, lineHeight: `${token.paginationItemSizeSM - 2}px`,
}, },
[`&&-mini ${componentCls}-item:not(${componentCls}-item-active)`]: { [`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderColor: 'transparent', borderColor: 'transparent',
}, },
[`&&-mini ${componentCls}-prev, &&-mini ${componentCls}-next`]: { [`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
minWidth: token.paginationItemSizeSM, minWidth: token.paginationItemSizeSM,
height: token.paginationItemSizeSM, height: token.paginationItemSizeSM,
margin: 0, margin: 0,
@ -143,8 +144,8 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
}, },
[` [`
&&-mini ${componentCls}-prev ${componentCls}-item-link, &${componentCls}-mini ${componentCls}-prev ${componentCls}-item-link,
&&-mini ${componentCls}-next ${componentCls}-item-link &${componentCls}-mini ${componentCls}-next ${componentCls}-item-link
`]: { `]: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderColor: 'transparent', borderColor: 'transparent',
@ -155,13 +156,14 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
}, },
}, },
[`&&-mini ${componentCls}-jump-prev, &&-mini ${componentCls}-jump-next`]: { [`&${componentCls}-mini ${componentCls}-jump-prev, &${componentCls}-mini ${componentCls}-jump-next`]:
height: token.paginationItemSizeSM, {
marginInlineEnd: 0, height: token.paginationItemSizeSM,
lineHeight: `${token.paginationItemSizeSM}px`, marginInlineEnd: 0,
}, lineHeight: `${token.paginationItemSizeSM}px`,
},
[`&&-mini ${componentCls}-options`]: { [`&${componentCls}-mini ${componentCls}-options`]: {
marginInlineStart: token.paginationMiniOptionsMarginInlineStart, marginInlineStart: token.paginationMiniOptionsMarginInlineStart,
[`&-size-changer`]: { [`&-size-changer`]: {

6
components/radio/style/index.tsx
View File

@ -47,7 +47,7 @@ const getGroupRadioStyle: GenerateStyle<RadioToken> = (token) => {
fontSize: 0, fontSize: 0,
// RTL // RTL
'&&-rtl': { [`&${groupPrefixCls}-rtl`]: {
direction: 'rtl', direction: 'rtl',
}, },
@ -99,7 +99,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
cursor: 'pointer', cursor: 'pointer',
// RTL // RTL
'&&-rtl': { [`&${componentCls}-wrapper-rtl`]: {
direction: 'rtl', direction: 'rtl',
}, },
@ -469,7 +469,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
}, },
}, },
'&-disabled&-checked': { [`&-disabled${componentCls}-button-wrapper-checked`]: {
color: radioDisabledButtonCheckedColor, color: radioDisabledButtonCheckedColor,
backgroundColor: radioDisabledButtonCheckedBg, backgroundColor: radioDisabledButtonCheckedBg,
borderColor: colorBorder, borderColor: colorBorder,

10
components/segmented/style/index.tsx
View File

@ -63,16 +63,16 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
}, },
// RTL styles // RTL styles
'&&-rtl': { [`&${componentCls}-rtl`]: {
direction: 'rtl', direction: 'rtl',
}, },
// block styles // block styles
'&&-block': { [`&${componentCls}-block`]: {
display: 'flex', display: 'flex',
}, },
[`&&-block ${componentCls}-item`]: { [`&${componentCls}-block ${componentCls}-item`]: {
flex: 1, flex: 1,
minWidth: 0, minWidth: 0,
}, },
@ -151,7 +151,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
}, },
// size styles // size styles
'&&-lg': { [`&${componentCls}-lg`]: {
borderRadius: token.borderRadiusLG, borderRadius: token.borderRadiusLG,
[`${componentCls}-item-label`]: { [`${componentCls}-item-label`]: {
minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2, minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
@ -164,7 +164,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
}, },
}, },
'&&-sm': { [`&${componentCls}-sm`]: {
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
[`${componentCls}-item-label`]: { [`${componentCls}-item-label`]: {
minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2, minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,

22
components/select/style/dropdown.tsx
View File

@ -57,26 +57,28 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
boxShadow: token.boxShadowSecondary, boxShadow: token.boxShadowSecondary,
[` [`
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft, &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomLeft
`]: { `]: {
animationName: slideUpIn, animationName: slideUpIn,
}, },
[` [`
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft, &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft
`]: { `]: {
animationName: slideDownIn, animationName: slideDownIn,
}, },
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft`]: { [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomLeft`]:
animationName: slideUpOut, {
}, animationName: slideUpOut,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft`]: { [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft`]:
animationName: slideDownOut, {
}, animationName: slideDownOut,
},
'&-hidden': { '&-hidden': {
display: 'none', display: 'none',

2
components/select/style/index.tsx
View File

@ -259,7 +259,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
}, },
// ==================== In Form ==================== // ==================== In Form ====================
'&&-in-form-item': { [`&${componentCls}-in-form-item`]: {
width: '100%', width: '100%',
}, },
}, },

2
components/slider/style/index.tsx
View File

@ -188,7 +188,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
}, },
}, },
'&&-disabled': { [`&${componentCls}-disabled`]: {
cursor: 'not-allowed', cursor: 'not-allowed',
[`${componentCls}-rail`]: { [`${componentCls}-rail`]: {

4
components/style/index.ts
View File

@ -46,10 +46,6 @@ export const resetIcon = (): CSSObject => ({
svg: { svg: {
display: 'inline-block', display: 'inline-block',
}, },
'& &-icon': {
display: 'block',
},
}); });
export const clearFix = (): CSSObject => ({ export const clearFix = (): CSSObject => ({

12
components/tag/style/index.ts
View File

@ -52,13 +52,13 @@ const genPresetStyle = (token: TagToken) =>
})); }));
const genBaseStyle = (token: TagToken): CSSInterpolation => { const genBaseStyle = (token: TagToken): CSSInterpolation => {
const { paddingXXS, lineWidth, tagPaddingHorizontal } = token; const { paddingXXS, lineWidth, tagPaddingHorizontal, componentCls } = token;
const paddingInline = tagPaddingHorizontal - lineWidth; const paddingInline = tagPaddingHorizontal - lineWidth;
const iconMarginInline = paddingXXS - lineWidth; const iconMarginInline = paddingXXS - lineWidth;
return { return {
// Result // Result
[token.componentCls]: { [componentCls]: {
...resetComponent(token), ...resetComponent(token),
display: 'inline-block', display: 'inline-block',
height: 'auto', height: 'auto',
@ -75,7 +75,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
textAlign: 'start', textAlign: 'start',
// RTL // RTL
'&&-rtl': { [`&${componentCls}-rtl`]: {
direction: 'rtl', direction: 'rtl',
}, },
@ -83,7 +83,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
color: token.tagDefaultColor, color: token.tagDefaultColor,
}, },
[`${token.componentCls}-close-icon`]: { [`${componentCls}-close-icon`]: {
marginInlineStart: iconMarginInline, marginInlineStart: iconMarginInline,
color: token.colorTextDescription, color: token.colorTextDescription,
fontSize: token.tagIconSize, fontSize: token.tagIconSize,
@ -95,7 +95,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
}, },
}, },
[`&&-has-color`]: { [`&${componentCls}-has-color`]: {
borderColor: 'transparent', borderColor: 'transparent',
[`&, a, a:hover, ${token.iconCls}-close, ${token.iconCls}-close:hover`]: { [`&, a, a:hover, ${token.iconCls}-close, ${token.iconCls}-close:hover`]: {
@ -108,7 +108,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
borderColor: 'transparent', borderColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
[`&:not(${token.componentCls}-checkable-checked):hover`]: { [`&:not(${componentCls}-checkable-checked):hover`]: {
color: token.colorPrimary, color: token.colorPrimary,
backgroundColor: token.colorFillSecondary, backgroundColor: token.colorFillSecondary,
}, },

2
components/tree/style/index.ts
View File

@ -75,7 +75,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
borderRadius: token.borderRadius, borderRadius: token.borderRadius,
transition: `background-color ${token.motionDurationSlow}`, transition: `background-color ${token.motionDurationSlow}`,
'&&-rtl': { [`&${treeCls}-rtl`]: {
// >>> Switcher // >>> Switcher
[`${treeCls}-switcher`]: { [`${treeCls}-switcher`]: {
'&_close': { '&_close': {

20
components/typography/style/index.ts
View File

@ -26,19 +26,19 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
color: token.colorText, color: token.colorText,
wordBreak: 'break-word', wordBreak: 'break-word',
lineHeight: token.lineHeight, lineHeight: token.lineHeight,
'&&-secondary': { [`&${componentCls}-secondary`]: {
color: token.colorTextDescription, color: token.colorTextDescription,
}, },
'&&-success': { [`&${componentCls}-success`]: {
color: token.colorSuccess, color: token.colorSuccess,
}, },
'&&-warning': { [`&${componentCls}-warning`]: {
color: token.colorWarning, color: token.colorWarning,
}, },
'&&-danger': { [`&${componentCls}-danger`]: {
color: token.colorError, color: token.colorError,
'a&:active, a&:focus': { 'a&:active, a&:focus': {
color: token.colorErrorActive, color: token.colorErrorActive,
@ -48,7 +48,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
}, },
}, },
'&&-disabled': { [`&${componentCls}-disabled`]: {
color: token.colorTextDisabled, color: token.colorTextDisabled,
cursor: 'not-allowed', cursor: 'not-allowed',
userSelect: 'none', userSelect: 'none',
@ -64,11 +64,11 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
...getTitleStyles(token), ...getTitleStyles(token),
[` [`
& + h1&, & + h1${componentCls},
& + h2&, & + h2${componentCls},
& + h3&, & + h3${componentCls},
& + h4&, & + h4${componentCls},
& + h5& & + h5${componentCls}
`]: { `]: {
marginTop: sizeMarginHeadingVerticalStart, marginTop: sizeMarginHeadingVerticalStart,
}, },

5
package.json
View File

@ -68,13 +68,14 @@
"dist": "antd-tools run dist", "dist": "antd-tools run dist",
"dist:esbuild": "ESBUILD=true npm run dist", "dist:esbuild": "ESBUILD=true npm run dist",
"dist:esbuild-no-dup-check": "ESBUILD=true NO_DUP_CHECK=true npm run dist", "dist:esbuild-no-dup-check": "ESBUILD=true NO_DUP_CHECK=true npm run dist",
"lint": "npm run tsc && npm run lint:script && npm run lint:demo && npm run lint:md", "lint": "npm run version && npm run tsc && npm run lint:script && npm run lint:demo && npm run lint:md && npm run lint:style",
"lint-fix": "npm run lint-fix:script && npm run lint-fix:demo", "lint-fix": "npm run lint-fix:script && npm run lint-fix:demo",
"lint-fix:demo": "npm run lint:demo -- --fix", "lint-fix:demo": "npm run lint:demo -- --fix",
"lint-fix:script": "npm run lint:script -- --fix", "lint-fix:script": "npm run lint:script -- --fix",
"lint:demo": "eslint components/*/demo/*.md", "lint:demo": "eslint components/*/demo/*.md",
"lint:deps": "antd-tools run deps-lint", "lint:deps": "antd-tools run deps-lint",
"lint:md": "remark . -f -q", "lint:md": "remark . -f -q",
"lint:style": "ts-node --project tsconfig.node.json scripts/check-cssinjs.js",
"lint:script": "eslint . --ext .js,.jsx,.ts,.tsx", "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx",
"pre-publish": "npm run test-all -- --skip-build", "pre-publish": "npm run test-all -- --skip-build",
"prettier": "prettier -c --write **/*", "prettier": "prettier -c --write **/*",
@ -107,7 +108,7 @@
], ],
"dependencies": { "dependencies": {
"@ant-design/colors": "^7.0.0", "@ant-design/colors": "^7.0.0",
"@ant-design/cssinjs": "^1.5.1", "@ant-design/cssinjs": "^1.5.6",
"@ant-design/icons": "^5.0.0", "@ant-design/icons": "^5.0.0",
"@ant-design/react-slick": "~1.0.0", "@ant-design/react-slick": "~1.0.0",
"@babel/runtime": "^7.18.3", "@babel/runtime": "^7.18.3",

66
scripts/check-cssinjs.js Normal file
View File

@ -0,0 +1,66 @@
/* eslint-disable import/no-unresolved,no-console,global-require,import/no-dynamic-require */
const chalk = require('chalk');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const glob = require('glob');
const path = require('path');
const {
StyleProvider,
logicalPropertiesLinter,
legacyNotSelectorLinter,
parentSelectorLinter,
} = require('@ant-design/cssinjs');
console.log(chalk.green(`🔥 Checking CSS-in-JS...`));
let errorCount = 0;
const originError = console.error;
console.error = (msg) => {
if (msg.includes('Warning: [Ant Design CSS-in-JS]')) {
errorCount += 1;
console.log(chalk.red(`❌ `), msg.slice(msg.indexOf('Error in')).replace(/\s+/g, ' '));
} else {
originError(msg);
}
};
const EmptyElement = React.createElement('div');
const styleFiles = glob.sync(
path.join(
process.cwd(),
'components/!(version|config-provider|icon|locale-provider|auto-complete|col|row|time-picker|)/style/index.?(ts|tsx)',
),
);
styleFiles.forEach((file) => {
let useStyle = () => {};
if (file.includes('grid')) {
const { useColStyle, useRowStyle } = require(file);
useStyle = () => {
useRowStyle();
useColStyle();
};
} else {
useStyle = require(file).default;
}
const Component = () => {
useStyle('check');
return EmptyElement;
};
ReactDOMServer.renderToString(
React.createElement(
StyleProvider,
{ linters: [logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter] },
React.createElement(Component),
),
);
});
if (errorCount > 0) {
console.log(chalk.red(`❌ CSS-in-JS check failed with ${errorCount} errors.`));
process.exit(1);
} else {
console.log(chalk.green(`✅ CSS-in-JS check passed.`));
}

37
tests/shared/demoTest.tsx
View File

@ -1,14 +1,8 @@
/* eslint-disable react/jsx-no-constructed-context-values */ /* eslint-disable react/jsx-no-constructed-context-values */
import { import { createCache, StyleProvider } from '@ant-design/cssinjs';
createCache,
legacyNotSelectorLinter,
logicalPropertiesLinter,
StyleProvider,
} from '@ant-design/cssinjs';
import glob from 'glob'; import glob from 'glob';
import * as React from 'react'; import * as React from 'react';
import { renderToString } from 'react-dom/server'; import { renderToString } from 'react-dom/server';
import { render } from '../utils';
import { TriggerMockContext } from './demoTestContext'; import { TriggerMockContext } from './demoTestContext';
import { excludeWarning } from './excludeWarning'; import { excludeWarning } from './excludeWarning';
@ -58,8 +52,6 @@ export type Options = {
function baseText(doInject: boolean, component: string, options: Options = {}) { function baseText(doInject: boolean, component: string, options: Options = {}) {
const files = glob.sync(`./components/${component}/demo/*.tsx`); const files = glob.sync(`./components/${component}/demo/*.tsx`);
let cssinjsTest = false;
files.forEach((file) => { files.forEach((file) => {
const testMethod = const testMethod =
options.skip === true || options.skip === true ||
@ -67,33 +59,6 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
? test.skip ? test.skip
: test; : test;
if (!doInject && !cssinjsTest && testMethod !== test.skip) {
cssinjsTest = true;
testMethod(`cssinjs should not warn in ${component}`, () => {
const errSpy = excludeWarning();
let Demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
// Inject Trigger status unless skipped
Demo = typeof Demo === 'function' ? <Demo /> : Demo;
// Inject cssinjs cache to avoid create <style /> element
Demo = (
<StyleProvider
cache={createCache()}
linters={[logicalPropertiesLinter, legacyNotSelectorLinter]}
>
{Demo}
</StyleProvider>
);
render(Demo);
expect(errSpy).not.toHaveBeenCalledWith(expect.stringContaining('[Ant Design CSS-in-JS]'));
errSpy.mockRestore();
});
}
// function doTest(name: string, openTrigger = false) { // function doTest(name: string, openTrigger = false) {
testMethod( testMethod(
doInject ? `renders ${file} extend context correctly` : `renders ${file} correctly`, doInject ? `renders ${file} extend context correctly` : `renders ${file} correctly`,