Skip to content

feat: cssinjs add MULTI_VALUE key #6770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 29, 2023
Merged

feat: cssinjs add MULTI_VALUE key #6770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 38 additions & 24 deletions components/_util/cssinjs/hooks/useStyleRegister.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import type { VueNode } from '../../type';
const isClientSide = canUseDom();

const SKIP_CHECK = '_skip_check_';

const MULTI_VALUE = '_multi_value_';
export type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & {
animationName?: CSS.PropertiesFallback<number | string>['animationName'] | Keyframes;
};
Expand All @@ -39,6 +39,7 @@ export type CSSPropertiesWithMultiValues = {
| Extract<CSSProperties[K], string>[]
| {
[SKIP_CHECK]: boolean;
[MULTI_VALUE]?: boolean;
value: CSSProperties[K] | Extract<CSSProperties[K], string>[];
};
};
Expand All @@ -65,7 +66,7 @@ export function normalizeStyle(styleStr: string) {
}

function isCompoundCSSProperty(value: CSSObject[string]) {
return typeof value === 'object' && value && SKIP_CHECK in value;
return typeof value === 'object' && value && (SKIP_CHECK in value || MULTI_VALUE in value);
}

// 注入 hash 值
Expand Down Expand Up @@ -224,32 +225,45 @@ export const parseStyle = (

styleStr += `${mergedKey}${parsedStr}`;
} else {
const actualValue = (value as any)?.value ?? value;
if (
process.env.NODE_ENV !== 'production' &&
(typeof value !== 'object' || !(value as any)?.[SKIP_CHECK])
) {
[contentQuotesLinter, hashedAnimationLinter, ...linters].forEach(linter =>
linter(key, actualValue, { path, hashId, parentSelectors }),
);
}
function appendStyle(cssKey: string, cssValue: any) {
if (
process.env.NODE_ENV !== 'production' &&
(typeof value !== 'object' || !(value as any)?.[SKIP_CHECK])
) {
[contentQuotesLinter, hashedAnimationLinter, ...linters].forEach(linter =>
linter(cssKey, cssValue, { path, hashId, parentSelectors }),
);
}

// 如果是样式则直接插入
const styleName = key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
// 如果是样式则直接插入
const styleName = cssKey.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);

// Auto suffix with px
let formatValue = actualValue;
if (!unitless[key] && typeof formatValue === 'number' && formatValue !== 0) {
formatValue = `${formatValue}px`;
}
// Auto suffix with px
let formatValue = cssValue;
if (!unitless[cssKey] && typeof formatValue === 'number' && formatValue !== 0) {
formatValue = `${formatValue}px`;
}

// handle animationName & Keyframe value
if (key === 'animationName' && (value as Keyframes)?._keyframe) {
parseKeyframes(value as Keyframes);
formatValue = (value as Keyframes).getName(hashId);
}
// handle animationName & Keyframe value
if (cssKey === 'animationName' && (cssValue as Keyframes)?._keyframe) {
parseKeyframes(cssValue as Keyframes);
formatValue = (cssValue as Keyframes).getName(hashId);
}

styleStr += `${styleName}:${formatValue};`;
styleStr += `${styleName}:${formatValue};`;
}
const actualValue = (value as any)?.value ?? value;
if (
typeof value === 'object' &&
(value as any)?.[MULTI_VALUE] &&
Array.isArray(actualValue)
) {
actualValue.forEach(item => {
appendStyle(key, item);
});
} else {
appendStyle(key, actualValue);
}
}
});
}
Expand Down
38 changes: 24 additions & 14 deletions components/style/roundedArrow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,31 +10,33 @@ export const roundedArrow = (
): CSSObject => {
const unitWidth = width / 2;

const ax = unitWidth - outerRadius * (Math.sqrt(2) - 1);
const ax = 0;
const ay = unitWidth;
const bx = unitWidth + outerRadius * (1 - 1 / Math.sqrt(2));
const bx = (outerRadius * 1) / Math.sqrt(2);
const by = unitWidth - outerRadius * (1 - 1 / Math.sqrt(2));
const cx = 2 * unitWidth - innerRadius * (1 / Math.sqrt(2));
const cy = innerRadius * (1 / Math.sqrt(2));
const dx = 4 * unitWidth - cx;
const cx = unitWidth - innerRadius * (1 / Math.sqrt(2));
const cy = outerRadius * (Math.sqrt(2) - 1) + innerRadius * (1 / Math.sqrt(2));
const dx = 2 * unitWidth - cx;
const dy = cy;
const ex = 4 * unitWidth - bx;
const ex = 2 * unitWidth - bx;
const ey = by;
const fx = 4 * unitWidth - ax;
const fx = 2 * unitWidth - ax;
const fy = ay;

const shadowWidth = unitWidth * Math.sqrt(2) + outerRadius * (Math.sqrt(2) - 2);
const polygonOffset = outerRadius * (Math.sqrt(2) - 1);

return {
borderRadius: { _skip_check_: true, value: `0 0 ${innerRadius}px` },
pointerEvents: 'none',
width: width * 2,
height: width * 2,
width,
height: width,
overflow: 'hidden',

'&::after': {
content: '""',
position: 'absolute',
width: width / Math.sqrt(2),
height: width / Math.sqrt(2),
width: shadowWidth,
height: shadowWidth,
bottom: 0,
insetInline: 0,
margin: 'auto',
Expand All @@ -52,10 +54,18 @@ export const roundedArrow = (
position: 'absolute',
bottom: 0,
insetInlineStart: 0,
width: width * 2,
width,
height: width / 2,
background: bgColor,
clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 0 ${bx} ${by} L ${cx} ${cy} A ${innerRadius} ${innerRadius} 0 0 1 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 0 ${fx} ${fy} Z')`,
clipPath: {
_multi_value_: true,
value: [
`polygon(${polygonOffset}px 100%, 50% ${polygonOffset}px, ${
2 * unitWidth - polygonOffset
}px 100%, ${polygonOffset}px 100%)`,
`path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 0 ${bx} ${by} L ${cx} ${cy} A ${innerRadius} ${innerRadius} 0 0 1 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 0 ${fx} ${fy} Z')`,
],
} as any,
content: '""',
},
};
Expand Down