@compiled/react 0.18.3 → 0.18.5

package/src/types.ts

@@ -51,6 +51,16 @@ export type CSSPseudoElements =
   | '&::target-text'
   | '&::view-transition';
 
+export type FlattenedChainedCSSPseudosClasses =
+  | '&:visited:active'
+  | '&:visited:hover'
+  | '&:active:visited'
+  | '&:hover::before'
+  | '&:hover::after'
+  | '&:focus-visible::before'
+  | '&:focus-visible::after'
+  | '&:focus:not(:focus-visible)';
+
 export type CSSPseudoClasses =
   | '&:active'
   | '&:autofill'
@@ -89,14 +99,16 @@ export type CSSPseudoClasses =
   | '&:valid'
   | '&:visited';
 
+export type AllCSSPseudoClasses = CSSPseudoClasses | FlattenedChainedCSSPseudosClasses;
+
 /*
- * This list of pseudo-classes and pseudo-elements are from csstype
+ * This list of pseudo-classes, chained pseudo-classes, and pseudo-elements are from csstype
  * but with & added to the front. Compiled supports both &-ful
  * and &-less forms and both will target the current element
  * (`&:hover` <==> `:hover`), however we force the use of the
  * &-ful form for consistency with the nested spec for new APIs.
  */
-export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
+export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
 
 /**
  * The XCSSProp must be given all known available properties even

package/src/xcss-prop/__tests__/xcss-prop.test.tsx

@@ -260,4 +260,35 @@ describe('xcss prop', () => {
       />
     ).toBeObject();
   });
+
+  it('should allow chained pseudo elements', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<XCSSAllProperties, '&:hover::after'> }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    const styles = cssMap({
+      redColor: { color: 'red', '&:hover::after': { backgroundColor: 'green' } },
+    });
+
+    const { getByText } = render(<CSSPropComponent xcss={styles.redColor} />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red');
+  });
+
+  it('should type error when given a chained pseudo element and none are allowed', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<XCSSAllProperties, '&:hover'> }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    const styles = cssMap({
+      redColor: { color: 'red', '&:hover::after': { backgroundColor: 'green' } },
+    });
+
+    expectTypeOf(
+      <CSSPropComponent
+        // @ts-expect-error — Types of property '"&:hover::after"' are incompatible.
+        xcss={styles.redColor}
+      />
+    ).toBeObject();
+  });
 });

package/src/xcss-prop/index.ts

@@ -2,14 +2,14 @@ import type * as CSS from 'csstype';
 
 import type { ApplySchemaValue } from '../create-strict-api/types';
 import { ax } from '../runtime';
-import type { CSSPseudos, CSSPseudoClasses, CSSProperties, StrictCSSProperties } from '../types';
+import type { CSSPseudos, CSSProperties, StrictCSSProperties, AllCSSPseudoClasses } from '../types';
 
 type MarkAsRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
 
 type XCSSValue<
   TStyleDecl extends keyof CSSProperties,
   TSchema,
-  TPseudoKey extends CSSPseudoClasses | ''
+  TPseudoKey extends AllCSSPseudoClasses | ''
 > = {
   [Q in keyof StrictCSSProperties]: Q extends TStyleDecl
     ? ApplySchemaValue<TSchema, Q, TPseudoKey>
@@ -24,7 +24,7 @@ type XCSSPseudo<
 > = {
   [Q in CSSPseudos]?: Q extends TAllowedPseudos
     ? MarkAsRequired<
-        XCSSValue<TAllowedProperties, TSchema, Q extends CSSPseudoClasses ? Q : ''>,
+        XCSSValue<TAllowedProperties, TSchema, Q extends AllCSSPseudoClasses ? Q : ''>,
         TRequiredProperties['requiredProperties']
       >
     : never;