atlassian-labs · Mar 6, 2024 · Mar 6, 2024 · Mar 6, 2024 · Mar 6, 2024 · Mar 10, 2024
diff --git a/examples/parcel/.parcelrc b/examples/parcel/.parcelrc
@@ -6,11 +6,13 @@
   "transformers": {
     "*.{js,mjs,jsx,cjs,ts,tsx}": [
       // Manually remove the babel transformer so we don't use the root babel config
+      "@compiled/parcel-transformer-external",
       "@compiled/parcel-transformer",
       "@parcel/transformer-js",
       "@parcel/transformer-react-refresh-wrap"
     ],
     "*.customjsx": [
+      "@compiled/parcel-transformer-external",
       "@compiled/parcel-transformer",
       "@parcel/transformer-js",
       "@parcel/transformer-react-refresh-wrap",

diff --git a/examples/parcel/package.json b/examples/parcel/package.json
@@ -17,6 +17,7 @@
     "@babel/plugin-proposal-decorators": "^7.22.15",
     "@compiled/parcel-config": "*",
     "@compiled/parcel-transformer": "*",
+    "@compiled/parcel-transformer-external": "*",
     "@parcel/config-default": "^2.8.3",
     "@parcel/optimizer-htmlnano": "^2.8.3",
     "@parcel/packager-html": "^2.8.3",

diff --git a/fixtures/parcel-optimizer-test-app/CHANGELOG.md b/fixtures/parcel-optimizer-test-app/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @compiled/parcel-optimizer-test-app
 
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [4b2e5eeb]
+- Updated dependencies [39d9a02c]
+- Updated dependencies [20528e91]
+- Updated dependencies [5701b914]
+  - @compiled/react@0.17.0
+
 ## 0.1.4
 
 ### Patch Changes

diff --git a/fixtures/parcel-optimizer-test-app/package.json b/fixtures/parcel-optimizer-test-app/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@compiled/parcel-optimizer-test-app",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "dependencies": {
-    "@compiled/react": "^0.16.0",
+    "@compiled/react": "^0.17.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

diff --git a/fixtures/parcel-transformer-test-app/.parcelrc b/fixtures/parcel-transformer-test-app/.parcelrc
@@ -1,6 +1,10 @@
 {
   "extends": "@parcel/config-default",
   "transformers": {
-    "*.{js,jsx}": ["@compiled/parcel-transformer", "..."]
+    "*.{js,jsx}": [
+      "@compiled/parcel-transformer-external",
+      "@compiled/parcel-transformer",
+      "..."
+    ]
   }
 }
diff --git a/fixtures/parcel-transformer-test-app/CHANGELOG.md b/fixtures/parcel-transformer-test-app/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @compiled/parcel-transformer-test-app
 
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [4b2e5eeb]
+- Updated dependencies [39d9a02c]
+- Updated dependencies [20528e91]
+- Updated dependencies [5701b914]
+  - @compiled/react@0.17.0
+
 ## 0.1.4
 
 ### Patch Changes

diff --git a/fixtures/parcel-transformer-test-app/package.json b/fixtures/parcel-transformer-test-app/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@compiled/parcel-transformer-test-app",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "dependencies": {
-    "@compiled/react": "^0.16.0",
+    "@compiled/react": "^0.17.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

diff --git a/fixtures/parcel-transformer-test-app/src/index.jsx b/fixtures/parcel-transformer-test-app/src/index.jsx
@@ -1,7 +1,13 @@
-import '@compiled/react';
+console.log('File START');
+
+import { css } from '@compiled/react';
+
+const styles = css({ backgroundColor: 'green' });
 
 const App = () => (
   <>
-    <div css={{ fontSize: 50, color: 'red' }}>hello from parcel</div>
+    <div css={[{ fontSize: 50, color: 'red' }, styles]}>hello from parcel</div>
   </>
 );
+
+console.log('File END');
diff --git a/fixtures/parcel-transformer-test-compress-class-name-app/.parcelrc b/fixtures/parcel-transformer-test-compress-class-name-app/.parcelrc
@@ -1,9 +1,16 @@
 {
   "extends": "@parcel/config-default",
   "transformers": {
-    "*.{js,jsx}": ["@compiled/parcel-transformer", "..."]
+    "*.{js,jsx}": [
+      "@compiled/parcel-transformer-external",
+      "@compiled/parcel-transformer",
+      "..."
+    ]
   },
   "optimizers": {
-    "*.html": ["@compiled/parcel-optimizer", "..."]
+    "*.html": [
+      "@compiled/parcel-optimizer",
+      "..."
+    ]
   }
 }
diff --git a/fixtures/parcel-transformer-test-compress-class-name-app/CHANGELOG.md b/fixtures/parcel-transformer-test-compress-class-name-app/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @compiled/parcel-transformer-test-compress-class-name-app
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [4b2e5eeb]
+- Updated dependencies [39d9a02c]
+- Updated dependencies [20528e91]
+- Updated dependencies [5701b914]
+  - @compiled/react@0.17.0
+
 ## 0.2.3
 
 ### Patch Changes

diff --git a/fixtures/parcel-transformer-test-compress-class-name-app/package.json b/fixtures/parcel-transformer-test-compress-class-name-app/package.json
@@ -1,14 +1,15 @@
 {
   "name": "@compiled/parcel-transformer-test-compress-class-name-app",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "dependencies": {
-    "@compiled/react": "^0.16.0",
+    "@compiled/react": "^0.17.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@compiled/parcel-transformer": "*",
+    "@compiled/parcel-transformer-external": "*",
     "@parcel/config-default": "^2.8.3"
   }
 }
diff --git a/fixtures/parcel-transformer-test-custom-resolve-app/.parcelrc b/fixtures/parcel-transformer-test-custom-resolve-app/.parcelrc
@@ -1,6 +1,10 @@
 {
   "extends": "@parcel/config-default",
   "transformers": {
-    "*.{js,jsx}": ["@compiled/parcel-transformer", "..."]
+    "*.{js,jsx}": [
+      "@compiled/parcel-transformer-external",
+      "@compiled/parcel-transformer",
+      "..."
+    ]
   }
 }
diff --git a/fixtures/parcel-transformer-test-custom-resolve-app/CHANGELOG.md b/fixtures/parcel-transformer-test-custom-resolve-app/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @compiled/parcel-transformer-test-custom-resolve-app
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [4b2e5eeb]
+- Updated dependencies [39d9a02c]
+- Updated dependencies [20528e91]
+- Updated dependencies [5701b914]
+  - @compiled/react@0.17.0
+
 ## 0.1.5
 
 ### Patch Changes

diff --git a/fixtures/parcel-transformer-test-custom-resolve-app/package.json b/fixtures/parcel-transformer-test-custom-resolve-app/package.json
@@ -1,14 +1,15 @@
 {
   "name": "@compiled/parcel-transformer-test-custom-resolve-app",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "dependencies": {
-    "@compiled/react": "^0.16.0",
+    "@compiled/react": "^0.17.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@compiled/parcel-transformer": "*",
+    "@compiled/parcel-transformer-external": "*",
     "@parcel/config-default": "^2.8.3"
   }
 }
diff --git a/fixtures/parcel-transformer-test-custom-resolver-app/CHANGELOG.md b/fixtures/parcel-transformer-test-custom-resolver-app/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @compiled/parcel-transformer-test-custom-resolver-app
 
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [4b2e5eeb]
+- Updated dependencies [39d9a02c]
+- Updated dependencies [20528e91]
+- Updated dependencies [5701b914]
+  - @compiled/react@0.17.0
+
 ## 0.1.1
 
 ### Patch Changes

diff --git a/fixtures/parcel-transformer-test-custom-resolver-app/package.json b/fixtures/parcel-transformer-test-custom-resolver-app/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@compiled/parcel-transformer-test-custom-resolver-app",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "dependencies": {
-    "@compiled/react": "^0.16.0",
+    "@compiled/react": "^0.17.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

diff --git a/fixtures/parcel-transformer-test-extract-app/.parcelrc b/fixtures/parcel-transformer-test-extract-app/.parcelrc
@@ -1,9 +1,16 @@
 {
   "extends": "@parcel/config-default",
   "transformers": {
-    "*.{js,jsx}": ["@compiled/parcel-transformer", "..."]
+    "*.{js,jsx}": [
+      "@compiled/parcel-transformer-external",
+      "@compiled/parcel-transformer",
+      "..."
+    ]
   },
   "optimizers": {
-    "*.html": ["@compiled/parcel-optimizer", "..."]
+    "*.html": [
+      "@compiled/parcel-optimizer",
+      "..."
+    ]
   }
 }
diff --git a/fixtures/parcel-transformer-test-extract-app/CHANGELOG.md b/fixtures/parcel-transformer-test-extract-app/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @compiled/parcel-transformer-test-extract-app
 
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [4b2e5eeb]
+- Updated dependencies [39d9a02c]
+- Updated dependencies [20528e91]
+- Updated dependencies [5701b914]
+  - @compiled/react@0.17.0
+
 ## 0.1.4
 
 ### Patch Changes

diff --git a/fixtures/parcel-transformer-test-extract-app/package.json b/fixtures/parcel-transformer-test-extract-app/package.json
@@ -1,16 +1,17 @@
 {
   "name": "@compiled/parcel-transformer-test-extract-app",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "dependencies": {
-    "@compiled/react": "^0.16.0",
+    "@compiled/react": "^0.17.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@compiled/babel-component-extracted-fixture": "*",
     "@compiled/babel-component-fixture": "*",
     "@compiled/parcel-transformer": "*",
+    "@compiled/parcel-transformer-external": "*",
     "@parcel/config-default": "^2.8.3"
   }
 }
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "test": "jest --no-cache",
     "test:cover": "yarn test --collectCoverage",
     "test:imports": "node test/test-imports",
-    "test:parcel": "jest --testMatch '**/src/**/*.parceltest.{ts,tsx}'",
+    "test:parcel": "jest --testMatch '**/src/**/*.parceltest.{ts,tsx}' --testEnvironment=node",
     "test:vr": "yarn loki --host host.docker.internal",
     "test:watch": "jest --no-cache --watch"
   },

diff --git a/packages/babel-plugin/CHANGELOG.md b/packages/babel-plugin/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @compiled/babel-plugin
 
+## 0.28.4
+
+### Patch Changes
+
+- 4b2e5eeb: The CSS map transform now allows top level at rules to be defined.
+
 ## 0.28.3
 
 ### Patch Changes

diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@compiled/babel-plugin",
-  "version": "0.28.3",
+  "version": "0.28.4",
   "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",

diff --git a/packages/babel-plugin/src/css-map/process-selectors.ts b/packages/babel-plugin/src/css-map/process-selectors.ts
@@ -8,7 +8,7 @@ import {
   errorIfNotValidObjectProperty,
   getKeyValue,
   hasExtendedSelectorsKey as propertyHasExtendedSelectorsKey,
-  isAtRule,
+  isAtRuleObject,
   objectKeyIsLiteralValue,
   isPlainSelector,
 } from '../utils/css-map';
@@ -150,7 +150,7 @@ export const mergeExtendedSelectorsIntoProperties = (
     // variable, so we can skip it now
     if (propertyHasExtendedSelectorsKey(property)) continue;
 
-    if (isAtRule(propertyKey)) {
+    if (isAtRuleObject(propertyKey)) {
       const atRuleType = getKeyValue(propertyKey);
       const atRules = collapseAtRule(property, atRuleType, meta);
 
@@ -162,6 +162,7 @@ export const mergeExtendedSelectorsIntoProperties = (
             meta.parentPath
           );
         }
+
         mergedProperties.push(atRuleValue);
         addedSelectors.add(atRuleName);
       }

diff --git a/packages/babel-plugin/src/utils/css-map.ts b/packages/babel-plugin/src/utils/css-map.ts
@@ -1,10 +1,30 @@
 import * as t from '@babel/types';
+import type { AtRules } from 'csstype';
 
 import type { Metadata } from '../types';
 import { buildCodeFrameError } from '../utils/ast';
 
 export const EXTENDED_SELECTORS_KEY = 'selectors';
 
+const atRules: Record<AtRules, boolean> = {
+  '@charset': true,
+  '@counter-style': true,
+  '@document': true,
+  '@font-face': true,
+  '@font-feature-values': true,
+  '@font-palette-values': true,
+  '@import': true,
+  '@keyframes': true,
+  '@layer': true,
+  '@media': true,
+  '@namespace': true,
+  '@page': true,
+  '@property': true,
+  '@scroll-timeline': true,
+  '@supports': true,
+  '@viewport': true,
+};
+
 type ObjectKeyWithLiteralValue = t.Identifier | t.StringLiteral;
 
 export const objectKeyIsLiteralValue = (
@@ -17,8 +37,12 @@ export const getKeyValue = (key: ObjectKeyWithLiteralValue): string => {
   throw new Error(`Expected an identifier or a string literal, got type ${(key as any).type}`);
 };
 
-export const isAtRule = (key: ObjectKeyWithLiteralValue): key is ObjectKeyWithLiteralValue =>
-  getKeyValue(key).startsWith('@');
+export const isAtRuleObject = (
+  key: ObjectKeyWithLiteralValue
+): key is ObjectKeyWithLiteralValue => {
+  const keyValue = getKeyValue(key);
+  return keyValue in atRules;
+};
 
 export const isPlainSelector = (selector: string): boolean => selector.startsWith(':');