Skip to content
This repository was archived by the owner on Jan 30, 2025. It is now read-only.

Commit 3858410

Browse files
refirst11refirst11
committed
feat(types*): add MediaQueryType colors Alpha fix and change CSSRadiusValues ClassesObjectType
1 parent 6055ca5 commit 3858410

File tree

5 files changed

+53
-72
lines changed

5 files changed

+53
-72
lines changed

‎src/_internal/types/common/colors.ts‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,32 @@
11
import { CSSVariableValue } from './css-variables';
22

3-
type NumberOrPercent = number | `${number}%`;
3+
type Alpha = number | `${number}%`;
4+
type RGBValue = `${Alpha} ${Alpha} ${Alpha}` | `${CSSVariableValue}`;
45

5-
type CSSRGB = `rgb(${number},${number},${number})` | `rgb(${number} ${number} ${number})` | `rgb(${CSSVariableValue})`;
6-
type CSSRGBA =
7-
| `rgba(${number},${number},${number},${NumberOrPercent})`
8-
| `rgba(${number} ${number} ${number} / ${NumberOrPercent})`
9-
| `rgba(${CSSVariableValue} / ${NumberOrPercent})`
10-
| `rgba(${CSSVariableValue},${NumberOrPercent})`;
6+
type CSSRGB = `rgb(${Alpha},${Alpha},${Alpha})` | `rgb(${RGBValue})`;
7+
type CSSRGBA = `rgba(${Alpha},${Alpha},${Alpha},${Alpha})` | `rgba(${RGBValue} / ${Alpha})`;
118

129
type CSSColorFunction =
13-
| `color(srgb ${number} ${number} ${number})`
14-
| `color(display-p3 ${number} ${number} ${number})`
15-
| `color(a98-rgb ${number} ${number} ${number})`
16-
| `color(prophoto-rgb ${number} ${number} ${number})`
17-
| `color(rec2020 ${number} ${number} ${number})`
18-
| `color(xyz ${number} ${number} ${number})`
19-
| `color(lab ${NumberOrPercent} ${number} ${number})`
20-
| `color(lch ${NumberOrPercent} ${number} ${number})`
21-
| `color(oklab ${NumberOrPercent} ${number} ${number})`
22-
| `color(oklch ${NumberOrPercent} ${number} ${number})`;
10+
| `color(srgb ${RGBValue})`
11+
| `color(srgb ${RGBValue} / ${Alpha})`
12+
| `color(display-p3 ${RGBValue})`
13+
| `color(display-p3 ${RGBValue} / ${Alpha})`
14+
| `color(a98-rgb ${RGBValue})`
15+
| `color(a98-rgb ${RGBValue} / ${Alpha})`
16+
| `color(prophoto-rgb ${RGBValue})`
17+
| `color(prophoto-rgb ${RGBValue} / ${Alpha})`
18+
| `color(rec2020 ${RGBValue})`
19+
| `color(rec2020 ${RGBValue} / ${Alpha})`
20+
| `color(xyz ${RGBValue})`
21+
| `color(xyz ${RGBValue} / ${Alpha})`
22+
| `color(lab ${Alpha} ${Alpha} ${Alpha})`
23+
| `color(lab ${Alpha} ${Alpha} ${Alpha} / ${Alpha})`
24+
| `color(lch ${Alpha} ${Alpha} ${Alpha})`
25+
| `color(lch ${Alpha} ${Alpha} ${Alpha} / ${Alpha})`
26+
| `color(oklab ${Alpha} ${Alpha} ${Alpha})`
27+
| `color(oklab ${Alpha} ${Alpha} ${Alpha} / ${Alpha})`
28+
| `color(oklch ${Alpha} ${Alpha} ${Alpha})`
29+
| `color(oklch ${Alpha} ${Alpha} ${Alpha} / ${Alpha})`;
2330

2431
export type CSSColorNames =
2532
| 'currentColor'

‎src/_internal/types/common/css-values.ts‎

Lines changed: 9 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -29,48 +29,12 @@ type CSSUnitsAndGlobalValue =
2929

3030
export type CSSNumericValue = CSSUnitsAndGlobalValue | number;
3131

