@compiled/react 0.19.1 → 0.20.0
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/dist/browser/types.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ export type CssObject<TProps> = Readonly<{
|
|
|
20
20
|
export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
|
|
21
21
|
export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition';
|
|
22
22
|
export type CSSFlattenedChainedPsuedos = '&:visited:active' | '&:visited:hover' | '&:visited:focus' | '&:visited:focus-visible' | '&:visited:focus-within' | '&:active:visited' | '&:hover::before' | '&:hover::after' | '&:focus-visible::before' | '&:focus-visible::after' | '&:focus::before' | '&:focus::after' | '&:focus-within::before' | '&:focus-within::after' | '&:focus:not(:focus-visible)';
|
|
23
|
-
export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
|
|
23
|
+
export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:popover-open' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
|
|
24
24
|
export type AllCSSPseudoClasses = CSSPseudoClasses | CSSFlattenedChainedPsuedos;
|
|
25
25
|
export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
|
|
26
26
|
/**
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ export type CssObject<TProps> = Readonly<{
|
|
|
20
20
|
export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
|
|
21
21
|
export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition';
|
|
22
22
|
export type CSSFlattenedChainedPsuedos = '&:visited:active' | '&:visited:hover' | '&:visited:focus' | '&:visited:focus-visible' | '&:visited:focus-within' | '&:active:visited' | '&:hover::before' | '&:hover::after' | '&:focus-visible::before' | '&:focus-visible::after' | '&:focus::before' | '&:focus::after' | '&:focus-within::before' | '&:focus-within::after' | '&:focus:not(:focus-visible)';
|
|
23
|
-
export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
|
|
23
|
+
export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:popover-open' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
|
|
24
24
|
export type AllCSSPseudoClasses = CSSPseudoClasses | CSSFlattenedChainedPsuedos;
|
|
25
25
|
export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
|
|
26
26
|
/**
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ export type CssObject<TProps> = Readonly<{
|
|
|
20
20
|
export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
|
|
21
21
|
export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition';
|
|
22
22
|
export type CSSFlattenedChainedPsuedos = '&:visited:active' | '&:visited:hover' | '&:visited:focus' | '&:visited:focus-visible' | '&:visited:focus-within' | '&:active:visited' | '&:hover::before' | '&:hover::after' | '&:focus-visible::before' | '&:focus-visible::after' | '&:focus::before' | '&:focus::after' | '&:focus-within::before' | '&:focus-within::after' | '&:focus:not(:focus-visible)';
|
|
23
|
-
export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
|
|
23
|
+
export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:popover-open' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
|
|
24
24
|
export type AllCSSPseudoClasses = CSSPseudoClasses | CSSFlattenedChainedPsuedos;
|
|
25
25
|
export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
|
|
26
26
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@compiled/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.20.0",
|
|
4
4
|
"description": "A familiar and performant compile time CSS-in-JS library for React.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"compiled",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"jsx-dev-runtime"
|
|
73
73
|
],
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"csstype": "^3.
|
|
75
|
+
"csstype": "^3.2.3"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
78
78
|
"@compiled/benchmark": "^1.1.0",
|
|
@@ -49,4 +49,29 @@ describe('css map', () => {
|
|
|
49
49
|
|
|
50
50
|
expect(getByText('hello world')).toHaveCompiledCss('color', 'red');
|
|
51
51
|
});
|
|
52
|
+
|
|
53
|
+
it('should support popover-open pseudo-class', () => {
|
|
54
|
+
const popoverStyles = cssMap({
|
|
55
|
+
fade: {
|
|
56
|
+
opacity: 0,
|
|
57
|
+
transition:
|
|
58
|
+
'opacity 175ms cubic-bezier(0.15, 1, 0.3, 1), overlay 175ms allow-discrete, display 175ms allow-discrete',
|
|
59
|
+
'&:popover-open': {
|
|
60
|
+
opacity: 1,
|
|
61
|
+
transitionDuration: '350ms',
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
const Foo = () => <div css={popoverStyles.fade}>popover content</div>;
|
|
67
|
+
const { getByText } = render(<Foo />);
|
|
68
|
+
|
|
69
|
+
expect(getByText('popover content')).toHaveCompiledCss('opacity', '0');
|
|
70
|
+
expect(getByText('popover content')).toHaveCompiledCss('opacity', '1', {
|
|
71
|
+
target: ':popover-open',
|
|
72
|
+
});
|
|
73
|
+
expect(getByText('popover content')).toHaveCompiledCss('transition-duration', '350ms', {
|
|
74
|
+
target: ':popover-open',
|
|
75
|
+
});
|
|
76
|
+
});
|
|
52
77
|
});
|