@compiled/parcel-transformer 0.7.3 → 0.9.0

package/README.md

@@ -10,4 +10,4 @@ npm i @compiled/parcel-transformer
 
 ## Usage
 
-Detailed docs and example usage can be [found on the documentation website](https://compiledcssinjs.com/docs/pkg-parcel).
+Detailed docs and example usage can be [found on the documentation website](https://compiledcssinjs.com/docs/pkg-parcel-transformer).

package/dist/index.d.ts

@@ -1 +1,7 @@
-export { default } from './transformer';
+import { Transformer } from '@parcel/plugin';
+import type { ParcelTransformerOpts } from './types';
+declare const _default: Transformer<ParcelTransformerOpts>;
+/**
+ * Compiled parcel transformer.
+ */
+export default _default;

package/dist/index.js

@@ -3,7 +3,123 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var transformer_1 = require("./transformer");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(transformer_1).default; } });
+const path_1 = require("path");
+const core_1 = require("@babel/core");
+const generator_1 = __importDefault(require("@babel/generator"));
+const utils_1 = require("@compiled/utils");
+const plugin_1 = require("@parcel/plugin");
+const source_map_1 = __importDefault(require("@parcel/source-map"));
+const configFiles = [
+    '.compiledcssrc',
+    '.compiledcssrc.json',
+    'compiledcss.js',
+    'compiledcss.config.js',
+];
+/**
+ * Compiled parcel transformer.
+ */
+exports.default = new plugin_1.Transformer({
+    async loadConfig({ config, options }) {
+        const conf = await config.getConfigFrom((0, path_1.join)(options.projectRoot, 'index'), configFiles, {
+            packageKey: '@compiled/parcel-transformer',
+        });
+        const contents = {
+            extract: false,
+            importReact: true,
+            ssr: false,
+        };
+        if (conf) {
+            config.invalidateOnStartup();
+            Object.assign(contents, conf.contents);
+        }
+        return contents;
+    },
+    canReuseAST() {
+        // Compiled should run before any other JS transformer.
+        return false;
+    },
+    async parse({ asset, config }) {
+        var _a;
+        if (!asset.isSource && !config.extract) {
+            // Only parse source (pre-built code should already have been baked) or if stylesheet extraction is enabled
+            return undefined;
+        }
+        const code = await asset.getCode();
+        if (code.indexOf('@compiled/react') === -1) {
+            // We only want to parse files that are actually using Compiled.
+            // For everything else we bail out.
+            return undefined;
+        }
+        const program = await (0, core_1.parseAsync)(code, {
+            filename: asset.filePath,
+            caller: { name: 'compiled' },
+            rootMode: 'upward-optional',
+            plugins: (_a = config.transformerBabelPlugins) !== null && _a !== void 0 ? _a : undefined,
+        });
+        return {
+            type: 'babel',
+            version: '7.0.0',
+            program,
+        };
+    },
+    async transform({ asset, config }) {
+        var _a;
+        const ast = await asset.getAST();
+        if (!ast) {
+            // We will only receive ASTs for assets we're interested in.
+            // Since this is undefined (or in node modules) we aren't interested in it.
+            return [asset];
+        }
+        const includedFiles = [];
+        const code = asset.isASTDirty() ? undefined : await asset.getCode();
+        const result = await (0, core_1.transformFromAstAsync)(ast.program, code, {
+            code: true,
+            ast: false,
+            filename: asset.filePath,
+            babelrc: false,
+            configFile: false,
+            sourceMaps: true,
+            plugins: [
+                ...((_a = config.transformerBabelPlugins) !== null && _a !== void 0 ? _a : []),
+                asset.isSource && [
+                    '@compiled/babel-plugin',
+                    Object.assign(Object.assign({}, config), { onIncludedFiles: (files) => includedFiles.push(...files), cache: false }),
+                ],
+                config.extract && [
+                    '@compiled/babel-plugin-strip-runtime',
+                    {
+                        styleSheetPath: 'compiled-css!',
+                        compiledRequireExclude: config.ssr,
+                    },
+                ],
+            ].filter(utils_1.toBoolean),
+            caller: {
+                name: 'compiled',
+            },
+        });
+        const output = (result === null || result === void 0 ? void 0 : result.code) || '';
+        includedFiles.forEach((file) => {
+            // Included files are those which have been statically evaluated into this asset.
+            // This tells parcel that if any of those files change this asset should be transformed
+            // again.
+            asset.invalidateOnFileChange(file);
+        });
+        asset.setCode(output);
+        return [asset];
+    },
+    async generate({ asset, ast }) {
+        // TODO: We're using babels standard generator. Internally parcel does some hacks in
+        // the official Babel transformer to make it faster - using ASTree directly.
+        // Perhaps we should do the same thing.
+        const { code, map: babelMap } = (0, generator_1.default)(ast.program, {
+            filename: asset.filePath,
+            sourceMaps: true,
+            sourceFileName: asset.filePath,
+        });
+        return {
+            content: code,
+            map: babelMap ? new source_map_1.default().addVLQMap(babelMap) : null,
+        };
+    },
+});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,6CAAwC;AAA/B,uHAAA,OAAO,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+import type { PluginItem } from '@babel/core';
+import type { PluginOptions } from '@compiled/babel-plugin';
+declare type BabelPluginOpts = Omit<PluginOptions, 'cache' | 'onIncludedFiles'>;
+export interface ParcelTransformerOpts extends BabelPluginOpts {
+    extract?: boolean;
+    stylesheetPath?: string;
+    /**
+     * List of transformer babel plugins to be applied to evaluated files
+     *
+     * See the [babel docs](https://babeljs.io/docs/en/plugins/#transform-plugins)
+     */
+    transformerBabelPlugins?: PluginItem[];
+    /**
+     * Builds in a node environment.
+     * Defaults to `false`.
+     */
+    ssr?: boolean;
+}
+export {};

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/parcel-transformer",
-  "version": "0.7.3",
+  "version": "0.9.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "homepage": "https://compiledcssinjs.com/docs/pkg-parcel-transformer",
   "bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
