.storybook/.babelrc.json

@@ -4,6 +4,7 @@
       "@compiled/babel-plugin",
       {
         "importReact": false,
+        "optimizeCss": false,
         "transformerBabelPlugins": [
           [
             "@babel/plugin-proposal-decorators",

babel.config.json

@@ -10,5 +10,19 @@
     ["@babel/preset-env", { "targets": { "node": "current" } }],
     "@babel/preset-typescript",
     ["@babel/preset-react", { "runtime": "automatic" }]
-  ]
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        [
+          "@compiled/babel-plugin",
+          {
+            "nonce": "\"k0Mp1lEd\"",
+            "importReact": false,
+            "optimizeCss": false
+          }
+        ]
+      ]
+    }
+  }
 }

examples/parcel/.compiledcssrc

@@ -8,7 +8,8 @@
     ".customjsx"
   ],
   "parserBabelPlugins": [
-    "typescript"
+    "typescript",
+    "jsx"
   ],
   "transformerBabelPlugins": [
     [
@@ -18,5 +19,6 @@
       }
     ]
   ],
-  "extract": true
+  "extract": true,
+  "optimizeCss": false
 }

examples/parcel/.parcelrc

@@ -1,9 +1,17 @@
 {
-  "extends": ["@parcel/config-default", "@compiled/parcel-config"],
+  "extends": [
+    "@parcel/config-default",
+    "@compiled/parcel-config"
+  ],
   "transformers": {
+    "*.{js,mjs,jsx,cjs,ts,tsx}": [
+      // Manually remove the babel transformer so we don't use the root babel config
+      "@compiled/parcel-transformer",
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ],
     "*.customjsx": [
       "@compiled/parcel-transformer",
-      "@parcel/transformer-babel",
       "@parcel/transformer-js",
       "@parcel/transformer-react-refresh-wrap",
       "..."

examples/ssr/.babelrc

@@ -1,4 +1,11 @@
 {
   "presets": ["razzle/babel"],
-  "plugins": ["@compiled/babel-plugin"]
+  "plugins": [
+    [
+      "@compiled/babel-plugin",
+      {
+        "optimizeCss": false
+      }
+    ]
+  ]
 }

examples/ssr/package.json

@@ -15,15 +15,15 @@
     "@babel/helper-builder-react-jsx": "^7.16.7",
     "@babel/helper-builder-react-jsx-experimental": "^7.12.11",
     "@compiled/react": "*",
-    "express": "4.17.3",
+    "express": "4.18.1",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
     "babel-preset-razzle": "^4.2.17",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^0.9.0",
-    "postcss": "^8.4.13",
+    "postcss": "^8.4.14",
     "razzle": "^4.2.17",
     "razzle-dev-utils": "^4.2.17",
     "webpack": "^5.71.0",

examples/webpack/webpack.config.js

@@ -37,8 +37,9 @@ module.exports = {
               extract: extractCSS,
               importReact: false,
               extensions: ['.js', '.jsx', '.ts', '.tsx', '.customjsx'],
-              parserBabelPlugins: ['typescript'],
+              parserBabelPlugins: ['typescript', 'jsx'],
               transformerBabelPlugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
+              optimizeCss: false,
             },
           },
         ],

fixtures/babel-component/.babelrc

@@ -3,5 +3,5 @@
     ["@babel/preset-env", { "targets": { "browsers": "last 1 version" } }],
     ["@babel/preset-react", { "runtime": "automatic" }]
   ],
-  "plugins": [["@compiled/babel-plugin", { "importReact": false }]]
+  "plugins": [["@compiled/babel-plugin", { "importReact": false, "optimizeCss": false }]]
 }

fixtures/babel-component/src/index.jsx

