Remove required pseudo from XCSS prop (#1643)

* chore: remove required pseudos * chore: changeset * chore: fix test
atlassian-labs · Mar 10, 2024 · 39d9a02 · 39d9a02
1 parent 4b2e5ee
commit 39d9a02
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 54 deletions.
diff --git a/.changeset/orange-coins-whisper.md b/.changeset/orange-coins-whisper.md
@@ -0,0 +1,5 @@
+---
+'@compiled/react': minor
+---
+
+The `requiredPseudos` type property in XCSS prop has been removed.
diff --git a/packages/react/src/create-strict-api/__tests__/index.test.tsx b/packages/react/src/create-strict-api/__tests__/index.test.tsx
@@ -658,11 +658,7 @@ describe('createStrictAPI()', () => {
       }: {
         testId: string;
         xcss: ReturnType<
-          typeof XCSSProp<
-            'background' | 'color',
-            never,
-            { requiredProperties: 'background'; requiredPseudos: never }
-          >
+          typeof XCSSProp<'background' | 'color', never, { requiredProperties: 'background' }>
         >;
       }) {
         return <button data-testid={`button-${testId}`} className={xcss} />;
@@ -697,11 +693,7 @@ describe('createStrictAPI()', () => {
       }: {
         testId: string;
         xcss: ReturnType<
-          typeof XCSSProp<
-            'color',
-            '&:hover' | '&:focus',
-            { requiredProperties: never; requiredPseudos: '&:hover' }
-          >
+          typeof XCSSProp<'color', '&:hover' | '&:focus', { requiredProperties: never }>
         >;
       }) {
         return <button data-testid={`button-${testId}`} className={xcss} />;
@@ -711,7 +703,7 @@ describe('createStrictAPI()', () => {
         primary: { '&:hover': { color: 'var(--ds-text-hover)' } },
       });
       const stylesInvalid = cssMap({
-        primary: { '&:focus': { color: 'var(--ds-text)' } },
+        primary: { '&:focus': { background: 'var(--ds-surface)' } },
       });
 
       const { getByTestId } = render(
@@ -728,7 +720,7 @@ describe('createStrictAPI()', () => {
       expect(getByTestId('button-valid')).toHaveCompiledCss('color', 'var(--ds-text-hover)', {
         target: ':hover',
       });
-      expect(getByTestId('button-invalid')).toHaveCompiledCss('color', 'var(--ds-text)', {
+      expect(getByTestId('button-invalid')).toHaveCompiledCss('background', 'var(--ds-surface)', {
         target: ':focus',
       });
     });

diff --git a/packages/react/src/create-strict-api/index.ts b/packages/react/src/create-strict-api/index.ts
@@ -114,7 +114,7 @@ export interface CompiledAPI<
    *    typeof XCSSProp<
    *      XCSSAllProperties,
    *      '&:hover',
-   *      { requiredProperties: 'color', requiredPseudos: never }
+   *      { requiredProperties: 'color' }
    *     >
    *   >;
    * }
@@ -142,7 +142,6 @@ export interface CompiledAPI<
     TAllowedPseudos extends CSSPseudos,
     TRequiredProperties extends {
       requiredProperties: TAllowedProperties;
-      requiredPseudos: TAllowedPseudos;
     } = never
   >(): Internal$XCSSProp<
     TAllowedProperties,

diff --git a/packages/react/src/xcss-prop/__tests__/xcss-prop.test.tsx b/packages/react/src/xcss-prop/__tests__/xcss-prop.test.tsx
@@ -228,11 +228,7 @@ describe('xcss prop', () => {
     function CSSPropComponent({
       xcss,
     }: {
-      xcss: XCSSProp<
-        'color' | 'backgroundColor',
-        '&:hover',
-        { requiredProperties: 'color'; requiredPseudos: never }
-      >;
+      xcss: XCSSProp<'color' | 'backgroundColor', '&:hover', { requiredProperties: 'color' }>;
     }) {
       return <div className={xcss}>foo</div>;
     }
@@ -249,11 +245,7 @@ describe('xcss prop', () => {
     function CSSPropComponent({
       xcss,
     }: {
-      xcss: XCSSProp<
-        'color' | 'backgroundColor',
-        '&:hover',
-        { requiredProperties: 'color'; requiredPseudos: never }
-      >;
+      xcss: XCSSProp<'color' | 'backgroundColor', '&:hover', { requiredProperties: 'color' }>;
     }) {
       return <div className={xcss}>foo</div>;
     }
@@ -268,27 +260,4 @@ describe('xcss prop', () => {
       />
     ).toBeObject();
   });
-
-  it('should mark a xcss prop pseudo as required', () => {
-    function CSSPropComponent({
-      xcss,
-    }: {
-      xcss: XCSSProp<
-        'color' | 'backgroundColor',
-        '&:hover',
-        { requiredProperties: never; requiredPseudos: '&:hover' }
-      >;
-    }) {
-      return <div className={xcss}>foo</div>;
-    }
-
-    expectTypeOf(
-      <CSSPropComponent
-        // @ts-expect-error — Property '"&:hover"' is missing in type '{ color: string; }' but required in type '{ "&:hover": MarkAsRequired<XCSSItem<"backgroundColor" | "color">, never>; }'.
-        xcss={{
-          color: 'red',
-        }}
-      />
-    ).toBeObject();
-  });
 });
diff --git a/packages/react/src/xcss-prop/index.ts b/packages/react/src/xcss-prop/index.ts
@@ -125,7 +125,7 @@ export type XCSSAllPseudos = CSSPseudos;
  *   xcss?: XCSSProp<XCSSAllProperties, '&:hover'>;
  *
  *   // The xcss prop is required as well as the color property. No pseudos are required.
- *   xcss: XCSSProp<XCSSAllProperties, '&:hover', { requiredProperties: 'color', requiredPseudos: never }>;
+ *   xcss: XCSSProp<XCSSAllProperties, '&:hover', { requiredProperties: 'color' }>;
  * }
  *
  * function MyComponent({ xcss }: MyComponentProps) {
@@ -152,7 +152,6 @@ export type XCSSProp<
   TAllowedPseudos extends CSSPseudos,
   TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-    requiredPseudos: TAllowedPseudos;
   } = never
 > = Internal$XCSSProp<
   TAllowedProperties,
@@ -170,18 +169,14 @@ export type Internal$XCSSProp<
   TSchema,
   TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-    requiredPseudos: TAllowedPseudos;
   },
   TMode extends 'loose' | 'strict'
 > =
   | (MarkAsRequired<
       XCSSValue<TAllowedProperties, TSchema, ''>,
       TRequiredProperties['requiredProperties']
     > &
-      MarkAsRequired<
-        XCSSPseudo<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>,
-        TRequiredProperties['requiredPseudos']
-      > &
+      XCSSPseudo<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema> &
       XCSSMediaQuery<TAllowedProperties, TAllowedPseudos, TAllowedMediaQueries, TSchema> &
       BlockedRules<TMode>)
   | false