@@ -17,19 +17,22 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src",
-    "README.md"
+    "src"
   ],
   "dependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/generator": "^7.17.3",
-    "@compiled/babel-plugin": "^0.14.0",
+    "@babel/core": "^7.17.10",
+    "@babel/generator": "^7.17.10",
+    "@compiled/babel-plugin": "^0.16.0",
+    "@compiled/babel-plugin-strip-runtime": "^0.16.0",
     "@compiled/utils": "^0.6.16",
     "@parcel/plugin": "^2.3.2",
     "@parcel/source-map": "^2.0.2"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.1.18"
+    "@parcel/core": "^2.3.1",
+    "@parcel/fs": "^2.3.1",
+    "@parcel/types": "^2.3.1",
+    "@types/babel__core": "^7.1.19"
   },
   "engines": {
     "parcel": "^2.0.0"

package/src/__tests__/transformer.parceltest.ts

@@ -0,0 +1,166 @@
+import { join } from 'path';
+
+import Parcel, { createWorkerFarm } from '@parcel/core';
+import { MemoryFS } from '@parcel/fs';
+
+const rootPath = join(__dirname, '..', '..', '..', '..');
+const fixtureRoot = join(rootPath, 'fixtures/parcel-transformer-test-app');
+const extractionFixtureRoot = join(rootPath, 'fixtures/parcel-transformer-test-extract-app');
+const babelComponentFixture = join(rootPath, 'fixtures/babel-component');
+
+const workerFarm = createWorkerFarm();
+
+afterAll(() => {
+  workerFarm.end();
+});
+
+const getParcelInstance = (workingDir: string) => {
+  const outputFS = new MemoryFS(workerFarm);
+  return new Parcel({
+    config: join(workingDir, '.parcelrc'),
+    entries: [join(workingDir, 'src', 'index.html')],
+    outputFS,
+    targets: {
+      default: {
+        distDir: join(workingDir, 'dist'),
+      },
+    },
+    workerFarm,
+  });
+};
+
+it('transforms assets with babel plugin', async () => {
+  const parcel = getParcelInstance(fixtureRoot);
+  const { changedAssets } = await parcel.run();
+
+  const asset = Array.from(changedAssets.values()).find(
+    (asset) => asset.filePath === join(fixtureRoot, 'src/index.jsx')
+  );
+
+  const code = await asset?.getCode();
+  const appCode = code?.slice(
+    code.indexOf('/* index.jsx generated by @compiled/babel-plugin v0.0.0 */')
+  );
+  expect(appCode).toMatchInlineSnapshot(`
+    "/* index.jsx generated by @compiled/babel-plugin v0.0.0 */ var _2 = \\"._syaz5scu{color:red}\\";
+    var _ = \\"._1wyb12am{font-size:50px}\\";
+    var App = function() {
+        /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_runtime.CC, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_runtime.CS, {
+                        children: [
+                            _,
+                            _2
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(\\"div\\", {
+                        className: (0, _runtime.ax)([
+                            \\"_1wyb12am _syaz5scu\\"
+                        ]),
+                        children: \\"hello from parcel\\"
+                    })
+                ]
+            })
+        });
+    };
+    "
+  `);
+}, 50000);
+
+it('transforms assets with compiled and extraction babel plugins', async () => {
+  const parcel = getParcelInstance(extractionFixtureRoot);
+  const { changedAssets } = await parcel.run();
+  const assets = Array.from(changedAssets.values());
+
+  const indexJsCode = await assets
+    .find((asset) => asset.filePath === join(extractionFixtureRoot, 'src/index.jsx'))
+    ?.getCode();
+  expect(indexJsCode).toMatchInlineSnapshot(`
+    "var parcelHelpers = require(\\"@parcel/transformer-js/src/esmodule-helpers.js\\");
+    var _jsxDevRuntime = require(\\"react/jsx-dev-runtime\\");
+    var _runtime = require(\\"@compiled/react/runtime\\");
+    var _babelComponentFixture = require(\\"@compiled/babel-component-fixture\\");
+    var _babelComponentFixtureDefault = parcelHelpers.interopDefault(_babelComponentFixture);
+    var _this = undefined;
+    /* index.jsx generated by @compiled/babel-plugin v0.0.0 */ require(\\"compiled-css!?style=._syaz5scu%7Bcolor%3Ared%7D\\");
+    require(\\"compiled-css!?style=._1wyb12am%7Bfont-size%3A50px%7D\\");
+    var App = function() {
+        /*#__PURE__*/ return _jsxDevRuntime.jsxDEV(_jsxDevRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxDevRuntime.jsxDEV(\\"div\\", {
+                    className: _runtime.ax([
+                        \\"_1wyb12am _syaz5scu\\"
+                    ]),
+                    children: \\"CSS prop\\"
+                }, void 0, false, {
+                    fileName: \\"src/index.jsx\\",
+                    lineNumber: 11,
+                    columnNumber: 5
+                }, _this),
+                /*#__PURE__*/ _jsxDevRuntime.jsxDEV(_babelComponentFixtureDefault.default, {
+                    children: \\"Babel component\\"
+                }, void 0, false, {
+                    fileName: \\"src/index.jsx\\",
+                    lineNumber: 12,
+                    columnNumber: 5
+                }, _this)
+            ]
+        }, void 0, true);
+    };
+    "
+  `);
+
+  const babelComponentCode = await assets
+    .find((asset) => asset.filePath === join(babelComponentFixture, 'dist/index.js'))
+    ?.getCode();
+
+  const extractedCss = babelComponentCode
+    ?.slice(0, babelComponentCode.indexOf('exports.default = BabelComponent;'))
+    .trim();
+  expect(extractedCss).toMatchInlineSnapshot(`
+    "/* index.jsx generated by @compiled/babel-plugin v0.0.0 */ \\"use strict\\";
+    require(\\"compiled-css!?style=._19pk1ul9%7Bmargin-top%3A30px%7D\\");
+    require(\\"compiled-css!?style=._19bvftgi%7Bpadding-left%3A8px%7D\\");
+    require(\\"compiled-css!?style=._n3tdftgi%7Bpadding-bottom%3A8px%7D\\");
+    require(\\"compiled-css!?style=._u5f3ftgi%7Bpadding-right%3A8px%7D\\");
+    require(\\"compiled-css!?style=._ca0qftgi%7Bpadding-top%3A8px%7D\\");
+    require(\\"compiled-css!?style=._19itlf8h%7Bborder%3A2px%20solid%20blue%7D\\");
+    require(\\"compiled-css!?style=._1wyb1ul9%7Bfont-size%3A30px%7D\\");
+    require(\\"compiled-css!?style=._syaz13q2%7Bcolor%3Ablue%7D\\");
+    Object.defineProperty(exports, \\"__esModule\\", {
+        value: true
+    });"
+  `);
+
+  const extractedComponent = babelComponentCode
+    ?.slice(babelComponentCode.indexOf('var Button'))
+    .trim();
+  expect(extractedComponent).toMatchInlineSnapshot(`
+    "var Button = (0, _react.forwardRef)(function(_ref, ref) {
+        var _ref$as = _ref.as, C = _ref$as === void 0 ? \\"button\\" : _ref$as, style = _ref.style, props = _objectWithoutProperties(_ref, _excluded);
+        return (0, _jsxRuntime.jsx)(C, _objectSpread(_objectSpread({
+        }, props), {
+        }, {
+            style: style,
+            ref: ref,
+            className: (0, _runtime.ax)([
+                \\"_syaz13q2 _1wyb1ul9 _19itlf8h _ca0qftgi _u5f3ftgi _n3tdftgi _19bvftgi\\",
+                props.className
+            ])
+        }));
+    });
+    Button.displayName = 'Button';
+    function BabelComponent(_ref2) {
+        var children = _ref2.children;
+        return (0, _jsxRuntime.jsx)(\\"div\\", {
+            className: (0, _runtime.ax)([
+                \\"_19pk1ul9\\"
+            ]),
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Button, {
+                children: children
+            })
+        });
+    }"
+  `);
+}, 50000);

package/src/index.ts

@@ -1 +1,145 @@
-export { default } from './transformer';
+import { join } from 'path';
+
+import { parseAsync, transformFromAstAsync } from '@babel/core';
+import generate from '@babel/generator';
+import type { PluginOptions as BabelPluginOptions } from '@compiled/babel-plugin';
+import type { PluginOptions as BabelStripRuntimePluginOptions } from '@compiled/babel-plugin-strip-runtime';
+import { toBoolean } from '@compiled/utils';
+import { Transformer } from '@parcel/plugin';
+import SourceMap from '@parcel/source-map';
+
+import type { ParcelTransformerOpts } from './types';
+
+const configFiles = [
+  '.compiledcssrc',
+  '.compiledcssrc.json',
+  'compiledcss.js',
+  'compiledcss.config.js',
+];
+
+/**
+ * Compiled parcel transformer.
+ */
+export default new Transformer<ParcelTransformerOpts>({
+  async loadConfig({ config, options }) {
+    const conf = await config.getConfigFrom(join(options.projectRoot, 'index'), configFiles, {
+      packageKey: '@compiled/parcel-transformer',
+    });
+
+    const contents = {
+      extract: false,
+      importReact: true,
+      ssr: false,
+    };
+
+    if (conf) {
+      config.invalidateOnStartup();
+      Object.assign(contents, conf.contents);
+    }
+
+    return contents;
+  },
+
+  canReuseAST() {
+    // Compiled should run before any other JS transformer.
+    return false;
+  },
+
+  async parse({ asset, config }) {
+    if (!asset.isSource && !config.extract) {
+      // Only parse source (pre-built code should already have been baked) or if stylesheet extraction is enabled
+      return undefined;
+    }
+
+    const code = await asset.getCode();
+    if (code.indexOf('@compiled/react') === -1) {
+      // We only want to parse files that are actually using Compiled.
+      // For everything else we bail out.
+      return undefined;
+    }
+
+    const program = await parseAsync(code, {
+      filename: asset.filePath,
+      caller: { name: 'compiled' },
+      rootMode: 'upward-optional',
+      plugins: config.transformerBabelPlugins ?? undefined,
+    });
+
+    return {
+      type: 'babel',
+      version: '7.0.0',
+      program,
+    };
+  },
+
+  async transform({ asset, config }) {
+    const ast = await asset.getAST();
+    if (!ast) {
+      // We will only receive ASTs for assets we're interested in.
+      // Since this is undefined (or in node modules) we aren't interested in it.
+      return [asset];
+    }
+
+    const includedFiles: string[] = [];
+    const code = asset.isASTDirty() ? undefined : await asset.getCode();
+
+    const result = await transformFromAstAsync(ast.program, code, {
+      code: true,
+      ast: false,
+      filename: asset.filePath,
+      babelrc: false,
+      configFile: false,
+      sourceMaps: true,
+      plugins: [
+        ...(config.transformerBabelPlugins ?? []),
+        asset.isSource && [
+          '@compiled/babel-plugin',
+          {
+            ...config,
+            onIncludedFiles: (files: string[]) => includedFiles.push(...files),
+            cache: false,
+          } as BabelPluginOptions,
+        ],
+        config.extract && [
+          '@compiled/babel-plugin-strip-runtime',
+          {
+            styleSheetPath: 'compiled-css!',
+            compiledRequireExclude: config.ssr,
+          } as BabelStripRuntimePluginOptions,
+        ],
+      ].filter(toBoolean),
+      caller: {
+        name: 'compiled',
+      },
+    });
+
+    const output = result?.code || '';
+
+    includedFiles.forEach((file) => {
+      // Included files are those which have been statically evaluated into this asset.
+      // This tells parcel that if any of those files change this asset should be transformed
+      // again.
+      asset.invalidateOnFileChange(file);
+    });
+
+    asset.setCode(output);
+
+    return [asset];
+  },
+
+  async generate({ asset, ast }) {
+    // TODO: We're using babels standard generator. Internally parcel does some hacks in
+    // the official Babel transformer to make it faster - using ASTree directly.
+    // Perhaps we should do the same thing.
+    const { code, map: babelMap } = generate(ast.program, {
+      filename: asset.filePath,
+      sourceMaps: true,
+      sourceFileName: asset.filePath,
+    });
+
+    return {
+      content: code,
+      map: babelMap ? new SourceMap().addVLQMap(babelMap) : null,
+    };
+  },
+});

package/src/types.ts

@@ -0,0 +1,22 @@
+import type { PluginItem } from '@babel/core';
+import type { PluginOptions } from '@compiled/babel-plugin';
+
+type BabelPluginOpts = Omit<PluginOptions, 'cache' | 'onIncludedFiles'>;
+
+export interface ParcelTransformerOpts extends BabelPluginOpts {
+  extract?: boolean;
+  stylesheetPath?: string;
+
+  /**
+   * List of transformer babel plugins to be applied to evaluated files
+   *
+   * See the [babel docs](https://babeljs.io/docs/en/plugins/#transform-plugins)
+   */
+  transformerBabelPlugins?: PluginItem[];
+
+  /**
+   * Builds in a node environment.
+   * Defaults to `false`.
+   */
+  ssr?: boolean;
+}

package/dist/transformer.d.ts

@@ -1,8 +0,0 @@
-import type { PluginOptions } from '@compiled/babel-plugin';
-import { Transformer } from '@parcel/plugin';
-declare type UserlandOpts = Omit<PluginOptions, 'cache' | 'onIncludedFiles'>;
-declare const _default: Transformer<UserlandOpts>;
-/**
- * Compiled parcel transformer.
- */
-export default _default;

package/dist/transformer.js

@@ -1,114 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("@babel/core");
-const generator_1 = __importDefault(require("@babel/generator"));
-const plugin_1 = require("@parcel/plugin");
-const source_map_1 = __importDefault(require("@parcel/source-map"));
-const configFiles = [
-    '.compiledcssrc',
-    '.compiledcssrc.json',
-    'compiledcss.js',
-    'compiledcss.config.js',
-];
-/**
- * Compiled parcel transformer.
- */
-exports.default = new plugin_1.Transformer({
-    async loadConfig({ config }) {
-        const conf = await config.getConfig(configFiles, {
-            packageKey: '@compiled/parcel-transformer',
-        });
-        const contents = {};
-        if (conf) {
-            config.invalidateOnStartup();
-            Object.assign(contents, conf.contents);
-        }
-        return contents;
-    },
-    canReuseAST() {
-        // Compiled should run before any other JS transformer.
-        return false;
-    },
-    async parse({ asset }) {
-        if (!asset.isSource) {
-            return undefined;
-        }
-        const code = await asset.getCode();
-        if (code.indexOf('@compiled/react') === -1) {
-            // We only want to parse files that are actually using Compiled.
-            // For everything else we bail out.
-            return undefined;
-        }
-        const program = await (0, core_1.parseAsync)(code, {
-            filename: asset.filePath,
-            caller: { name: 'compiled' },
-            rootMode: 'upward-optional',
-        });
-        return {
-            type: 'babel',
-            version: '7.0.0',
-            program,
-        };
-    },
-    async transform({ asset, config }) {
-        const ast = await asset.getAST();
-        if (!asset.isSource || !ast) {
-            // We will only recieve ASTs for assets we're interested in.
-            // Since this is undefined (or in node modules) we aren't interested in it.
-            return [asset];
-        }
-        const includedFiles = [];
-        const code = asset.isASTDirty() ? undefined : await asset.getCode();
-        const result = await (0, core_1.transformFromAstAsync)(ast.program, code, {
-            code: false,
-            ast: true,
-            filename: asset.filePath,
-            babelrc: false,
-            configFile: false,
-            sourceMaps: true,
-            plugins: [
-                [
-                    '@compiled/babel-plugin',
-                    Object.assign(Object.assign({}, config), { onIncludedFiles: (files) => includedFiles.push(...files), cache: 'single-pass' }),
-                ],
-            ],
-            caller: {
-                name: 'compiled',
-            },
-        });
-        includedFiles.forEach((file) => {
-            // Included files are those which have been statically evaluated into this asset.
-            // This tells parcel that if any of those files change this asset should be transformed
-            // again.
-            asset.invalidateOnFileChange(file);
-        });
-        if (result === null || result === void 0 ? void 0 : result.ast) {
-            asset.setAST({
-                // TODO: Currently if we set this as `'babel'` the babel transformer blows up.
-                // Let's figure out what we can do to reuse it.
-                type: 'compiled',
-                version: '0.0.0',
-                program: result.ast,
-            });
-        }
-        return [asset];
-    },
-    async generate({ asset, ast }) {
-        // TODO: We're using babels standard generator. Internally parcel does some hacks in
-        // the official Babel transformer to make it faster - using ASTree directly.
-        // Perhaps we should do the same thing.
-        const { code, map: babelMap } = (0, generator_1.default)(ast.program, {
-            filename: asset.filePath,
-            sourceMaps: true,
-            sourceFileName: asset.filePath,
-        });
-        return {
-            content: code,
-            map: babelMap ? new source_map_1.default().addVLQMap(babelMap) : null,
-        };
-    },
-});
-//# sourceMappingURL=transformer.js.map

package/dist/transformer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"transformer.js","sourceRoot":"","sources":["../src/transformer.ts"],"names":[],"mappings":"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"}