@@ -4,7 +4,7 @@ const Button = styled.button`
   color: blue;
   font-size: 30px;
   border: 2px solid blue;
-  padding: 8px;
+  padding: 32px;
 `;
 
 export default function BabelComponent({ children }) {

fixtures/parcel-transformer-test-app/.compiledcssrc

@@ -1,4 +1,5 @@
 {
   "importReact": false,
-  "extract": false
+  "extract": false,
+  "optimizeCss": false
 }

fixtures/parcel-transformer-test-custom-resolver-app/.compiledcssrc

@@ -0,0 +1,10 @@
+{
+  "importReact": false,
+  "extract": false,
+  "optimizeCss": false,
+  "resolve": {
+    "alias": {
+      "~": "../"
+    }
+  }
+}

fixtures/parcel-transformer-test-custom-resolver-app/.parcelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{js,jsx}": ["@compiled/parcel-transformer", "..."]
+  }
+}

fixtures/parcel-transformer-test-custom-resolver-app/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @compiled/parcel-transformer-test-custom-resolver-app
+
+## 0.0.2
+
+### Patch Changes
+
+- 100f5d5e: Pass a custom resolver from parcel-transformer to babel plugin
+- Updated dependencies [13b71dfb]
+  - @compiled/react@0.11.1
+
+## 0.0.1

fixtures/parcel-transformer-test-custom-resolver-app/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@compiled/parcel-transformer-test-custom-resolver-app",
+  "version": "0.0.2",
+  "private": true,
+  "dependencies": {
+    "@compiled/react": "^0.11.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@compiled/parcel-transformer": "*",
+    "@parcel/config-default": "^2.3.1"
+  }
+}

fixtures/parcel-transformer-test-custom-resolver-app/src/foo.js

@@ -0,0 +1 @@
+export const color = 'red';

fixtures/parcel-transformer-test-custom-resolver-app/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.jsx"></script>
+  </body>
+</html>

fixtures/parcel-transformer-test-custom-resolver-app/src/index.jsx

@@ -0,0 +1,8 @@
+import '@compiled/react';
+import { color } from '~/src/foo.js';
+
+const App = () => (
+  <>
+    <div css={{ color }}>CSS prop</div>
+  </>
+);

fixtures/parcel-transformer-test-extract-app/.compiledcssrc

@@ -1,4 +1,5 @@
 {
   "importReact": false,
-  "extract": true
+  "extract": true,
+  "optimizeCss": false
 }

package.json

@@ -63,7 +63,7 @@
     "mini-css-extract-plugin": "^1.6.2",
     "nth-check": "^2.0.1",
     "react": "^17.0.2",
-    "typescript": "^4.6.4",
+    "typescript": "^4.7.4",
     "unset-value": "^2.0.1",
     "webpack-dev-server": "^4.7.4"
   },
@@ -73,7 +73,7 @@
     "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@changesets/cli": "^2.22.0",
+    "@changesets/cli": "^2.24.3",
     "@compiled-private/module-a": "*",
     "@compiled/babel-plugin": "*",
     "@compiled/jest": "*",
@@ -84,10 +84,10 @@
     "@storybook/manager-webpack5": "^6.4.20",
     "@storybook/react": "^6.4.20",
     "@types/jest": "^27.5.2",
-    "@types/node": "^17.0.40",
-    "@types/react": "^17.0.45",
+    "@types/node": "^17.0.45",
+    "@types/react": "^17.0.48",
     "@types/react-dom": "^17.0.17",
-    "@types/svgo": "^2.6.3",
+    "@types/svgo": "^2.6.4",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "babel-loader": "^8.2.4",
@@ -97,26 +97,26 @@
     "eslint-plugin-json-files": "^1.3.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "flow-bin": "^0.174.1",
+    "flow-bin": "^0.183.0",
     "flowgen": "^1.17.0",
     "git-branch-is": "^4.0.0",
     "husky": "^4.3.8",
     "jest": "^26.6.3",
     "jest-extended": "^0.11.5",
     "jest-watch-typeahead": "^0.6.5",
-    "loki": "^0.29.0",
+    "loki": "^0.30.3",
     "prettier": "^2.5.1",
     "pretty-quick": "^3.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "size-limit": "^7.0.8",
     "storybook-addon-performance": "^0.16.1",
     "storybook-addon-pseudo-states": "^1.0.0",
