@atlaskit/css 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/index.js +63 -3
- package/dist/es2019/index.js +61 -1
- package/dist/esm/index.js +61 -1
- package/dist/types/index.d.ts +66 -3
- package/dist/types-ts4.5/index.d.ts +66 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/css
|
|
2
2
|
|
|
3
|
+
## 0.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#62648](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62648) [`1902f30344b5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1902f30344b5) - Add a `StrictXCSSProp` to clarify the loose vs. strict implementation.
|
|
8
|
+
|
|
3
9
|
## 0.0.2
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -5,14 +5,74 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.cx = exports.cssMap = exports.css =
|
|
8
|
+
exports.cx = exports.cssMap = exports.css = void 0;
|
|
9
9
|
var React = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _runtime = require("@compiled/react/runtime");
|
|
11
11
|
var _react2 = require("@compiled/react");
|
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
13
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
14
14
|
var _createStrictAPI = (0, _react2.createStrictAPI)(),
|
|
15
|
-
XCSSProp =
|
|
15
|
+
XCSSProp = _createStrictAPI.XCSSProp,
|
|
16
16
|
css = exports.css = _createStrictAPI.css,
|
|
17
17
|
cssMap = exports.cssMap = _createStrictAPI.cssMap,
|
|
18
|
-
cx = exports.cx = _createStrictAPI.cx;
|
|
18
|
+
cx = exports.cx = _createStrictAPI.cx;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* ## StrictXCSSProp
|
|
22
|
+
*
|
|
23
|
+
* Declare styles your component takes with all other styles marked as violations
|
|
24
|
+
* by the TypeScript compiler. There are two primary use cases for xcss prop:
|
|
25
|
+
*
|
|
26
|
+
* - safe style overrides
|
|
27
|
+
* - inverting style declarations
|
|
28
|
+
*
|
|
29
|
+
* Interverting style declarations is interesting for platform teams as
|
|
30
|
+
* it means products only pay for styles they use as they're now the ones who declare
|
|
31
|
+
* the styles!
|
|
32
|
+
*
|
|
33
|
+
* The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
|
|
34
|
+
* set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
|
|
35
|
+
* to enable all properties and pseudos.
|
|
36
|
+
*
|
|
37
|
+
* The third generic is used to declare what properties and pseudos should be required.
|
|
38
|
+
*
|
|
39
|
+
* ```tsx
|
|
40
|
+
* interface MyComponentProps {
|
|
41
|
+
* // Color is accepted, all other properties / pseudos are considered violations.
|
|
42
|
+
* xcss?: StrictXCSSProp<'color', never>;
|
|
43
|
+
*
|
|
44
|
+
* // Only backgrond color and hover pseudo is accepted.
|
|
45
|
+
* xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
|
|
46
|
+
*
|
|
47
|
+
* // All properties are accepted, all pseudos are considered violations.
|
|
48
|
+
* xcss?: StrictXCSSProp<XCSSAllProperties, never>;
|
|
49
|
+
*
|
|
50
|
+
* // All properties are accepted, only the hover pseudo is accepted.
|
|
51
|
+
* xcss?: StrictXCSSProp<XCSSAllProperties, '&:hover'>;
|
|
52
|
+
*
|
|
53
|
+
* // The xcss prop is required as well as the color property. No pseudos are required.
|
|
54
|
+
* xcss: StrictXCSSProp<
|
|
55
|
+
* XCSSAllProperties,
|
|
56
|
+
* '&:hover',
|
|
57
|
+
* { requiredProperties: 'color', requiredPseudos: never }
|
|
58
|
+
* >;
|
|
59
|
+
* }
|
|
60
|
+
*
|
|
61
|
+
* function MyComponent({ xcss }: MyComponentProps) {
|
|
62
|
+
* return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
|
|
63
|
+
* }
|
|
64
|
+
* ```
|
|
65
|
+
*
|
|
66
|
+
* The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
|
|
67
|
+
*
|
|
68
|
+
* ```jsx
|
|
69
|
+
* // Declared as an inline object
|
|
70
|
+
* <Component xcss={{ color: 'var(--ds-text)' }} />
|
|
71
|
+
*
|
|
72
|
+
* // Declared with the cssMap API
|
|
73
|
+
* const styles = cssMap({ text: { color: 'var(--ds-text)' } });
|
|
74
|
+
* <Component xcss={styles.text} />
|
|
75
|
+
* ```
|
|
76
|
+
*
|
|
77
|
+
* To concatenate and conditonally apply styles use the {@link cssMap} and {@link cx} functions.
|
|
78
|
+
*/
|
package/dist/es2019/index.js
CHANGED
|
@@ -8,4 +8,64 @@ const {
|
|
|
8
8
|
cssMap,
|
|
9
9
|
cx
|
|
10
10
|
} = createStrictAPI();
|
|
11
|
-
export {
|
|
11
|
+
export { css, cssMap, cx };
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* ## StrictXCSSProp
|
|
15
|
+
*
|
|
16
|
+
* Declare styles your component takes with all other styles marked as violations
|
|
17
|
+
* by the TypeScript compiler. There are two primary use cases for xcss prop:
|
|
18
|
+
*
|
|
19
|
+
* - safe style overrides
|
|
20
|
+
* - inverting style declarations
|
|
21
|
+
*
|
|
22
|
+
* Interverting style declarations is interesting for platform teams as
|
|
23
|
+
* it means products only pay for styles they use as they're now the ones who declare
|
|
24
|
+
* the styles!
|
|
25
|
+
*
|
|
26
|
+
* The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
|
|
27
|
+
* set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
|
|
28
|
+
* to enable all properties and pseudos.
|
|
29
|
+
*
|
|
30
|
+
* The third generic is used to declare what properties and pseudos should be required.
|
|
31
|
+
*
|
|
32
|
+
* ```tsx
|
|
33
|
+
* interface MyComponentProps {
|
|
34
|
+
* // Color is accepted, all other properties / pseudos are considered violations.
|
|
35
|
+
* xcss?: StrictXCSSProp<'color', never>;
|
|
36
|
+
*
|
|
37
|
+
* // Only backgrond color and hover pseudo is accepted.
|
|
38
|
+
* xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
|
|
39
|
+
*
|
|
40
|
+
* // All properties are accepted, all pseudos are considered violations.
|
|
41
|
+
* xcss?: StrictXCSSProp<XCSSAllProperties, never>;
|
|
42
|
+
*
|
|
43
|
+
* // All properties are accepted, only the hover pseudo is accepted.
|
|
44
|
+
* xcss?: StrictXCSSProp<XCSSAllProperties, '&:hover'>;
|
|
45
|
+
*
|
|
46
|
+
* // The xcss prop is required as well as the color property. No pseudos are required.
|
|
47
|
+
* xcss: StrictXCSSProp<
|
|
48
|
+
* XCSSAllProperties,
|
|
49
|
+
* '&:hover',
|
|
50
|
+
* { requiredProperties: 'color', requiredPseudos: never }
|
|
51
|
+
* >;
|
|
52
|
+
* }
|
|
53
|
+
*
|
|
54
|
+
* function MyComponent({ xcss }: MyComponentProps) {
|
|
55
|
+
* return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
|
|
56
|
+
* }
|
|
57
|
+
* ```
|
|
58
|
+
*
|
|
59
|
+
* The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
|
|
60
|
+
*
|
|
61
|
+
* ```jsx
|
|
62
|
+
* // Declared as an inline object
|
|
63
|
+
* <Component xcss={{ color: 'var(--ds-text)' }} />
|
|
64
|
+
*
|
|
65
|
+
* // Declared with the cssMap API
|
|
66
|
+
* const styles = cssMap({ text: { color: 'var(--ds-text)' } });
|
|
67
|
+
* <Component xcss={styles.text} />
|
|
68
|
+
* ```
|
|
69
|
+
*
|
|
70
|
+
* To concatenate and conditonally apply styles use the {@link cssMap} and {@link cx} functions.
|
|
71
|
+
*/
|
package/dist/esm/index.js
CHANGED
|
@@ -7,4 +7,64 @@ var _createStrictAPI = createStrictAPI(),
|
|
|
7
7
|
css = _createStrictAPI.css,
|
|
8
8
|
cssMap = _createStrictAPI.cssMap,
|
|
9
9
|
cx = _createStrictAPI.cx;
|
|
10
|
-
export {
|
|
10
|
+
export { css, cssMap, cx };
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* ## StrictXCSSProp
|
|
14
|
+
*
|
|
15
|
+
* Declare styles your component takes with all other styles marked as violations
|
|
16
|
+
* by the TypeScript compiler. There are two primary use cases for xcss prop:
|
|
17
|
+
*
|
|
18
|
+
* - safe style overrides
|
|
19
|
+
* - inverting style declarations
|
|
20
|
+
*
|
|
21
|
+
* Interverting style declarations is interesting for platform teams as
|
|
22
|
+
* it means products only pay for styles they use as they're now the ones who declare
|
|
23
|
+
* the styles!
|
|
24
|
+
*
|
|
25
|
+
* The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
|
|
26
|
+
* set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
|
|
27
|
+
* to enable all properties and pseudos.
|
|
28
|
+
*
|
|
29
|
+
* The third generic is used to declare what properties and pseudos should be required.
|
|
30
|
+
*
|
|
31
|
+
* ```tsx
|
|
32
|
+
* interface MyComponentProps {
|
|
33
|
+
* // Color is accepted, all other properties / pseudos are considered violations.
|
|
34
|
+
* xcss?: StrictXCSSProp<'color', never>;
|
|
35
|
+
*
|
|
36
|
+
* // Only backgrond color and hover pseudo is accepted.
|
|
37
|
+
* xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
|
|
38
|
+
*
|
|
39
|
+
* // All properties are accepted, all pseudos are considered violations.
|
|
40
|
+
* xcss?: StrictXCSSProp<XCSSAllProperties, never>;
|
|
41
|
+
*
|
|
42
|
+
* // All properties are accepted, only the hover pseudo is accepted.
|
|
43
|
+
* xcss?: StrictXCSSProp<XCSSAllProperties, '&:hover'>;
|
|
44
|
+
*
|
|
45
|
+
* // The xcss prop is required as well as the color property. No pseudos are required.
|
|
46
|
+
* xcss: StrictXCSSProp<
|
|
47
|
+
* XCSSAllProperties,
|
|
48
|
+
* '&:hover',
|
|
49
|
+
* { requiredProperties: 'color', requiredPseudos: never }
|
|
50
|
+
* >;
|
|
51
|
+
* }
|
|
52
|
+
*
|
|
53
|
+
* function MyComponent({ xcss }: MyComponentProps) {
|
|
54
|
+
* return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
|
|
59
|
+
*
|
|
60
|
+
* ```jsx
|
|
61
|
+
* // Declared as an inline object
|
|
62
|
+
* <Component xcss={{ color: 'var(--ds-text)' }} />
|
|
63
|
+
*
|
|
64
|
+
* // Declared with the cssMap API
|
|
65
|
+
* const styles = cssMap({ text: { color: 'var(--ds-text)' } });
|
|
66
|
+
* <Component xcss={styles.text} />
|
|
67
|
+
* ```
|
|
68
|
+
*
|
|
69
|
+
* To concatenate and conditonally apply styles use the {@link cssMap} and {@link cx} functions.
|
|
70
|
+
*/
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { type XCSSAllProperties, type XCSSAllPseudos } from '@compiled/react';
|
|
1
|
+
import { type CSSPseudos, type StrictCSSProperties, type XCSSAllProperties, type XCSSAllPseudos } from '@compiled/react';
|
|
2
2
|
import { type DesignTokenStyles } from '@atlaskit/tokens/css-type-schema';
|
|
3
|
-
declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTransitionName" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "animation" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "font" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "transition" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", TAllowedPseudos extends
|
|
3
|
+
declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTransitionName" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "animation" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "font" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "transition" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
|
|
4
4
|
requiredProperties: TAllowedProperties;
|
|
5
5
|
requiredPseudos: TAllowedPseudos;
|
|
6
6
|
} = never>() => import("@compiled/react/dist/esm/xcss-prop").Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, DesignTokenStyles, TRequiredProperties>, css: (styles: Readonly<import("csstype").StandardProperties<0 | (string & {}), string & {}> & import("csstype").SvgProperties<0 | (string & {}), string & {}>> & {
|
|
@@ -7904,4 +7904,67 @@ declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "
|
|
|
7904
7904
|
zIndex?: number | undefined;
|
|
7905
7905
|
};
|
|
7906
7906
|
} & TStylesMap) => { readonly [P in keyof TStylesMap]: import("@compiled/react/dist/esm/xcss-prop").CompiledStyles<TStylesMap[P]>; }, cx: <TStyles extends import("@compiled/react").XCSSProp<any, any, never>[]>(...styles: TStyles) => TStyles[number];
|
|
7907
|
-
export {
|
|
7907
|
+
export { css, cssMap, cx, XCSSAllProperties, XCSSAllPseudos };
|
|
7908
|
+
/**
|
|
7909
|
+
* ## StrictXCSSProp
|
|
7910
|
+
*
|
|
7911
|
+
* Declare styles your component takes with all other styles marked as violations
|
|
7912
|
+
* by the TypeScript compiler. There are two primary use cases for xcss prop:
|
|
7913
|
+
*
|
|
7914
|
+
* - safe style overrides
|
|
7915
|
+
* - inverting style declarations
|
|
7916
|
+
*
|
|
7917
|
+
* Interverting style declarations is interesting for platform teams as
|
|
7918
|
+
* it means products only pay for styles they use as they're now the ones who declare
|
|
7919
|
+
* the styles!
|
|
7920
|
+
*
|
|
7921
|
+
* The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
|
|
7922
|
+
* set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
|
|
7923
|
+
* to enable all properties and pseudos.
|
|
7924
|
+
*
|
|
7925
|
+
* The third generic is used to declare what properties and pseudos should be required.
|
|
7926
|
+
*
|
|
7927
|
+
* ```tsx
|
|
7928
|
+
* interface MyComponentProps {
|
|
7929
|
+
* // Color is accepted, all other properties / pseudos are considered violations.
|
|
7930
|
+
* xcss?: StrictXCSSProp<'color', never>;
|
|
7931
|
+
*
|
|
7932
|
+
* // Only backgrond color and hover pseudo is accepted.
|
|
7933
|
+
* xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
|
|
7934
|
+
*
|
|
7935
|
+
* // All properties are accepted, all pseudos are considered violations.
|
|
7936
|
+
* xcss?: StrictXCSSProp<XCSSAllProperties, never>;
|
|
7937
|
+
*
|
|
7938
|
+
* // All properties are accepted, only the hover pseudo is accepted.
|
|
7939
|
+
* xcss?: StrictXCSSProp<XCSSAllProperties, '&:hover'>;
|
|
7940
|
+
*
|
|
7941
|
+
* // The xcss prop is required as well as the color property. No pseudos are required.
|
|
7942
|
+
* xcss: StrictXCSSProp<
|
|
7943
|
+
* XCSSAllProperties,
|
|
7944
|
+
* '&:hover',
|
|
7945
|
+
* { requiredProperties: 'color', requiredPseudos: never }
|
|
7946
|
+
* >;
|
|
7947
|
+
* }
|
|
7948
|
+
*
|
|
7949
|
+
* function MyComponent({ xcss }: MyComponentProps) {
|
|
7950
|
+
* return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
|
|
7951
|
+
* }
|
|
7952
|
+
* ```
|
|
7953
|
+
*
|
|
7954
|
+
* The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
|
|
7955
|
+
*
|
|
7956
|
+
* ```jsx
|
|
7957
|
+
* // Declared as an inline object
|
|
7958
|
+
* <Component xcss={{ color: 'var(--ds-text)' }} />
|
|
7959
|
+
*
|
|
7960
|
+
* // Declared with the cssMap API
|
|
7961
|
+
* const styles = cssMap({ text: { color: 'var(--ds-text)' } });
|
|
7962
|
+
* <Component xcss={styles.text} />
|
|
7963
|
+
* ```
|
|
7964
|
+
*
|
|
7965
|
+
* To concatenate and conditonally apply styles use the {@link cssMap} and {@link cx} functions.
|
|
7966
|
+
*/
|
|
7967
|
+
export type StrictXCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
|
|
7968
|
+
requiredProperties: TAllowedProperties;
|
|
7969
|
+
requiredPseudos: TAllowedPseudos;
|
|
7970
|
+
} = never> = ReturnType<typeof XCSSProp<TAllowedProperties, TAllowedPseudos, TRequiredProperties>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { type XCSSAllProperties, type XCSSAllPseudos } from '@compiled/react';
|
|
1
|
+
import { type CSSPseudos, type StrictCSSProperties, type XCSSAllProperties, type XCSSAllPseudos } from '@compiled/react';
|
|
2
2
|
import { type DesignTokenStyles } from '@atlaskit/tokens/css-type-schema';
|
|
3
|
-
declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTransitionName" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "animation" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "font" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "transition" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", TAllowedPseudos extends
|
|
3
|
+
declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTransitionName" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "animation" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "font" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "transition" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
|
|
4
4
|
requiredProperties: TAllowedProperties;
|
|
5
5
|
requiredPseudos: TAllowedPseudos;
|
|
6
6
|
} = never>() => import("@compiled/react/dist/esm/xcss-prop").Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, DesignTokenStyles, TRequiredProperties>, css: (styles: Readonly<import("csstype").StandardProperties<0 | (string & {}), string & {}> & import("csstype").SvgProperties<0 | (string & {}), string & {}>> & {
|
|
@@ -7906,4 +7906,67 @@ declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "
|
|
|
7906
7906
|
} & TStylesMap) => {
|
|
7907
7907
|
readonly [P in keyof TStylesMap]: import("@compiled/react/dist/esm/xcss-prop").CompiledStyles<TStylesMap[P]>;
|
|
7908
7908
|
}, cx: <TStyles extends import("@compiled/react").XCSSProp<any, any, never>[]>(...styles: TStyles) => TStyles[number];
|
|
7909
|
-
export {
|
|
7909
|
+
export { css, cssMap, cx, XCSSAllProperties, XCSSAllPseudos };
|
|
7910
|
+
/**
|
|
7911
|
+
* ## StrictXCSSProp
|
|
7912
|
+
*
|
|
7913
|
+
* Declare styles your component takes with all other styles marked as violations
|
|
7914
|
+
* by the TypeScript compiler. There are two primary use cases for xcss prop:
|
|
7915
|
+
*
|
|
7916
|
+
* - safe style overrides
|
|
7917
|
+
* - inverting style declarations
|
|
7918
|
+
*
|
|
7919
|
+
* Interverting style declarations is interesting for platform teams as
|
|
7920
|
+
* it means products only pay for styles they use as they're now the ones who declare
|
|
7921
|
+
* the styles!
|
|
7922
|
+
*
|
|
7923
|
+
* The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
|
|
7924
|
+
* set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
|
|
7925
|
+
* to enable all properties and pseudos.
|
|
7926
|
+
*
|
|
7927
|
+
* The third generic is used to declare what properties and pseudos should be required.
|
|
7928
|
+
*
|
|
7929
|
+
* ```tsx
|
|
7930
|
+
* interface MyComponentProps {
|
|
7931
|
+
* // Color is accepted, all other properties / pseudos are considered violations.
|
|
7932
|
+
* xcss?: StrictXCSSProp<'color', never>;
|
|
7933
|
+
*
|
|
7934
|
+
* // Only backgrond color and hover pseudo is accepted.
|
|
7935
|
+
* xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
|
|
7936
|
+
*
|
|
7937
|
+
* // All properties are accepted, all pseudos are considered violations.
|
|
7938
|
+
* xcss?: StrictXCSSProp<XCSSAllProperties, never>;
|
|
7939
|
+
*
|
|
7940
|
+
* // All properties are accepted, only the hover pseudo is accepted.
|
|
7941
|
+
* xcss?: StrictXCSSProp<XCSSAllProperties, '&:hover'>;
|
|
7942
|
+
*
|
|
7943
|
+
* // The xcss prop is required as well as the color property. No pseudos are required.
|
|
7944
|
+
* xcss: StrictXCSSProp<
|
|
7945
|
+
* XCSSAllProperties,
|
|
7946
|
+
* '&:hover',
|
|
7947
|
+
* { requiredProperties: 'color', requiredPseudos: never }
|
|
7948
|
+
* >;
|
|
7949
|
+
* }
|
|
7950
|
+
*
|
|
7951
|
+
* function MyComponent({ xcss }: MyComponentProps) {
|
|
7952
|
+
* return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
|
|
7953
|
+
* }
|
|
7954
|
+
* ```
|
|
7955
|
+
*
|
|
7956
|
+
* The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
|
|
7957
|
+
*
|
|
7958
|
+
* ```jsx
|
|
7959
|
+
* // Declared as an inline object
|
|
7960
|
+
* <Component xcss={{ color: 'var(--ds-text)' }} />
|
|
7961
|
+
*
|
|
7962
|
+
* // Declared with the cssMap API
|
|
7963
|
+
* const styles = cssMap({ text: { color: 'var(--ds-text)' } });
|
|
7964
|
+
* <Component xcss={styles.text} />
|
|
7965
|
+
* ```
|
|
7966
|
+
*
|
|
7967
|
+
* To concatenate and conditonally apply styles use the {@link cssMap} and {@link cx} functions.
|
|
7968
|
+
*/
|
|
7969
|
+
export type StrictXCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
|
|
7970
|
+
requiredProperties: TAllowedProperties;
|
|
7971
|
+
requiredPseudos: TAllowedPseudos;
|
|
7972
|
+
} = never> = ReturnType<typeof XCSSProp<TAllowedProperties, TAllowedPseudos, TRequiredProperties>>;
|
package/package.json
CHANGED