package/src/transformer.ts

@@ -1,133 +0,0 @@
-import { parseAsync, transformFromAstAsync } from '@babel/core';
-import generate from '@babel/generator';
-import type { PluginOptions } from '@compiled/babel-plugin';
-import { Transformer } from '@parcel/plugin';
-import SourceMap from '@parcel/source-map';
-
-type UserlandOpts = Omit<PluginOptions, 'cache' | 'onIncludedFiles'>;
-
-const configFiles = [
-  '.compiledcssrc',
-  '.compiledcssrc.json',
-  'compiledcss.js',
-  'compiledcss.config.js',
-];
-
-/**
- * Compiled parcel transformer.
- */
-export default new Transformer<UserlandOpts>({
-  async loadConfig({ config }) {
-    const conf = await config.getConfig(configFiles, {
-      packageKey: '@compiled/parcel-transformer',
-    });
-
-    const contents: UserlandOpts = {};
-
-    if (conf) {
-      config.invalidateOnStartup();
-      Object.assign(contents, conf.contents);
-    }
-
-    return contents;
-  },
-
-  canReuseAST() {
-    // Compiled should run before any other JS transformer.
-    return false;
-  },
-
-  async parse({ asset }) {
-    if (!asset.isSource) {
-      return undefined;
-    }
-
-    const code = await asset.getCode();
-    if (code.indexOf('@compiled/react') === -1) {
-      // We only want to parse files that are actually using Compiled.
-      // For everything else we bail out.
-      return undefined;
-    }
-
-    const program = await parseAsync(code, {
-      filename: asset.filePath,
-      caller: { name: 'compiled' },
-      rootMode: 'upward-optional',
-    });
-
-    return {
-      type: 'babel',
-      version: '7.0.0',
-      program,
-    };
-  },
-
-  async transform({ asset, config }) {
-    const ast = await asset.getAST();
-    if (!asset.isSource || !ast) {
-      // We will only recieve ASTs for assets we're interested in.
-      // Since this is undefined (or in node modules) we aren't interested in it.
-      return [asset];
-    }
-
-    const includedFiles: string[] = [];
-    const code = asset.isASTDirty() ? undefined : await asset.getCode();
-
-    const result = await transformFromAstAsync(ast.program, code, {
-      code: false,
-      ast: true,
-      filename: asset.filePath,
-      babelrc: false,
-      configFile: false,
-      sourceMaps: true,
-      plugins: [
-        [
-          '@compiled/babel-plugin',
-          {
-            ...config,
-            onIncludedFiles: (files: string[]) => includedFiles.push(...files),
-            cache: 'single-pass',
-          },
-        ],
-      ],
-      caller: {
-        name: 'compiled',
-      },
-    });
-
-    includedFiles.forEach((file) => {
-      // Included files are those which have been statically evaluated into this asset.
-      // This tells parcel that if any of those files change this asset should be transformed
-      // again.
-      asset.invalidateOnFileChange(file);
-    });
-
-    if (result?.ast) {
-      asset.setAST({
-        // TODO: Currently if we set this as `'babel'` the babel transformer blows up.
-        // Let's figure out what we can do to reuse it.
-        type: 'compiled',
-        version: '0.0.0',
-        program: result.ast,
-      });
-    }
-
-    return [asset];
-  },
-
-  async generate({ asset, ast }) {
-    // TODO: We're using babels standard generator. Internally parcel does some hacks in
-    // the official Babel transformer to make it faster - using ASTree directly.
-    // Perhaps we should do the same thing.
-    const { code, map: babelMap } = generate(ast.program, {
-      filename: asset.filePath,
-      sourceMaps: true,
-      sourceFileName: asset.filePath,
-    });
-
-    return {
-      content: code,
-      map: babelMap ? new SourceMap().addVLQMap(babelMap) : null,
-    };
-  },
-});