@compiled/react 0.16.0 → 0.16.1

package/src/jsx/jsx-local-namespace.ts

@@ -68,7 +68,14 @@ export namespace CompiledJSX {
   export type IntrinsicAttributes = ReactJSXIntrinsicAttributes;
   export type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
   export type IntrinsicElements = {
-    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+    [K in keyof ReactJSXIntrinsicElements]: Omit<ReactJSXIntrinsicElements[K], 'className'> & {
+      // We override class name so we can pass xcss prop to it. We opt to do this instead of
+      // Making the output of cssMap() a string intersection so we can also have an inline object
+      // be declared.
+      /**
+       * The class name prop now can be given the output of xcss prop from `@compiled/react`.
+       */
+      className?: string | Record<string, any> | null | false;
       css?: CssFunction<void> | CssFunction<void>[];
     };
   };

package/src/runtime/ac.ts

@@ -58,7 +58,7 @@ class AtomicGroups {
  * @param classes
  */
 export function ac(
-  classNames: (AtomicGroups | string | undefined | false)[]
+  classNames: (AtomicGroups | string | null | undefined | false)[]
 ): AtomicGroups | undefined {
   // short circuit if there's no class names.
   if (classNames.length <= 1 && !classNames[0]) return undefined;

package/src/runtime/ax.ts

@@ -27,7 +27,7 @@ const ATOMIC_GROUP_LENGTH = 5;
  *
  * @param classes
  */
-export default function ax(classNames: (string | undefined | false)[]): string | undefined {
+export default function ax(classNames: (string | undefined | null | false)[]): string | undefined {
   if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
     // short circuit if there's no custom class names.
     return classNames[0] || undefined;

package/src/types.ts

@@ -31,5 +31,73 @@ export type CssObject<TProps> = Readonly<{
 export type CssFunction<TProps = unknown> =
   | CssType<TProps>
   | BasicTemplateInterpolations // CSS values in tagged template expression
+  | null
   | boolean // Something like `false && styles`
   | undefined; // Something like `undefined && styles`
+
+/*
+ * This list of 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 =
+  | '&::after'
+  | '&::backdrop'
+  | '&::before'
+  | '&::cue'
+  | '&::cue-region'
+  | '&::first-letter'
+  | '&::first-line'
+  | '&::grammar-error'
+  | '&::marker'
+  | '&::placeholder'
+  | '&::selection'
+  | '&::spelling-error'
+  | '&::target-text'
+  | '&::view-transition'
+  | '&: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';
+
+/**
+ * The xcss prop must be given all known available properties even
+ * if it takes a subset of them. This is ensure the (lack-of an)
+ * excess property check doesn't enable makers to circumvent the
+ * system and pass in values they shouldn't.
+ */
+export type CSSProperties = Readonly<CSS.Properties<string | number>>;

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

@@ -0,0 +1,294 @@
+/** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { cssMap, cx } from '@compiled/react';
+import { render } from '@testing-library/react';
+import { expectTypeOf } from 'expect-type';
+
+import type { XCSSProp, XCSSAllProperties, XCSSAllPseudos } from '../index';
+
+describe('xcss prop', () => {
+  it('should allow all styles from xcss prop to class name when no constraints are applied', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<XCSSAllProperties, XCSSAllPseudos> }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    const styles = cssMap({
+      redColor: { color: 'red', '&::after': { backgroundColor: 'green' } },
+    });
+
+    const { getByText } = render(<CSSPropComponent xcss={styles.redColor} />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red');
+  });
+
+  it('should type error when given a pseudo and none are allowed', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<XCSSAllProperties, never> }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    const styles = cssMap({
+      redColor: { color: 'red', '&::after': { backgroundColor: 'green' } },
+    });
+
+    const { getByText } = render(
+      <CSSPropComponent
+        // @ts-expect-error — Types of property '"&::after"' are incompatible.
+        xcss={styles.redColor}
+      />
+    );
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red');
+  });
+
+  it('should concat styles from class name and xcss prop', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<XCSSAllProperties, XCSSAllPseudos> }) {
+      return (
+        <div css={{ color: 'blue' }} className={xcss}>
+          foo
+        </div>
+      );
+    }
+
+    const styles = cssMap({
+      redColor: { color: 'red' },
+    });
+
+    const { getByText } = render(<CSSPropComponent xcss={styles.redColor} />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red');
+  });
+
+  it('should type error when passing styles that are not defined', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<'color', XCSSAllPseudos> }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    const styles = cssMap({
+      redColor: { backgroundColor: 'red' },
+    });
+
+    expectTypeOf(
+      <CSSPropComponent
+        // @ts-expect-error — Types of property 'backgroundColor' are incompatible.
+        xcss={styles.redColor}
+      />
+    ).toBeObject();
+  });
+
+  it('should concat styles together', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<XCSSAllProperties, XCSSAllPseudos> }) {
+      return <div className={xcss}>foo</div>;
+    }
+    const styles = cssMap({
+      redColor: { color: 'red' },
+      greenBackground: { color: 'blue', backgroundColor: 'green' },
+    });
+
+    const { getByText } = render(
+      <CSSPropComponent xcss={cx(styles.redColor, styles.greenBackground)} />
+    );
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'blue');
+    expect(getByText('foo')).toHaveCompiledCss('backgroundColor', 'green');
+  });
+
+  it('should conditionally apply styles directly', () => {
+    const styles = cssMap({
+      redColor: { color: 'red' },
+      blueColor: { color: 'blue' },
+    });
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<'color', never> }) {
+      return <div className={xcss}>foo</div>;
+    }
+    function Parent({ isRed }: { isRed: boolean }) {
+      return <CSSPropComponent xcss={isRed ? styles.redColor : styles.blueColor} />;
+    }
+
+    const { getByText, rerender } = render(<Parent isRed />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red');
+    expect(getByText('foo')).not.toHaveCompiledCss('color', 'blue');
+
+    rerender(<Parent isRed={false} />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'blue');
+    expect(getByText('foo')).not.toHaveCompiledCss('color', 'red');
+  });
+
+  it('should conditionally apply styles via cx function', () => {
+    const styles = cssMap({
+      redColor: { color: 'red' },
+      blueColor: { color: 'blue' },
+    });
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<'color', never> }) {
+      return <div className={xcss}>foo</div>;
+    }
+    function Parent({ isRed }: { isRed: boolean }) {
+      return <CSSPropComponent xcss={cx(isRed && styles.redColor, !isRed && styles.blueColor)} />;
+    }
+
+    const { getByText, rerender } = render(<Parent isRed />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red');
+    expect(getByText('foo')).not.toHaveCompiledCss('color', 'blue');
+
+    rerender(<Parent isRed={false} />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'blue');
+    expect(getByText('foo')).not.toHaveCompiledCss('color', 'red');
+  });
+
+  it('should transform inline object', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<'color', XCSSAllPseudos> }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    const { getByText } = render(<CSSPropComponent xcss={{ color: 'green' }} />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'green');
+  });
+
+  it('should type error when passing in a disallowed value in a pseudo mixed with allowed values', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<'color', '&:hover'> }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    const styles = cssMap({
+      redColor: { color: 'red', '&:hover': { color: 'red', backgroundColor: 'red' } },
+    });
+
+    expectTypeOf(
+      <CSSPropComponent
+        // @ts-expect-error — Types of property 'backgroundColor' are incompatible.
+        xcss={styles.redColor}
+      />
+    ).toBeObject();
+    expectTypeOf(
+      <CSSPropComponent
+        xcss={{
+          color: 'red',
+          '&:hover': {
+            color: 'red',
+            // @ts-expect-error — Types of property 'backgroundColor' are incompatible.
+            backgroundColor: 'red',
+          },
+        }}
+      />
+    ).toBeObject();
+  });
+
+  it('should type error when passing in at rules to xcss prop', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<'color', '&:hover'> }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    const styles = cssMap({
+      redColor: { color: 'red', '@media': { 'screen and': { color: 'red' } } },
+    });
+
+    expectTypeOf(
+      <CSSPropComponent
+        // @ts-expect-error — Types of property '"@media"' are incompatible.
+        xcss={styles.redColor}
+      />
+    ).toBeObject();
+    expectTypeOf(
+      <CSSPropComponent
+        xcss={{
+          color: 'red',
+          // @ts-expect-error — Type '{ screen: { color: string; backgroundColor: string; }; }' is not assignable to type 'undefined'.
+          '@media': {
+            screen: { color: 'red', backgroundColor: 'red' },
+          },
+        }}
+      />
+    ).toBeObject();
+  });
+
+  it('should block selectors api from CSS Map', () => {
+    function CSSPropComponent({ xcss }: { xcss: XCSSProp<'color', '&:hover'> }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    const styles = cssMap({
+      primary: {
+        selectors: { '&:not(:first-child):last-child': { color: 'red' } },
+      },
+    });
+
+    expectTypeOf(
+      <CSSPropComponent
+        // @ts-expect-error — Type 'CompiledStyles<{ '&:not(:first-child):last-child': { color: "red"; }; }>' is not assignable to type 'undefined'.
+        xcss={styles.primary}
+      />
+    ).toBeObject();
+  });
+
+  it('should mark a xcss prop as required', () => {
+    function CSSPropComponent({
+      xcss,
+    }: {
+      xcss: XCSSProp<
+        'color' | 'backgroundColor',
+        '&:hover',
+        { requiredProperties: 'color'; requiredPseudos: never }
+      >;
+    }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    expectTypeOf(
+      <CSSPropComponent
+        // @ts-expect-error — Type '{}' is not assignable to type 'XCSSProp<"backgroundColor" | "color", "&:hover", { requiredProperties: "color"; }>'.
+        xcss={{}}
+      />
+    ).toBeObject();
+  });
+
+  it('should mark a xcss prop inside a pseudo as required', () => {
+    function CSSPropComponent({
+      xcss,
+    }: {
+      xcss: XCSSProp<
+        'color' | 'backgroundColor',
+        '&:hover',
+        { requiredProperties: 'color'; requiredPseudos: never }
+      >;
+    }) {
+      return <div className={xcss}>foo</div>;
+    }
+
+    expectTypeOf(
+      <CSSPropComponent
+        xcss={{
+          color: 'red',
+          // @ts-expect-error — Property 'color' is missing in type '{}' but required in type '{ readonly color: string | number | CompiledPropertyDeclarationReference; }'.
+          '&:hover': {},
+        }}
+      />
+    ).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();
+  });
+});

package/src/xcss-prop/index.ts

@@ -0,0 +1,174 @@
+import type * as CSS from 'csstype';
+
+import { ac } from '../runtime';
+import type { CSSPseudos, CSSProperties } from '../types';
+
+type XCSSItem<TStyleDecl extends keyof CSSProperties> = {
+  [Q in keyof CSSProperties]: Q extends TStyleDecl
+    ? CompiledPropertyDeclarationReference | string | number
+    : never;
+};
+
+type XCSSPseudos<
+  TAllowedProperties extends keyof CSSProperties,
+  TAllowedPseudos extends CSSPseudos,
+  TRequiredProperties extends { requiredProperties: TAllowedProperties }
+> = {
+  [Q in CSSPseudos]?: Q extends TAllowedPseudos
+    ? MarkAsRequired<XCSSItem<TAllowedProperties>, TRequiredProperties['requiredProperties']>
+    : never;
+};
+
+/**
+ * These APIs we don't want to allow to be passed through the `xcss` prop but we also
+ * must declare them so the (lack-of a) excess property check doesn't bite us and allow
+ * unexpected values through.
+ */
+type BlockedRules = {
+  selectors?: never;
+} & {
+  /**
+   * We currently block all at rules from xcss prop.
+   * This needs us to decide on what the final API is across Compiled to be able to set.
+   */
+  [Q in CSS.AtRules]?: never;
+};
+
+type CompiledPropertyDeclarationReference = {
+  ['__COMPILED_PROPERTY_DECLARATION_REFERENCE_DO_NOT_WRITE_DIRECTLY__']: true;
+};
+
+/**
+ * Used to mark styles that have been flushed through an API as being generated
+ * from Compiled. This is useful when you want other ends of the API to ensure they
+ * take Compiled generated styles and not some arbitrary object.
+ */
+export type CompiledStyles<TObject> = {
+  [Q in keyof TObject]: TObject[Q] extends Record<string, unknown>
+    ? CompiledStyles<TObject[Q]>
+    : CompiledPropertyDeclarationReference;
+};
+
+/**
+ * Please think twice before using this type, you're better off declaring explicitly
+ * what your API should be, for example only defining `"color"`.
+ *
+ * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
+ * your component.
+ */
+export type XCSSAllProperties = keyof CSSProperties;
+
+/**
+ * Please think twice before using this type, you're better off declaring explicitly
+ * what your API should be, for example not allowing any pseudos at all using the
+ * `never` type.
+ *
+ * Use in conjunction with {@link XCSSProp} to allow all pseudos to be given to
+ * your component.
+ */
+export type XCSSAllPseudos = CSSPseudos;
+
+/**
+ * ## xcss prop
+ *
+ * Declare styles your component takes with all other styles marked as violations
+ * by the TypeScript compiler. There are two primary use cases for xcss prop:
+ *
+ * - safe style overrides
+ * - inverting style declarations
+ *
+ * Interverting style declarations is interesting for platform teams as
+ * it means products only pay for styles they use as they're now the ones who declare
+ * the styles!
+ *
+ * The {@link XCSSProp} type has generics two of which must be defined — use to explicitly
+ * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+ * to enable all properties and pseudos.
+ *
+ * The third generic is used to declare what properties and pseudos should be required.
+ *
+ * @example
+ * ```
+ * interface MyComponentProps {
+ *   // Color is accepted, all other properties / pseudos are considered violations.
+ *   xcss?: XCSSProp<'color', never>;
+ *
+ *   // Only backgrond color and hover pseudo is accepted.
+ *   xcss?: XCSSProp<'backgroundColor', '&:hover'>;
+ *
+ *   // All properties are accepted, all pseudos are considered violations.
+ *   xcss?: XCSSProp<XCSSAllProperties, never>;
+ *
+ *   // All properties are accepted, only the hover pseudo is accepted.
+ *   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 }>;
+ * }
+ *
+ * function MyComponent({ xcss }: MyComponentProps) {
+ *   return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
+ * }
+ * ```
+ *
+ * The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
+ *
+ * @example
+ * ```
+ * // Declared as an inline object
+ * <Component xcss={{ color: 'var(--ds-text)' }} />
+ *
+ * // Declared with the cssMap API
+ * const styles = cssMap({ text: { color: 'var(--ds-text)' } });
+ * <Component xcss={styles.text} />
+ * ```
+ *
+ * To concatenate and conditonally apply styles use the {@link cssMap} {@link cx} functions.
+ */
+export type XCSSProp<
+  TAllowedProperties extends keyof CSSProperties,
+  TAllowedPseudos extends CSSPseudos,
+  TRequiredProperties extends {
+    requiredProperties: TAllowedProperties;
+    requiredPseudos: TAllowedPseudos;
+  } = never
+> =
+  | (MarkAsRequired<XCSSItem<TAllowedProperties>, TRequiredProperties['requiredProperties']> &
+      MarkAsRequired<
+        XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties>,
+        TRequiredProperties['requiredPseudos']
+      > &
+      BlockedRules)
+  | false
+  | null
+  | undefined;
+
+type MarkAsRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+
+/**
+ * ## cx
+ *
+ * Use in conjunction with the {@link XCSSProp} to concatenate and conditionally apply
+ * declared styles. Can only be used with the `cssMap()` and {@link XCSSProp} APIs.
+ *
+ * @example
+ * ```
+ * const styles = cssMap({
+ *  text: { color: 'var(--ds-text)' },
+ *  primary: { color: 'var(--ds-text-brand)' },
+ * });
+ *
+ * <Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />
+ * ```
+ */
+export const cx = <TStyles extends [...XCSSProp<any, any>[]]>(
+  ...styles: TStyles
+): TStyles[number] => {
+  // At runtime TStyles is resolved down to strings, but not at compile time.
+  // We circumvent the type system here because of that.
+  const actualStyles = styles as unknown as string[];
+
+  // The output should be a union type of passed in styles. This ensures the call
+  // site of xcss prop can raise violations when disallowed styles have been passed.
+  return ac(actualStyles) as TStyles[number];
+};

package/dist/browser/css-map/pseudos.d.ts

@@ -1 +0,0 @@
-export type Pseudos = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition' | '&: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';

package/dist/browser/css-map/pseudos.js

@@ -1,5 +0,0 @@
-// List of pseudo-classes and pseudo-elements are from csstype
-// but with & added in the front, so that we target the current element
-// (instead of a child element)
-export {};
-//# sourceMappingURL=pseudos.js.map

package/dist/browser/css-map/pseudos.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pseudos.js","sourceRoot":"","sources":["../../../src/css-map/pseudos.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,uEAAuE;AACvE,+BAA+B"}

package/dist/cjs/css-map/pseudos.d.ts

@@ -1 +0,0 @@
-export type Pseudos = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition' | '&: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';

package/dist/cjs/css-map/pseudos.js

@@ -1,6 +0,0 @@
-"use strict";
-// List of pseudo-classes and pseudo-elements are from csstype
-// but with & added in the front, so that we target the current element
-// (instead of a child element)
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=pseudos.js.map

package/dist/cjs/css-map/pseudos.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pseudos.js","sourceRoot":"","sources":["../../../src/css-map/pseudos.ts"],"names":[],"mappings":";AAAA,8DAA8D;AAC9D,uEAAuE;AACvE,+BAA+B"}

package/dist/esm/css-map/pseudos.d.ts

@@ -1 +0,0 @@
-export type Pseudos = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition' | '&: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';

package/dist/esm/css-map/pseudos.js

@@ -1,5 +0,0 @@
-// List of pseudo-classes and pseudo-elements are from csstype
-// but with & added in the front, so that we target the current element
-// (instead of a child element)
-export {};
-//# sourceMappingURL=pseudos.js.map

package/dist/esm/css-map/pseudos.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pseudos.js","sourceRoot":"","sources":["../../../src/css-map/pseudos.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,uEAAuE;AACvE,+BAA+B"}