atlassian-labs · Oct 25, 2022 · Nov 1, 2022 · Nov 1, 2022 · Nov 3, 2022 · Nov 3, 2022
diff --git a/examples/parcel/.parcelrc b/examples/parcel/.parcelrc
@@ -16,9 +16,5 @@
       "@parcel/transformer-react-refresh-wrap",
       "..."
     ]
-  },
-  "resolvers": [
-    "@compiled/parcel-resolver-alias",
-    "..."
-  ]
+  }
 }
diff --git a/examples/parcel/CHANGELOG.md b/examples/parcel/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @compiled/parcel-app
 
+## 1.1.6
+
+### Patch Changes
+
+- 966a1080: Changed the approach of stylesheet extraction on Parcel
+
+  - @compiled/parcel-resolver is no longer used
+  - Pass styleRules to optimizer via metadata
+  - Optimizer then collects styleRules, and inserts it to output HTML
+
 ## 1.1.5
 
 ### Patch Changes

diff --git a/examples/parcel/package.json b/examples/parcel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@compiled/parcel-app",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "private": true,
   "scripts": {
     "build": "parcel build ./src/index.html",

diff --git a/examples/parcel/src/app.jsx b/examples/parcel/src/app.jsx
@@ -15,6 +15,8 @@ import {
 } from './ui/custom-file-extension.customjsx';
 import { TypeScript } from './ui/typescript';
 
+const AsyncComponent = React.lazy(() => import('./async'));
+
 export const App = () => (
   <>
     <div css={{ fontSize: 50, color: primary }}>hello from parcel 2</div>
@@ -24,5 +26,8 @@ export const App = () => (
     <CustomFileExtensionStyled>Custom File Extension Styled</CustomFileExtensionStyled>
     <div css={customFileExtensionCss}>Custom File Extension CSS</div>
     <Annotated />
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <AsyncComponent />
+    </React.Suspense>
   </>
 );
diff --git a/examples/parcel/src/async.jsx b/examples/parcel/src/async.jsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import '@compiled/react';
+
+export default Async = () => (
+  <>
+    <div css={{ fontSize: 50, color: 'red' }}>hello from async component</div>
+  </>
+);
diff --git a/examples/parcel/tsconfig.json b/examples/parcel/tsconfig.json
@@ -5,9 +5,7 @@
   },
   "include": ["**/*.tsx", "**/*.ts"],
   "references": [
-    { "path": "../../fixtures/parcel-resolver-alias/tsconfig.json" },
     { "path": "../../packages/parcel-optimizer/tsconfig.json" },
-    { "path": "../../packages/parcel-resolver/tsconfig.json" },
     { "path": "../../packages/parcel-transformer/tsconfig.json" },
     { "path": "../../packages/react/tsconfig.browser.json" }
   ]

diff --git a/fixtures/parcel-optimizer-test-app/.compiledcssrc b/fixtures/parcel-optimizer-test-app/.compiledcssrc
@@ -0,0 +1,4 @@
+{
+  "extract": true,
+  "inlineCss": true
+}
diff --git a/fixtures/parcel-optimizer-test-app/.parcelrc b/fixtures/parcel-optimizer-test-app/.parcelrc
@@ -1,6 +1,11 @@
 {
-  "extends": "@parcel/config-default",
+  "extends": [
+    "@parcel/config-default"
+  ],
+  "transformers": {
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["@compiled/parcel-transformer", "..."]
+  },
   "optimizers": {
-    "*.css": ["@compiled/parcel-optimizer", "..."]
+    "*.html": ["@compiled/parcel-optimizer", "..."]
   }
 }
diff --git a/fixtures/parcel-optimizer-test-app/CHANGELOG.md b/fixtures/parcel-optimizer-test-app/CHANGELOG.md
@@ -0,0 +1,11 @@
+# @compiled/parcel-optimizer-test-app
+
+## 0.0.2
+
+### Patch Changes
+
+- 966a1080: Changed the approach of stylesheet extraction on Parcel
+
+  - @compiled/parcel-resolver is no longer used
+  - Pass styleRules to optimizer via metadata
+  - Optimizer then collects styleRules, and inserts it to output HTML
diff --git a/fixtures/parcel-optimizer-test-app/package-lock.json b/fixtures/parcel-optimizer-test-app/package-lock.json
diff --git a/fixtures/parcel-optimizer-test-app/package.json b/fixtures/parcel-optimizer-test-app/package.json
@@ -1,8 +1,9 @@
 {
   "name": "@compiled/parcel-optimizer-test-app",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "dependencies": {
+    "@compiled/react": "^0.11.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

diff --git a/fixtures/parcel-optimizer-test-app/src/index.html b/fixtures/parcel-optimizer-test-app/src/index.html
@@ -6,7 +6,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <link rel="stylesheet" href="./styles.css" />
-    <script type="module" src="./index.js"></script>
+    <script type="module" src="./index.jsx"></script>
   </body>
 </html>
diff --git a/fixtures/parcel-optimizer-test-app/src/index.js b/fixtures/parcel-optimizer-test-app/src/index.js
diff --git a/fixtures/parcel-optimizer-test-app/src/index.jsx b/fixtures/parcel-optimizer-test-app/src/index.jsx
@@ -0,0 +1,40 @@
+import { styled } from '@compiled/react';
+import * as React from 'react';
+
+const ComponentA = styled.div({
+  color: 'red',
+  ':hover': {
+    color: 'green',
+  },
+  ':focus': {
+    color: 'orange',
+  },
+});
+
+const ComponentB = styled.div({
+  '@media screen': {
+    color: 'red',
+  },
+});
+
+const ComponentC = styled.div({
+  '@media (min-width: 500px)': {
+    border: '2px solid red',
+  },
+});
+
+const ComponentD = styled.div({
+  '@media (min-width: 500px)': {
+    border: '2px solid red',
+    content: 'large screen',
+  },
+});
+
+const App = () => (
+  <>
+    <ComponentA />
+    <ComponentB />
+    <ComponentC />
+    <ComponentD />
+  </>
+);
diff --git a/fixtures/parcel-optimizer-test-app/src/styles.css b/fixtures/parcel-optimizer-test-app/src/styles.css
diff --git a/fixtures/parcel-resolver-alias/CHANGELOG.md b/fixtures/parcel-resolver-alias/CHANGELOG.md
diff --git a/fixtures/parcel-resolver-alias/package.json b/fixtures/parcel-resolver-alias/package.json
diff --git a/fixtures/parcel-resolver-alias/src/index.ts b/fixtures/parcel-resolver-alias/src/index.ts
diff --git a/fixtures/parcel-resolver-alias/tsconfig.json b/fixtures/parcel-resolver-alias/tsconfig.json
diff --git a/fixtures/parcel-resolver-noop/package.json b/fixtures/parcel-resolver-noop/package.json
diff --git a/fixtures/parcel-resolver-noop/src/index.ts b/fixtures/parcel-resolver-noop/src/index.ts
diff --git a/fixtures/parcel-resolver-noop/tsconfig.json b/fixtures/parcel-resolver-noop/tsconfig.json
diff --git a/fixtures/parcel-resolver-test-app/.parcelrc b/fixtures/parcel-resolver-test-app/.parcelrc
diff --git a/fixtures/parcel-resolver-test-app/package.json b/fixtures/parcel-resolver-test-app/package.json
diff --git a/fixtures/parcel-resolver-test-app/src/index.html b/fixtures/parcel-resolver-test-app/src/index.html
diff --git a/fixtures/parcel-resolver-test-app/src/index.js b/fixtures/parcel-resolver-test-app/src/index.js
diff --git a/fixtures/parcel-transformer-test-extract-app/.compiledcssrc b/fixtures/parcel-transformer-test-extract-app/.compiledcssrc
@@ -1,5 +1,6 @@
 {
   "importReact": false,
   "extract": true,
-  "optimizeCss": false
+  "optimizeCss": false,
+  "inlineCss": true
 }