@compiled/react 0.18.4 → 0.18.5

package/dist/browser/create-strict-api/types.d.ts

@@ -1,11 +1,11 @@
-import type { StrictCSSProperties, CSSPseudoClasses, CSSPseudoElements, CSSPseudos } from '../types';
+import type { StrictCSSProperties, CSSPseudoElements, CSSPseudos, AllCSSPseudoClasses } from '../types';
 /**
  * This is the shape of the generic object that `createStrictAPI()` takes.
  * It's deliberately a subset of `AllowedStyles` and does not take at rules
  * and pseudo elements.
  */
 export type CompiledSchemaShape = StrictCSSProperties & {
-    [Q in CSSPseudoClasses]?: StrictCSSProperties;
+    [Q in AllCSSPseudoClasses]?: StrictCSSProperties;
 };
 export type PseudosDeclarations = {
     [Q in CSSPseudos]?: StrictCSSProperties;
@@ -14,14 +14,14 @@ export type MediaQueries<TMediaQuery extends string> = {
     [Q in `@media ${TMediaQuery}`]?: StrictCSSProperties & PseudosDeclarations;
 };
 export type AllowedStyles<TMediaQuery extends string> = StrictCSSProperties & PseudosDeclarations & MediaQueries<TMediaQuery>;
-export type ApplySchemaValue<TSchema, TKey extends keyof StrictCSSProperties, TPseudoKey extends CSSPseudoClasses | ''> = TKey extends keyof TSchema ? TPseudoKey extends keyof TSchema ? TKey extends keyof TSchema[TPseudoKey] ? TSchema[TPseudoKey][TKey] : TSchema[TKey] : TSchema[TKey] : StrictCSSProperties[TKey];
+export type ApplySchemaValue<TSchema, TKey extends keyof StrictCSSProperties, TPseudoKey extends AllCSSPseudoClasses | ''> = TKey extends keyof TSchema ? TPseudoKey extends keyof TSchema ? TKey extends keyof TSchema[TPseudoKey] ? TSchema[TPseudoKey][TKey] : TSchema[TKey] : TSchema[TKey] : StrictCSSProperties[TKey];
 /**
  * Recursively maps over object properties to resolve them to either a {@link TSchema}
  * value if present, else fallback to its value from {@link StrictCSSProperties}. If
  * the property isn't a known property its value will be resolved to `never`.
  */
-export type ApplySchema<TObject, TSchema, TPseudoKey extends CSSPseudoClasses | '' = ''> = {
-    [TKey in keyof TObject]?: TKey extends keyof StrictCSSProperties ? ApplySchemaValue<TSchema, TKey, TPseudoKey> : TKey extends CSSPseudoClasses ? ApplySchema<TObject[TKey], TSchema, TKey> : TKey extends `@${string}` | CSSPseudoElements ? ApplySchema<TObject[TKey], TSchema> : never;
+export type ApplySchema<TObject, TSchema, TPseudoKey extends AllCSSPseudoClasses | '' = ''> = {
+    [TKey in keyof TObject]?: TKey extends keyof StrictCSSProperties ? ApplySchemaValue<TSchema, TKey, TPseudoKey> : TKey extends AllCSSPseudoClasses ? ApplySchema<TObject[TKey], TSchema, TKey> : TKey extends `@${string}` | CSSPseudoElements ? ApplySchema<TObject[TKey], TSchema> : never;
 };
 export type ApplySchemaMap<TStylesMap, TSchema> = {
     [P in keyof TStylesMap]: ApplySchema<TStylesMap[P], TSchema>;

package/dist/browser/types.d.ts

@@ -19,8 +19,10 @@ export type CssObject<TProps> = Readonly<{
 }>;
 export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
 export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::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' | '&: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';
-export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
+export type AllCSSPseudoClasses = CSSPseudoClasses | FlattenedChainedCSSPseudosClasses;
+export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
 /**
  * The XCSSProp must be given all known available properties even
  * if it takes a subset of them. This ensures the (lack-of an)

package/dist/browser/xcss-prop/index.d.ts

@@ -1,16 +1,16 @@
 import type * as CSS from 'csstype';
 import type { ApplySchemaValue } from '../create-strict-api/types';
-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 | ''> = {
+type XCSSValue<TStyleDecl extends keyof CSSProperties, TSchema, TPseudoKey extends AllCSSPseudoClasses | ''> = {
     [Q in keyof StrictCSSProperties]: Q extends TStyleDecl ? ApplySchemaValue<TSchema, Q, TPseudoKey> : never;
 };
 type XCSSPseudo<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
 }, TSchema> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, Q extends CSSPseudoClasses ? Q : ''>, TRequiredProperties['requiredProperties']> : never;
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, Q extends AllCSSPseudoClasses ? Q : ''>, TRequiredProperties['requiredProperties']> : never;
 };
 type XCSSMediaQuery<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TAllowedMediaQueries extends string, TSchema> = {
     [Q in `@media ${TAllowedMediaQueries}`]?: XCSSValue<TAllowedProperties, TSchema, ''> | XCSSPseudo<TAllowedProperties, TAllowedPseudos, never, TSchema>;

package/dist/cjs/create-strict-api/types.d.ts

@@ -1,11 +1,11 @@
-import type { StrictCSSProperties, CSSPseudoClasses, CSSPseudoElements, CSSPseudos } from '../types';
+import type { StrictCSSProperties, CSSPseudoElements, CSSPseudos, AllCSSPseudoClasses } from '../types';
 /**
  * This is the shape of the generic object that `createStrictAPI()` takes.
  * It's deliberately a subset of `AllowedStyles` and does not take at rules
  * and pseudo elements.
  */
 export type CompiledSchemaShape = StrictCSSProperties & {
-    [Q in CSSPseudoClasses]?: StrictCSSProperties;
+    [Q in AllCSSPseudoClasses]?: StrictCSSProperties;
 };
 export type PseudosDeclarations = {
     [Q in CSSPseudos]?: StrictCSSProperties;
@@ -14,14 +14,14 @@ export type MediaQueries<TMediaQuery extends string> = {
     [Q in `@media ${TMediaQuery}`]?: StrictCSSProperties & PseudosDeclarations;
 };
 export type AllowedStyles<TMediaQuery extends string> = StrictCSSProperties & PseudosDeclarations & MediaQueries<TMediaQuery>;
-export type ApplySchemaValue<TSchema, TKey extends keyof StrictCSSProperties, TPseudoKey extends CSSPseudoClasses | ''> = TKey extends keyof TSchema ? TPseudoKey extends keyof TSchema ? TKey extends keyof TSchema[TPseudoKey] ? TSchema[TPseudoKey][TKey] : TSchema[TKey] : TSchema[TKey] : StrictCSSProperties[TKey];
+export type ApplySchemaValue<TSchema, TKey extends keyof StrictCSSProperties, TPseudoKey extends AllCSSPseudoClasses | ''> = TKey extends keyof TSchema ? TPseudoKey extends keyof TSchema ? TKey extends keyof TSchema[TPseudoKey] ? TSchema[TPseudoKey][TKey] : TSchema[TKey] : TSchema[TKey] : StrictCSSProperties[TKey];
 /**
  * Recursively maps over object properties to resolve them to either a {@link TSchema}
  * value if present, else fallback to its value from {@link StrictCSSProperties}. If
  * the property isn't a known property its value will be resolved to `never`.
  */
-export type ApplySchema<TObject, TSchema, TPseudoKey extends CSSPseudoClasses | '' = ''> = {
-    [TKey in keyof TObject]?: TKey extends keyof StrictCSSProperties ? ApplySchemaValue<TSchema, TKey, TPseudoKey> : TKey extends CSSPseudoClasses ? ApplySchema<TObject[TKey], TSchema, TKey> : TKey extends `@${string}` | CSSPseudoElements ? ApplySchema<TObject[TKey], TSchema> : never;
+export type ApplySchema<TObject, TSchema, TPseudoKey extends AllCSSPseudoClasses | '' = ''> = {
+    [TKey in keyof TObject]?: TKey extends keyof StrictCSSProperties ? ApplySchemaValue<TSchema, TKey, TPseudoKey> : TKey extends AllCSSPseudoClasses ? ApplySchema<TObject[TKey], TSchema, TKey> : TKey extends `@${string}` | CSSPseudoElements ? ApplySchema<TObject[TKey], TSchema> : never;
 };
 export type ApplySchemaMap<TStylesMap, TSchema> = {
     [P in keyof TStylesMap]: ApplySchema<TStylesMap[P], TSchema>;

package/dist/cjs/types.d.ts

@@ -19,8 +19,10 @@ export type CssObject<TProps> = Readonly<{
 }>;
 export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
 export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::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' | '&: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';
-export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
+export type AllCSSPseudoClasses = CSSPseudoClasses | FlattenedChainedCSSPseudosClasses;
+export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
 /**
  * The XCSSProp must be given all known available properties even
  * if it takes a subset of them. This ensures the (lack-of an)

package/dist/cjs/xcss-prop/index.d.ts

@@ -1,16 +1,16 @@
 import type * as CSS from 'csstype';
 import type { ApplySchemaValue } from '../create-strict-api/types';
-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 | ''> = {
+type XCSSValue<TStyleDecl extends keyof CSSProperties, TSchema, TPseudoKey extends AllCSSPseudoClasses | ''> = {
     [Q in keyof StrictCSSProperties]: Q extends TStyleDecl ? ApplySchemaValue<TSchema, Q, TPseudoKey> : never;
 };
 type XCSSPseudo<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
 }, TSchema> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, Q extends CSSPseudoClasses ? Q : ''>, TRequiredProperties['requiredProperties']> : never;
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, Q extends AllCSSPseudoClasses ? Q : ''>, TRequiredProperties['requiredProperties']> : never;
 };
 type XCSSMediaQuery<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TAllowedMediaQueries extends string, TSchema> = {
     [Q in `@media ${TAllowedMediaQueries}`]?: XCSSValue<TAllowedProperties, TSchema, ''> | XCSSPseudo<TAllowedProperties, TAllowedPseudos, never, TSchema>;

package/dist/esm/create-strict-api/types.d.ts

@@ -1,11 +1,11 @@
-import type { StrictCSSProperties, CSSPseudoClasses, CSSPseudoElements, CSSPseudos } from '../types';
+import type { StrictCSSProperties, CSSPseudoElements, CSSPseudos, AllCSSPseudoClasses } from '../types';
 /**
  * This is the shape of the generic object that `createStrictAPI()` takes.
  * It's deliberately a subset of `AllowedStyles` and does not take at rules
  * and pseudo elements.
  */
 export type CompiledSchemaShape = StrictCSSProperties & {
-    [Q in CSSPseudoClasses]?: StrictCSSProperties;
+    [Q in AllCSSPseudoClasses]?: StrictCSSProperties;
 };
 export type PseudosDeclarations = {
     [Q in CSSPseudos]?: StrictCSSProperties;
@@ -14,14 +14,14 @@ export type MediaQueries<TMediaQuery extends string> = {
     [Q in `@media ${TMediaQuery}`]?: StrictCSSProperties & PseudosDeclarations;
 };
 export type AllowedStyles<TMediaQuery extends string> = StrictCSSProperties & PseudosDeclarations & MediaQueries<TMediaQuery>;
-export type ApplySchemaValue<TSchema, TKey extends keyof StrictCSSProperties, TPseudoKey extends CSSPseudoClasses | ''> = TKey extends keyof TSchema ? TPseudoKey extends keyof TSchema ? TKey extends keyof TSchema[TPseudoKey] ? TSchema[TPseudoKey][TKey] : TSchema[TKey] : TSchema[TKey] : StrictCSSProperties[TKey];
+export type ApplySchemaValue<TSchema, TKey extends keyof StrictCSSProperties, TPseudoKey extends AllCSSPseudoClasses | ''> = TKey extends keyof TSchema ? TPseudoKey extends keyof TSchema ? TKey extends keyof TSchema[TPseudoKey] ? TSchema[TPseudoKey][TKey] : TSchema[TKey] : TSchema[TKey] : StrictCSSProperties[TKey];
 /**
  * Recursively maps over object properties to resolve them to either a {@link TSchema}
  * value if present, else fallback to its value from {@link StrictCSSProperties}. If
  * the property isn't a known property its value will be resolved to `never`.
  */
-export type ApplySchema<TObject, TSchema, TPseudoKey extends CSSPseudoClasses | '' = ''> = {
-    [TKey in keyof TObject]?: TKey extends keyof StrictCSSProperties ? ApplySchemaValue<TSchema, TKey, TPseudoKey> : TKey extends CSSPseudoClasses ? ApplySchema<TObject[TKey], TSchema, TKey> : TKey extends `@${string}` | CSSPseudoElements ? ApplySchema<TObject[TKey], TSchema> : never;
+export type ApplySchema<TObject, TSchema, TPseudoKey extends AllCSSPseudoClasses | '' = ''> = {
+    [TKey in keyof TObject]?: TKey extends keyof StrictCSSProperties ? ApplySchemaValue<TSchema, TKey, TPseudoKey> : TKey extends AllCSSPseudoClasses ? ApplySchema<TObject[TKey], TSchema, TKey> : TKey extends `@${string}` | CSSPseudoElements ? ApplySchema<TObject[TKey], TSchema> : never;
 };
 export type ApplySchemaMap<TStylesMap, TSchema> = {
     [P in keyof TStylesMap]: ApplySchema<TStylesMap[P], TSchema>;

package/dist/esm/types.d.ts

@@ -19,8 +19,10 @@ export type CssObject<TProps> = Readonly<{
 }>;
 export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
 export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::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' | '&: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';
-export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
+export type AllCSSPseudoClasses = CSSPseudoClasses | FlattenedChainedCSSPseudosClasses;
+export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
 /**
  * The XCSSProp must be given all known available properties even
  * if it takes a subset of them. This ensures the (lack-of an)

package/dist/esm/xcss-prop/index.d.ts

@@ -1,16 +1,16 @@
 import type * as CSS from 'csstype';
 import type { ApplySchemaValue } from '../create-strict-api/types';
-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 | ''> = {
+type XCSSValue<TStyleDecl extends keyof CSSProperties, TSchema, TPseudoKey extends AllCSSPseudoClasses | ''> = {
     [Q in keyof StrictCSSProperties]: Q extends TStyleDecl ? ApplySchemaValue<TSchema, Q, TPseudoKey> : never;
 };
 type XCSSPseudo<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
 }, TSchema> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, Q extends CSSPseudoClasses ? Q : ''>, TRequiredProperties['requiredProperties']> : never;
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, Q extends AllCSSPseudoClasses ? Q : ''>, TRequiredProperties['requiredProperties']> : never;
 };
 type XCSSMediaQuery<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TAllowedMediaQueries extends string, TSchema> = {
     [Q in `@media ${TAllowedMediaQueries}`]?: XCSSValue<TAllowedProperties, TSchema, ''> | XCSSPseudo<TAllowedProperties, TAllowedPseudos, never, TSchema>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.18.4",
+  "version": "0.18.5",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",

package/src/__tests__/browser.test.tsx

@@ -94,13 +94,14 @@ describe('browser', () => {
     render(<StyledLink href="https://atlassian.design">Atlassian Design System</StyledLink>);
 
     expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
-      "<style nonce="k0Mp1lEd">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._v0vw1x77:focus-visible, ._ysv71x77:link{color:white}</style>
-      <style nonce="k0Mp1lEd">._ysv75scu:link{color:red}</style>
+      "<style nonce="k0Mp1lEd">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}</style>
+      <style nonce="k0Mp1lEd">._ysv75scu:link{color:red}._ysv71x77:link{color:white}</style>
       <style nonce="k0Mp1lEd">._105332ev:visited{color:pink}</style>
       <style nonce="k0Mp1lEd">._f8pjbf54:focus{color:green}</style>
+      <style nonce="k0Mp1lEd">._v0vw1x77:focus-visible{color:white}</style>
       <style nonce="k0Mp1lEd">._30l31gy6:hover{color:yellow}</style>
       <style nonce="k0Mp1lEd">._9h8h13q2:active{color:blue}</style>
-      <style nonce="k0Mp1lEd">@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._jbabtwqo:focus-visible, ._6146twqo:hover{color:grey}._1cld11x8:active{color:black}}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}</style>
+      <style nonce="k0Mp1lEd">@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._jbabtwqo:focus-visible{color:grey}._6146twqo:hover{color:grey}._1cld11x8:active{color:black}}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}</style>
       "
     `);
   });

package/src/create-strict-api/__tests__/__fixtures__/strict-api-recursive.ts

@@ -24,9 +24,15 @@ interface PressedProperties {
   backgroundColor: BackgroundPressed;
 }
 
+interface ChainedProperties {
+  color: ColorPressed;
+  backgroundColor: BackgroundPressed;
+}
+
 interface CSSPropertiesSchema extends Properties {
   '&:hover': HoveredProperties;
   '&:active': PressedProperties;
+  '&:hover::after': ChainedProperties;
 }
 
 const { css, cssMap, cx, XCSSProp } = createStrictAPI<CSSPropertiesSchema>();

package/src/create-strict-api/__tests__/generics.test.tsx

@@ -9,6 +9,7 @@ describe('createStrictAPI()', () => {
     const styles = css({
       '&:hover': {},
       '&:active': {},
+      '&:hover::after': {},
       '&::before': {},
       '&::after': {},
     });
@@ -23,6 +24,7 @@ describe('createStrictAPI()', () => {
       nested: {
         '&:hover': {},
         '&:active': {},
+        '&:hover::after': {},
         '&::before': {},
         '&::after': {},
       },
@@ -40,7 +42,7 @@ describe('createStrictAPI()', () => {
       xcss: ReturnType<
         typeof XCSSProp<
           'backgroundColor' | 'color',
-          '&:hover' | '&:active' | '&::before' | '&::after'
+          '&:hover' | '&:active' | '&::before' | '&::after' | '&:hover::after'
         >
       >;
     }) {
@@ -49,7 +51,13 @@ describe('createStrictAPI()', () => {
 
     const { getByTestId } = render(
       <Component
-        xcss={{ '&:hover': {}, '&:active': {}, '&::before': {}, '&::after': {} }}
+        xcss={{
+          '&:hover': {},
+          '&:active': {},
+          '&::before': {},
+          '&::after': {},
+          '&:hover::after': {},
+        }}
         data-testid="div"
       />
     );
@@ -76,6 +84,12 @@ describe('createStrictAPI()', () => {
           // @ts-expect-error — Type '""' is not assignable to type ...
           backgroundColor: '',
         },
+        '&:hover::after': {
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          color: '',
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          backgroundColor: '',
+        },
         '&::before': {
           // @ts-expect-error — Type '""' is not assignable to type ...
           color: '',
@@ -114,6 +128,12 @@ describe('createStrictAPI()', () => {
             // @ts-expect-error — Type '""' is not assignable to type ...
             backgroundColor: '',
           },
+          '&:hover::after': {
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            color: '',
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            backgroundColor: '',
+          },
           '&::before': {
             // @ts-expect-error — Type '""' is not assignable to type ...
             color: '',
@@ -139,7 +159,7 @@ describe('createStrictAPI()', () => {
         xcss: ReturnType<
           typeof XCSSProp<
             'backgroundColor' | 'color',
-            '&:hover' | '&:active' | '&::before' | '&::after'
+            '&:hover' | '&:active' | '&::before' | '&::after' | '&:hover::after'
           >
         >;
       }) {
@@ -165,6 +185,12 @@ describe('createStrictAPI()', () => {
               // @ts-expect-error — Type '""' is not assignable to type ...
               backgroundColor: 'var(--ds-success)',
             },
+            '&:hover::after': {
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              color: 'var(--ds-text)',
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              backgroundColor: 'var(--ds-success)',
+            },
             '&::before': {
               // @ts-expect-error — Type '""' is not assignable to type ...
               color: '',
@@ -198,6 +224,12 @@ describe('createStrictAPI()', () => {
           color: 'var(--ds-text-hovered)',
           backgroundColor: 'var(--ds-bold-hovered)',
         },
+        '&:hover::after': {
+          // @ts-expect-error — should be a value from the schema
+          padding: '10px',
+          color: 'var(--ds-text-pressed)',
+          backgroundColor: 'var(--ds-bold-pressed)',
+        },
         '&:active': {
           // @ts-expect-error — should be a value from the schema
           padding: '10px',
@@ -243,6 +275,12 @@ describe('createStrictAPI()', () => {
             color: 'var(--ds-text-pressed)',
             backgroundColor: 'var(--ds-bold-pressed)',
           },
+          '&:hover::after': {
+            // @ts-expect-error — should be a value from the schema
+            padding: '10px',
+            color: 'var(--ds-text-pressed)',
+            backgroundColor: 'var(--ds-bold-pressed)',
+          },
           '&::before': {
             // @ts-expect-error — should be a value from the schema
             padding: '10px',
@@ -270,7 +308,7 @@ describe('createStrictAPI()', () => {
         xcss: ReturnType<
           typeof XCSSProp<
             'backgroundColor' | 'color',
-            '&:hover' | '&:active' | '&::before' | '&::after'
+            '&:hover' | '&:active' | '&::before' | '&::after' | '&:hover::after'
           >
         >;
       }) {
@@ -290,6 +328,10 @@ describe('createStrictAPI()', () => {
               color: 'var(--ds-text-pressed)',
               backgroundColor: 'var(--ds-bold-pressed)',
             },
+            '&:hover::after': {
+              color: 'var(--ds-text-pressed)',
+              backgroundColor: 'var(--ds-bold-pressed)',
+            },
             '&::before': {
               color: 'var(--ds-text)',
               backgroundColor: 'var(--ds-bold)',

package/src/create-strict-api/types.ts

@@ -1,8 +1,8 @@
 import type {
   StrictCSSProperties,
-  CSSPseudoClasses,
   CSSPseudoElements,
   CSSPseudos,
+  AllCSSPseudoClasses,
 } from '../types';
 
 /**
@@ -11,7 +11,7 @@ import type {
  * and pseudo elements.
  */
 export type CompiledSchemaShape = StrictCSSProperties & {
-  [Q in CSSPseudoClasses]?: StrictCSSProperties;
+  [Q in AllCSSPseudoClasses]?: StrictCSSProperties;
 };
 
 export type PseudosDeclarations = { [Q in CSSPseudos]?: StrictCSSProperties };
@@ -27,7 +27,7 @@ export type AllowedStyles<TMediaQuery extends string> = StrictCSSProperties &
 export type ApplySchemaValue<
   TSchema,
   TKey extends keyof StrictCSSProperties,
-  TPseudoKey extends CSSPseudoClasses | ''
+  TPseudoKey extends AllCSSPseudoClasses | ''
 > = TKey extends keyof TSchema
   ? // TKey is a valid property on the schema
     TPseudoKey extends keyof TSchema
@@ -46,11 +46,11 @@ export type ApplySchemaValue<
  * value if present, else fallback to its value from {@link StrictCSSProperties}. If
  * the property isn't a known property its value will be resolved to `never`.
  */
-export type ApplySchema<TObject, TSchema, TPseudoKey extends CSSPseudoClasses | '' = ''> = {
+export type ApplySchema<TObject, TSchema, TPseudoKey extends AllCSSPseudoClasses | '' = ''> = {
   [TKey in keyof TObject]?: TKey extends keyof StrictCSSProperties
     ? // TKey is a valid CSS property, try to resolve its value.
       ApplySchemaValue<TSchema, TKey, TPseudoKey>
-    : TKey extends CSSPseudoClasses
+    : TKey extends AllCSSPseudoClasses
     ? // TKey is a valid pseudo class, recursively resolve its child properties
       // while passing down the parent pseudo key to resolve any specific schema types.
       ApplySchema<TObject[TKey], TSchema, TKey>

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;