32-
type CSSPaddingUnitValue = `${number}${CSSUnit}` | '0';
33-
type CSSPaddingSizeValue<T extends CSSPaddingUnitValue> = `${T}` | `${T} ${T}` | `${T} ${T} ${string}` | `${T} ${T} ${string} ${string}`;
34-
export type CSSPaddingValue = CSSPaddingSizeValue<CSSPaddingUnitValue> | number;
35-
36-
type CSSMarginUnitValue = `${number}${CSSUnit}` | '0' | 'auto';
37-
type CSSMarginSizeValue<T extends CSSMarginUnitValue> = `${T}` | `${T} ${T}` | `${T} ${T} ${string}` | `${T} ${T} ${string} ${string}`;
38-
export type CSSMarginValue = CSSMarginSizeValue<CSSMarginUnitValue> | number;
39-
40-
type CSSSizeValue<T extends string | number> = `${T}` | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`;
41-
42-
type CustomRadiusValue<
43-
T extends
44-
| CSSAbsoluteUnitValue
45-
| CSSLocalFontRelativeUnitValue
46-
| CSSRootFontRelativeUnitValue
47-
| CSSViewportUnitValue
48-
| CSSRespectUnitValue
49-
| CSSPercentageUnitValue
50-
> = `${T} ${T} / ${T} ${T}`;
51-
52-
type CSSRadiusValue<
53-
T extends
54-
| CSSAbsoluteUnitValue
55-
| CSSLocalFontRelativeUnitValue
56-
| CSSRootFontRelativeUnitValue
57-
| CSSViewportUnitValue
58-
| CSSRespectUnitValue
59-
| CSSPercentageUnitValue
60-
> = CSSSizeValue<T> | CustomRadiusValue<T>;
61-
62-
type CSSRadiusAbsoluteValues = CSSRadiusValue<CSSAbsoluteUnitValue>;
63-
type CSSRadiusLocalFontValues = CSSRadiusValue<CSSLocalFontRelativeUnitValue>;
64-
type CSSRadiusRootFontValues = CSSRadiusValue<CSSRootFontRelativeUnitValue>;
65-
type CSSRadiusViewportValues = CSSRadiusValue<CSSViewportUnitValue>;
66-
type CSSRadiusRespectValues = CSSRadiusValue<CSSRespectUnitValue>;
67-
type CSSRadiusPercentageValues = CSSRadiusValue<CSSPercentageUnitValue>;
68-
export type CSSRadiusValues =
69-
| CSSRadiusAbsoluteValues
70-
| CSSRadiusLocalFontValues
71-
| CSSRadiusRootFontValues
72-
| CSSRadiusViewportValues
73-
| CSSRadiusRespectValues
74-
| CSSRadiusPercentageValues
75-
| CSSGlobalValue
76-
| CSSVariableValue;
32+
type CSSUnitValue = `${number}${CSSUnit}` | '0' | 'auto';
33+
type CSSMarginPaddingSizeValue<T extends CSSUnitValue> = `${T}` | `${T} ${T}` | `${T} ${T} ${string}` | `${T} ${T} ${string} ${string}`;
34+
export type CSSEdgeSizeValue = CSSMarginPaddingSizeValue<CSSUnitValue> | number;
35+
36+
type CSSSizeValue<T extends string | number> = `${T}` | `${T} ${T}` | `${T} ${T} ${string}` | `${T} ${T} ${string} ${string}`;
37+
type CustomRadiusValue<T extends CSSUnitValue> = `${T} ${T} / ${string} ${string}`;
38+
type CSSRadiusValue<T extends CSSUnitValue> = CSSSizeValue<T> | CustomRadiusValue<T>;
39+
type CSSRadiusSizeValue = CSSRadiusValue<CSSUnitValue>;
40+
export type CSSRadiusValues = CSSRadiusSizeValue | CSSGlobalValue | CSSVariableValue;

‎src/_internal/types/custom/classes-object-type.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import type { CustomCSSProperties } from './custom-css-properties';
22

33
export type ClassesObjectType = {
4-
[className: string]: CustomCSSProperties;
4+
[key: string]:
5+
| CustomCSSProperties
6+
| {
7+
[className: string]: CustomCSSProperties | ClassesObjectType;
8+
};
59
};
610

7-
type Exact<T, U> = T extends U ? T : never;
8-
911
export type ExactClassesObjectType<T> = {
10-
[K in keyof T | string]: K extends keyof T ? Exact<T[K], CustomCSSProperties> : CustomCSSProperties;
12+
[K in keyof T | string]: K extends keyof T ? T[K] : CustomCSSProperties | ClassesObjectType;
1113
};

‎src/_internal/types/custom/custom-css-properties.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,22 @@ import type {
55
CSSFontSizeSubValue,
66
CSSGlobalValue,
77
CSSNumericValue,
8-
CSSMarginValue,
9-
CSSPaddingValue,
8+
CSSEdgeSizeValue,
109
CSSRadiusValues,
1110
} from '../common/css-values';
1211
import type { AndStringsType, ArgsPseudos } from '../common/pseudo-selectors';
1312
import type { CSSColorValue, CSSVariableProperties, CSSVariableValue } from '../common/css-variables';
13+
import { MediaQueryType } from './custom-html-type';
1414

1515
type CustomExtendProperties = {
1616
width?: CSSNumericValue | CSSLengthSubValue | 'auto';
1717
height?: CSSNumericValue | CSSLengthSubValue | 'auto';
18-
margin?: CSSMarginValue;
18+
margin?: CSSEdgeSizeValue;
1919
marginBottom?: CSSNumericValue | 'auto';
2020
marginLeft?: CSSNumericValue | 'auto';
2121
marginRight?: CSSNumericValue | 'auto';
2222
marginTop?: CSSNumericValue | 'auto';
23-
padding?: CSSPaddingValue;
23+
padding?: CSSEdgeSizeValue;
2424
paddingBottom?: CSSNumericValue;
2525
paddingLeft?: CSSNumericValue;
2626
paddingRight?: CSSNumericValue;
@@ -98,4 +98,5 @@ export type CustomCSSProperties =
9898
| (CustomExtendProperties & {
9999
[K in keyof React.CSSProperties]: React.CSSProperties[K] | CSSVariableValue;
100100
})
101-
| CSSVariableProperties;
101+
| CSSVariableProperties
102+
| MediaQueryType;

‎src/_internal/types/custom/custom-html-type.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,18 @@ type PseudoType = {
2626
};
2727

2828
type KeyframeSelector = 'from' | 'to' | `${number}%`;
29+
2930
type KeyframesDefinition = {
3031
[K in KeyframeSelector]?: CustomCSSProperties;
3132
};
33+
3234
type AtKeyframes = {
3335
[K in `@keyframes ${string}`]: KeyframesDefinition;
3436
};
3537

36-
export type CustomHTMLType = HTMLType | ClassNameType | AttributeType | ConsecutiveType | PseudoType | AtKeyframes;
38+
type MediaQuery = `@media ${string}`;
39+
export type MediaQueryType = {
40+
[key in MediaQuery]?: CustomCSSProperties | AtKeyframes;
41+
};
42+
43+
export type CustomHTMLType = HTMLType | ClassNameType | AttributeType | ConsecutiveType | PseudoType | AtKeyframes | MediaQueryType;

0 commit comments

Comments
 (0)