-    "ts-node": "^10.7.0",
+    "ts-node": "^10.8.2",
     "ts-transform-define": "^0.1.10",
     "tsconfig-paths": "^3.14.1",
     "ttypescript": "^1.5.13",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4"
   },
   "engines": {
     "node": "^v16.13.2"
@@ -135,7 +135,7 @@
   "size-limit": [
     {
       "path": "./packages/react/dist/browser/runtime.js",
-      "limit": "48B",
+      "limit": "50B",
       "import": "{ ix }",
       "ignore": [
         "react"

packages/babel-plugin-strip-runtime/src/__tests__/strip-runtime-source-code.test.ts

@@ -30,7 +30,9 @@ const transform = (
     configFile: false,
     filename: join(__dirname, 'app.tsx'),
     plugins: [
-      ...(bake ? [[compiledBabelPlugin, { importReact: runtime === 'classic' }]] : []),
+      ...(bake
+        ? [[compiledBabelPlugin, { importReact: runtime === 'classic', optimizeCss: false }]]
+        : []),
       ...(extract ? [[stripRuntimeBabelPlugin, { styleSheetPath, compiledRequireExclude }]] : []),
     ],
     presets: [['@babel/preset-react', { runtime }]],

packages/babel-plugin-strip-runtime/src/__tests__/strip-runtime-transpiled-code.test.ts

@@ -28,7 +28,7 @@ const transform = (
     babelrc: false,
     configFile: false,
     filename,
-    plugins: [compiledBabelPlugin],
+    plugins: [[compiledBabelPlugin, { optimizeCss: false }]],
     presets: [
       ['@babel/preset-env', { targets: { esmodules: true }, modules: modules ?? 'auto' }],
       '@babel/preset-typescript',

packages/babel-plugin/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @compiled/babel-plugin
 
+## 0.16.5
+
+### Patch Changes
+
+- fcda0097: Fix bug where props are not forwarded when composing components in the styled API
+- dcb333a2: Use less likely to clash variable names in styled template
+- 5ee1a866: - Fixes bug where more than one import cannot be used in template literal object property key
+  - Support string binary operation in object property keys
+
+## 0.16.4
+
+### Patch Changes
+
+- d2bd6305: - Normalize prop usage in styled API to make it easier to avoid name clashing
+  - Fix bug in styled API where destructuring can remove values out of props
+  - Ensure props are not displayed as HTML attributes, unless they are valid attributes
+- 17de9d1f: Omit rules with empty values from stylesheet
+- Updated dependencies [17de9d1f]
+  - @compiled/css@0.8.5
+
+## 0.16.3
+
+### Patch Changes
+
+- 5272281a: Add configurable options to optimize CSS
+- Updated dependencies [5272281a]
+  - @compiled/css@0.8.4
+
+## 0.16.2
+
+### Patch Changes
+
+- 8912717: Revert "Bug - shadow variable clash with destructured props (#1193)"
+
+## 0.16.1
+
+### Patch Changes
+
+- 6c1ea7f: Support Compiled in files with TypeScript as expressions
+
 ## 0.16.0
 
 ### Minor Changes

packages/babel-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/babel-plugin",
-  "version": "0.16.0",
+  "version": "0.16.5",
   "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",
@@ -28,9 +28,9 @@
     "@babel/template": "^7.16.7",
     "@babel/traverse": "^7.17.10",
     "@babel/types": "^7.17.10",
-    "@compiled/css": "^0.8.3",
+    "@compiled/css": "^0.8.5",
     "@compiled/utils": "^0.6.16",
-    "@emotion/is-prop-valid": "^1.1.2",
+    "@emotion/is-prop-valid": "^1.2.0",
     "resolve": "^1.22.0"
   },
   "devDependencies": {
@@ -41,7 +41,7 @@
     "@types/resolve": "^1.20.2",
     "benchmark": "^2.1.4",
     "prettier": "^2.5.1",
-    "ts-node": "^10.7.0",
+    "ts-node": "^10.8.2",
     "tsconfig-paths": "^3.14.1"
   }
 }