Feature/handle extracted compiled files (#1513)

* Extract styles to file in babel plugin

* Add changeset

* Add test for extracting to css files

* WIP

* Remove parcel-transformer-css reference

* Fix type errors

* Add .synk

* Update .synk

* Update .synk

* Rename .synk to snyk (silly me)

* Update webpack plugin

* Update Parcel integration test

* Remove duplicates

* Update snapshot test

* mute ts error in the fixture

* Specify file name

* Refactor tests

* Add .css to prettierignore

* remove .only

* PR feedbacks

* Add extractStylesToDirectory option to Webpack and Parcel

* escape chars

* Use AST contruction instead of template.ast

---------

Co-authored-by: Jake Lane <jlane2@atlassian.com>

Author: liamqma

.changeset/fuzzy-walls-fly.md

@@ -0,0 +1,7 @@
+---
+'@compiled/babel-plugin-strip-runtime': minor
+'@compiled/parcel-transformer': patch
+'@compiled/webpack-loader': patch
+---
+
+Add extractStylesToDirectory config to support extraction to CSS files

.prettierignore

@@ -2,3 +2,4 @@ CHANGELOG.md
 coverage
 dist
 storybook-static
+**/__fixtures__/*.css

examples/parcel/.compiledcssrc.json

@@ -1,5 +1,5 @@
 {
-  "importReact": false,
+  "importReact": true,
   "extensions": [".js", ".jsx", ".ts", ".tsx", ".customjsx"],
   "parserBabelPlugins": ["typescript", "jsx"],
   "transformerBabelPlugins": [

examples/parcel/package.json

@@ -4,14 +4,17 @@
   "private": true,
   "scripts": {
     "build": "parcel build ./src/index.html",
-    "start": "parcel serve ./src/index.html --open --no-cache"
+    "start": "parcel serve ./src/index.html --open --no-cache",
+    "start:debug": "node --inspect-brk node_modules/.bin/parcel serve ./src/index.html --open --no-cache"
   },
   "dependencies": {
+    "@compiled/babel-component-extracted-fixture": "*",
     "@compiled/react": "*",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.22.15",
     "@compiled/parcel-config": "*",
     "@compiled/parcel-transformer": "*",
     "@parcel/config-default": "^2.8.3",

examples/parcel/src/app.jsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import '@compiled/react';
+import BabelComponentExtracted from '@compiled/babel-component-extracted-fixture/dist/index';
+import { css } from '@compiled/react';
+import React, { lazy } from 'react';
 // These are unused placeholder examples, as including them will break the application. The static evaluation in the
 // @compiled/babel-plugin must be synchronous, whereas parcel offers promise-based APIs, making them incompatible.
 // Eventually, the static evaluation (i.e. resolveBindingNode) should be replaced or removed so that these aliases
@@ -16,14 +17,14 @@ import {
 } from './ui/custom-file-extension.customjsx';
 import { TypeScript } from './ui/typescript';
 
-const AsyncComponent = React.lazy(() => import('./async'));
-
+const AsyncComponent = lazy(() => import('./async'));
 export const App = () => (
   <>
-    <div css={{ fontSize: 50, color: primary }}>hello from parcel 2</div>
+    <div css={css({ fontSize: 50, color: primary })}>hello from parcel 2</div>
     <TypeScript color="blue" />
     {/*<div css={parcelAliasStyles}>custom alias</div>*/}
     {/*<div css={parcelResolverAliasStyles}>custom resolver</div>*/}
+    <BabelComponentExtracted>Component from NPM</BabelComponentExtracted>
     <CustomFileExtensionStyled>Custom File Extension Styled</CustomFileExtensionStyled>
     <div css={customFileExtensionCss}>Custom File Extension CSS</div>
     <Annotated />

examples/webpack/package.json

@@ -7,6 +7,7 @@
     "start": "webpack serve --hot"
   },
   "dependencies": {
+    "@compiled/babel-component-extracted-fixture": "*",
     "@compiled/babel-component-fixture": "*",
     "@compiled/react": "*",
     "@compiled/webpack-loader": "*",

examples/webpack/src/app.jsx

@@ -1,5 +1,6 @@
+import BabelComponentExtracted from '@compiled/babel-component-extracted-fixture/dist/index';
 import BabelComponent from '@compiled/babel-component-fixture';
-import '@compiled/react';
+import { css } from '@compiled/react';
 import { Suspense, lazy } from 'react';
 
 import { primary } from './common/constants';
@@ -15,12 +16,13 @@ const AsyncComponent = lazy(() => import('./ui/async'));
 
 export const App = () => (
   <>
-    <div css={{ fontSize: 50, color: primary }}>hello from webpack</div>
+    <div css={css({ fontSize: 50, color: primary })}>hello from webpack</div>
     <TypeScript>TypeScript component</TypeScript>
     <BabelComponent>Component from NPM</BabelComponent>
     <Suspense fallback="Loading...">
       <AsyncComponent>I was loaded async</AsyncComponent>
     </Suspense>
+    <BabelComponentExtracted>Component from NPM</BabelComponentExtracted>
     <CustomFileExtensionStyled>Custom File Extension Styled</CustomFileExtensionStyled>
     <div css={customFileExtensionCss}>Custom File Extension CSS</div>
     <Annotated />

fixtures/babel-component-extracted/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "browsers": "last 1 version" } }],
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ],
+  "plugins": [
+    ["@compiled/babel-plugin", { "importReact": false, "optimizeCss": false }],
+    [
+      "@compiled/babel-plugin-strip-runtime",
+      { "extractStylesToDirectory": { "source": "src", "dest": "dist" } }
+    ]
+  ]
+}

fixtures/babel-component-extracted/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@compiled/babel-component-extracted-fixture",
+  "version": "0.1.0",
+  "private": true,
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "TEST_PKG_VERSION='0.0.0' babel ./src --out-dir=./dist"
+  },
+  "dependencies": {
+    "@compiled/react": "*"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@compiled/babel-plugin": "*",
+    "@compiled/babel-plugin-strip-runtime": "*"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1"
+  }
+}

fixtures/babel-component-extracted/src/index.jsx

@@ -0,0 +1,17 @@
+import { styled, css } from '@compiled/react';
+
+const Button = styled.button({
+  color: 'blue',
+  fontSize: '30px',
+  border: '2px solid blue',
+  padding: '32px',
+  backgroundColor: 'yellow',
+});
+
+export default function BabelComponent({ children }) {
+  return (
+    <div css={css({ marginTop: 30 })}>
+      <Button>{children}</Button>
+    </div>
+  );
+}