package.json

@@ -79,8 +79,8 @@
     "@types/eslint": "^8.44.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^18.17.14",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
+    "@types/react": "^17.0.69",
+    "@types/react-dom": "^17.0.22",
     "@types/svgo": "^2.6.4",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.59.8",

packages/babel-plugin-strip-runtime/package.json

@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@compiled/babel-plugin": "*",
-    "@types/babel__core": "^7.20.1",
+    "@types/babel__core": "^7.20.3",
     "prettier": "^2.8.8"
   }
 }

packages/babel-plugin/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @compiled/babel-plugin
 
+## 0.24.2
+
+### Patch Changes
+
+- 4caa6784: The xcss prop is now available.
+  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 `XCSSProp` type has generics which must be defined — of which should be what you
+  explicitly want to maintain as API. Use `XCSSAllProperties` and `XCSSAllPseudos` types
+  to enable all properties and pseudos.
+
+  ```tsx
+  import { type XCSSProp } from '@compiled/react';
+
+  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'>;
+  }
+
+  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.
+
+  ```tsx
+  // 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 `cssMap` and `cx` functions.
+
+- dccb71e0: Adds third generic for XCSSProp type for declaring what properties and pseudos should be required.
+
 ## 0.24.1
 
 ### Patch Changes

packages/babel-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/babel-plugin",
-  "version": "0.24.1",
+  "version": "0.24.2",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "homepage": "https://compiledcssinjs.com/docs/pkg-babel-plugin",
   "bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
@@ -31,14 +31,14 @@
     "@compiled/css": "^0.12.0",
     "@compiled/utils": "^0.8.0",
     "@emotion/is-prop-valid": "^1.2.1",
-    "resolve": "^1.22.4"
+    "resolve": "^1.22.8"
   },
   "devDependencies": {
     "@compiled-private/module-a": "^0.1.0",
     "@compiled/benchmark": "1.1.0",
-    "@types/babel__core": "^7.20.1",
-    "@types/benchmark": "^2.1.2",
-    "@types/resolve": "^1.20.2",
+    "@types/babel__core": "^7.20.3",
+    "@types/benchmark": "^2.1.4",
+    "@types/resolve": "^1.20.4",
     "benchmark": "^2.1.4",
     "prettier": "^2.8.8",
     "ts-node": "^10.9.1",

packages/babel-plugin/src/babel-plugin.ts

@@ -24,6 +24,7 @@ import {
   isCompiledCSSMapCallExpression,
 } from './utils/is-compiled';
 import { normalizePropsUsage } from './utils/normalize-props-usage';
+import { visitXcssPropPath } from './xcss-prop';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const packageJson = require('../package.json');
@@ -65,6 +66,8 @@ export default declare<State>((api) => {
           paths: [state.opts.root ?? this.cwd],
         }));
       }
+
+      this.transformCache = new WeakMap();
     },
     visitor: {
       Program: {
@@ -87,6 +90,11 @@ export default declare<State>((api) => {
               }
             }
           }
+
+          if (!state.compiledImports && /(x|X)css={/.test(file.code)) {
+            // xcss prop was found turn on Compiled
+            state.compiledImports = {};
+          }
         },
         exit(path, state) {
           if (!state.compiledImports) {
@@ -229,6 +237,7 @@ export default declare<State>((api) => {
           return;
         }
 
+        visitXcssPropPath(path, { context: 'root', state, parentPath: path });
         visitCssPropPath(path, { context: 'root', state, parentPath: path });
       },
     },

packages/babel-plugin/src/types.ts

@@ -144,14 +144,19 @@ export interface State extends PluginPass {
   includedFiles: string[];
 
   /**
-   * Holds a record of currently evaluated CSS Map and its sheets in the module.
+   * Holds a record of evaluated `cssMap()` calls with their compiled style sheets in the current pass.
    */
   cssMap: Record<string, string[]>;
 
   /**
    * A custom resolver used to statically evaluate import declarations
    */
   resolver?: Resolver;
+
+  /**
+   * Holds paths that have been transformed that we can ignore.
+   */
+  transformCache: WeakMap<NodePath<any>, true>;
 }
 
 interface CommonMetadata {