@atlaspack/transformer-compiled 0.1.1-dev-swc44-3ef36b21e.0 → 0.2.1-canary.4115

package/lib/CompiledTransformer.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * allowing users to transition without any change in functionality.
  */
 const path_1 = require("path");
+const assert_1 = __importDefault(require("assert"));
 const core_1 = require("@babel/core");
 const generator_1 = __importDefault(require("@babel/generator"));
 const utils_1 = require("@compiled/utils");
@@ -17,6 +18,14 @@ const plugin_1 = require("@atlaspack/plugin");
 const source_map_1 = __importDefault(require("@atlaspack/source-map"));
 const utils_2 = require("@atlaspack/utils");
 const utils_3 = require("./utils");
+const babel_plugin_1 = __importDefault(require("@compiled/babel-plugin"));
+const babel_plugin_strip_runtime_1 = __importDefault(require("@compiled/babel-plugin-strip-runtime"));
+// @ts-expect-error no declaration file
+// eslint-disable-next-line import/no-extraneous-dependencies
+const plugin_syntax_jsx_1 = __importDefault(require("@babel/plugin-syntax-jsx"));
+// @ts-expect-error no declaration file
+// eslint-disable-next-line import/no-extraneous-dependencies
+const plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
 const configFiles = [
     '.compiledcssrc',
     '.compiledcssrc.json',
@@ -28,7 +37,7 @@ const packageKey = '@atlaspack/transformer-compiled';
  * Atlaspack Compiled transformer.
  */
 exports.default = new plugin_1.Transformer({
-    async loadConfig({ config, options }) {
+    async setup({ config, options }) {
         const conf = await config.getConfigFrom((0, path_1.join)(options.projectRoot, 'index'), configFiles, {
             packageKey,
         });
@@ -58,68 +67,72 @@ exports.default = new plugin_1.Transformer({
             }
             Object.assign(contents, conf.contents);
         }
-        return contents;
-    },
-    canReuseAST() {
-        // Compiled should run before any other JS transformer.
-        return false;
+        let importSourceMatches = [
+            ...utils_1.DEFAULT_IMPORT_SOURCES,
+            ...(contents.importSources || []),
+        ];
+        return {
+            config: {
+                compiledConfig: contents,
+                mode: options.mode,
+                projectRoot: options.projectRoot,
+            },
+            conditions: {
+                codeMatch: importSourceMatches,
+            },
+            env: [
+                // TODO revisit this list, since we may have added variables in here that were actually enumarated rather than accessed directly
+                'BABEL_ENV',
+                'BABEL_SHOW_CONFIG_FOR',
+                'BROWSERSLIST',
+                'BROWSERSLIST_CONFIG',
+                'BROWSERSLIST_DISABLE_CACHE',
+                'BROWSERSLIST_ENV',
+                'BROWSERSLIST_IGNORE_OLD_DATA',
+                'BABEL_TYPES_8_BREAKING',
+                'BROWSERSLIST_ROOT_PATH',
+                'BROWSERSLIST_STATS',
+                'AUTOPREFIXER',
+                'AUTOPREFIXER_GRID',
+                'TEST_PKG_VERSION',
+                'FORCE_COLOR',
+                'DEBUG',
+                'NODE_DEBUG',
+                'CI',
+                'COLORTERM',
+            ],
+        };
     },
-    async parse({ asset, config, options }) {
+    async transform({ asset, config }) {
+        if (config.compiledConfig.extract &&
+            config.compiledConfig.classHashPrefix) {
+            throw new Error('`@atlaspack/transformer-compiled` is mixing `extract: true` and `classHashPrefix` options, which will not supported and will result in bundle size bloat.');
+        }
         // Disable stylesheet extraction locally due to https://github.com/atlassian-labs/compiled/issues/1306
-        const extract = config.extract && options.mode !== 'development';
+        const extract = config.compiledConfig.extract && config.mode !== 'development';
         if (!asset.isSource && !extract) {
             // Only parse source (pre-built code should already have been baked) or if stylesheet extraction is enabled
-            return undefined;
+            return [asset];
         }
         const code = await asset.getCode();
         if (
         // If neither Compiled (default) nor any of the additional import sources are found in the code, we bail out.
-        [...utils_1.DEFAULT_IMPORT_SOURCES, ...(config.importSources || [])].every((importSource) => !code.includes(importSource))) {
+        [
+            ...utils_1.DEFAULT_IMPORT_SOURCES,
+            ...(config.compiledConfig.importSources || []),
+        ].every((importSource) => !code.includes(importSource))) {
             // We only want to parse files that are actually using Compiled.
             // For everything else we bail out.
-            return undefined;
+            return [asset];
         }
         if (code.includes('/* COMPILED_TRANSFORMED_ASSET */')) {
             // If we're dealing with a pre-transformed asset, we bail out to avoid performing the expensive parse operation.
             // We add this marker to the code to indicate that the asset has already been transformed.
-            return undefined;
-        }
-        const program = await (0, core_1.parseAsync)(code, {
-            filename: asset.filePath,
-            babelrc: false,
-            configFile: false,
-            caller: { name: 'compiled' },
-            rootMode: 'upward-optional',
-            parserOpts: {
-                // @ts-expect-error - Type mismatch between @babel/parser and @compiled/utils versions
-                plugins: config.parserBabelPlugins ?? utils_1.DEFAULT_PARSER_BABEL_PLUGINS,
-            },
-            plugins: config.transformerBabelPlugins ?? undefined,
-        });
-        if (program) {
-            return {
-                type: 'babel',
-                version: '7.0.0',
-                program,
-            };
-        }
-        return undefined;
-    },
-    async transform({ asset, config, options }) {
-        if (config.extract && config.classHashPrefix) {
-            throw new Error('`@atlaspack/transformer-compiled` is mixing `extract: true` and `classHashPrefix` options, which will not supported and will result in bundle size bloat.');
-        }
-        const ast = await asset.getAST();
-        if (!(ast?.type === 'babel' && ast.program)) {
-            // 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];
         }
         // Disable stylesheet extraction locally due to https://github.com/atlassian-labs/compiled/issues/1306
-        const extract = config.extract && options.mode !== 'development';
         const includedFiles = [];
-        const code = asset.isASTDirty() ? undefined : await asset.getCode();
-        const result = await (0, core_1.transformFromAstAsync)(ast.program, code, {
+        const result = await (0, core_1.transformAsync)(code, {
             code: false,
             ast: true,
             filename: asset.filePath,
@@ -127,29 +140,27 @@ exports.default = new plugin_1.Transformer({
             configFile: false,
             sourceMaps: !!asset.env.sourceMap,
             compact: false,
-            parserOpts: {
-                // @ts-expect-error - Type mismatch between @babel/parser and @compiled/utils versions
-                plugins: config.parserBabelPlugins ?? utils_1.DEFAULT_PARSER_BABEL_PLUGINS,
-            },
             plugins: [
-                ...(config.transformerBabelPlugins ?? []),
+                plugin_syntax_jsx_1.default,
+                [plugin_syntax_typescript_1.default, { isTSX: true }],
                 asset.isSource && [
-                    '@compiled/babel-plugin',
+                    babel_plugin_1.default,
                     {
                         ...config,
-                        classNameCompressionMap: config.extract && config.classNameCompressionMap,
+                        classNameCompressionMap: config.compiledConfig.extract &&
+                            config.compiledConfig.classNameCompressionMap,
                         onIncludedFiles: (files) => includedFiles.push(...files),
-                        resolver: config.resolver
-                            ? config.resolver
-                            : (0, utils_3.createDefaultResolver)(config),
+                        resolver: config.compiledConfig.resolver
+                            ? config.compiledConfig.resolver
+                            : (0, utils_3.createDefaultResolver)(config.compiledConfig),
                         cache: false,
                     },
                 ],
                 extract && [
-                    '@compiled/babel-plugin-strip-runtime',
+                    babel_plugin_strip_runtime_1.default,
                     {
                         compiledRequireExclude: true,
-                        extractStylesToDirectory: config.extractStylesToDirectory,
+                        extractStylesToDirectory: config.compiledConfig.extractStylesToDirectory,
                     },
                 ],
             ].filter(utils_1.toBoolean),
@@ -171,24 +182,16 @@ exports.default = new plugin_1.Transformer({
                 ...(metadata.styleRules ?? []),
             ];
         }
-        if (result?.ast) {
-            asset.setAST({
-                type: 'babel',
-                version: '7.0.0',
-                program: result.ast,
-            });
-        }
-        return [asset];
-    },
-    async generate({ asset, ast, options }) {
         const originalSourceMap = await asset.getMap();
-        const sourceFileName = (0, utils_2.relativeUrl)(options.projectRoot, asset.filePath);
-        const { code, rawMappings } = (0, generator_1.default)(ast.program, {
+        const sourceFileName = (0, utils_2.relativeUrl)(config.projectRoot, asset.filePath);
+        (0, assert_1.default)(result?.ast, 'Babel transform returned no AST');
+        const { code: generatedCode, rawMappings } = (0, generator_1.default)(result.ast.program, {
             sourceFileName,
             sourceMaps: !!asset.env.sourceMap,
             comments: true,
         });
-        const map = new source_map_1.default(options.projectRoot);
+        asset.setCode(generatedCode);
+        const map = new source_map_1.default(config.projectRoot);
         if (rawMappings) {
             map.addIndexedMappings(rawMappings);
         }
@@ -203,9 +206,6 @@ exports.default = new plugin_1.Transformer({
                 }
             }
         }
-        return {
-            content: code,
-            map,
-        };
+        return [asset];
     },
 });

package/lib/types/CompiledTransformer.d.ts

@@ -1,7 +1,13 @@
 import { Transformer } from '@atlaspack/plugin';
 import type { CompiledTransformerOpts } from './types';
+import { BuildMode } from '@atlaspack/types';
+interface Config {
+    compiledConfig: CompiledTransformerOpts;
+    mode: BuildMode;
+    projectRoot: string;
+}
 /**
  * Atlaspack Compiled transformer.
  */
-declare const _default: Transformer<CompiledTransformerOpts>;
+declare const _default: Transformer<Config>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaspack/transformer-compiled",
-  "version": "0.1.1-dev-swc44-3ef36b21e.0",
+  "version": "0.2.1-canary.4115+c294ec464",
   "description": "Atlaspack transformer for Compiled CSS-in-JS (insourced from @compiled/parcel-transformer)",
   "license": "(MIT OR Apache-2.0)",
   "publishConfig": {
@@ -21,22 +21,24 @@
     "src"
   ],
   "dependencies": {
-    "@atlaspack/plugin": "2.14.46-dev-swc44-3ef36b21e.0",
-    "@atlaspack/source-map": "3.2.1-dev-swc44-3ef36b21e.0",
-    "@atlaspack/utils": "3.2.7-dev-swc44-3ef36b21e.0",
+    "@atlaspack/plugin": "2.14.5-canary.336+c294ec464",
+    "@atlaspack/source-map": "3.2.2-canary.4115+c294ec464",
+    "@atlaspack/utils": "2.14.5-canary.336+c294ec464",
     "@babel/core": "^7.22.11",
     "@babel/generator": "^7.22.10",
+    "@babel/plugin-syntax-jsx": "^7.27.1",
+    "@babel/plugin-syntax-typescript": "^7.27.1",
     "@compiled/babel-plugin": "^0.38.0",
     "@compiled/babel-plugin-strip-runtime": "^0.38.0",
     "@compiled/utils": "^0.13.1",
     "enhanced-resolve": "^5.18.1"
   },
   "devDependencies": {
-    "@atlaspack/types": "2.15.36-dev-swc44-3ef36b21e.0"
+    "@atlaspack/types": "2.14.5-canary.336+c294ec464"
   },
   "type": "commonjs",
   "scripts": {
     "build:lib": "gulp build --gulpfile ../../../gulpfile.js --cwd ."
   },
-  "gitHead": "3ef36b21e388934416729737de94a47adf5e6ca4"
+  "gitHead": "c294ec464d8c195f9ad0d34ccf1a6ec1dbf7e4b4"
 }

package/src/CompiledTransformer.ts

@@ -5,25 +5,31 @@
  * allowing users to transition without any change in functionality.
  */
 import {join} from 'path';
+import assert from 'assert';
 
-import {parseAsync, transformFromAstAsync} from '@babel/core';
+import {transformAsync} from '@babel/core';
 import generate from '@babel/generator';
 import type {PluginOptions as BabelPluginOptions} from '@compiled/babel-plugin';
 import type {
   PluginOptions as BabelStripRuntimePluginOptions,
   BabelFileMetadata,
 } from '@compiled/babel-plugin-strip-runtime';
-import {
-  DEFAULT_IMPORT_SOURCES,
-  DEFAULT_PARSER_BABEL_PLUGINS,
-  toBoolean,
-} from '@compiled/utils';
+import {DEFAULT_IMPORT_SOURCES, toBoolean} from '@compiled/utils';
 import {Transformer} from '@atlaspack/plugin';
 import SourceMap from '@atlaspack/source-map';
 import {relativeUrl} from '@atlaspack/utils';
 
 import type {CompiledTransformerOpts} from './types';
 import {createDefaultResolver} from './utils';
+import {BuildMode} from '@atlaspack/types';
+import CompiledBabelPlugin from '@compiled/babel-plugin';
+import CompiledBabelPluginStripRuntime from '@compiled/babel-plugin-strip-runtime';
+// @ts-expect-error no declaration file
+// eslint-disable-next-line import/no-extraneous-dependencies
+import BabelPluginSyntaxJsx from '@babel/plugin-syntax-jsx';
+// @ts-expect-error no declaration file
+// eslint-disable-next-line import/no-extraneous-dependencies
+import BabelPluginSyntaxTypescript from '@babel/plugin-syntax-typescript';
 
 const configFiles = [
   '.compiledcssrc',
@@ -34,11 +40,17 @@ const configFiles = [
 
 const packageKey = '@atlaspack/transformer-compiled';
 
+interface Config {
+  compiledConfig: CompiledTransformerOpts;
+  mode: BuildMode;
+  projectRoot: string;
+}
+
 /**
  * Atlaspack Compiled transformer.
  */
-export default new Transformer<CompiledTransformerOpts>({
-  async loadConfig({config, options}) {
+export default new Transformer<Config>({
+  async setup({config, options}) {
     const conf = await config.getConfigFrom<CompiledTransformerOpts>(
       join(options.projectRoot, 'index'),
       configFiles,
@@ -84,84 +96,84 @@ export default new Transformer<CompiledTransformerOpts>({
       Object.assign(contents, conf.contents);
     }
 
-    return contents;
-  },
+    let importSourceMatches = [
+      ...DEFAULT_IMPORT_SOURCES,
+      ...(contents.importSources || []),
+    ];
 
-  canReuseAST() {
-    // Compiled should run before any other JS transformer.
-    return false;
+    return {
+      config: {
+        compiledConfig: contents,
+        mode: options.mode,
+        projectRoot: options.projectRoot,
+      },
+      conditions: {
+        codeMatch: importSourceMatches,
+      },
+      env: [
+        // TODO revisit this list, since we may have added variables in here that were actually enumarated rather than accessed directly
+        'BABEL_ENV',
+        'BABEL_SHOW_CONFIG_FOR',
+        'BROWSERSLIST',
+        'BROWSERSLIST_CONFIG',
+        'BROWSERSLIST_DISABLE_CACHE',
+        'BROWSERSLIST_ENV',
+        'BROWSERSLIST_IGNORE_OLD_DATA',
+        'BABEL_TYPES_8_BREAKING',
+        'BROWSERSLIST_ROOT_PATH',
+        'BROWSERSLIST_STATS',
+        'AUTOPREFIXER',
+        'AUTOPREFIXER_GRID',
+        'TEST_PKG_VERSION',
+        'FORCE_COLOR',
+        'DEBUG',
+        'NODE_DEBUG',
+        'CI',
+        'COLORTERM',
+      ],
+    };
   },
 
-  async parse({asset, config, options}) {
+  async transform({asset, config}) {
+    if (
+      config.compiledConfig.extract &&
+      config.compiledConfig.classHashPrefix
+    ) {
+      throw new Error(
+        '`@atlaspack/transformer-compiled` is mixing `extract: true` and `classHashPrefix` options, which will not supported and will result in bundle size bloat.',
+      );
+    }
+
     // Disable stylesheet extraction locally due to https://github.com/atlassian-labs/compiled/issues/1306
-    const extract = config.extract && options.mode !== 'development';
+    const extract =
+      config.compiledConfig.extract && config.mode !== 'development';
     if (!asset.isSource && !extract) {
       // Only parse source (pre-built code should already have been baked) or if stylesheet extraction is enabled
-      return undefined;
+      return [asset];
     }
 
     const code = await asset.getCode();
     if (
       // If neither Compiled (default) nor any of the additional import sources are found in the code, we bail out.
-      [...DEFAULT_IMPORT_SOURCES, ...(config.importSources || [])].every(
-        (importSource) => !code.includes(importSource),
-      )
+      [
+        ...DEFAULT_IMPORT_SOURCES,
+        ...(config.compiledConfig.importSources || []),
+      ].every((importSource) => !code.includes(importSource))
     ) {
       // We only want to parse files that are actually using Compiled.
       // For everything else we bail out.
-      return undefined;
+      return [asset];
     }
     if (code.includes('/* COMPILED_TRANSFORMED_ASSET */')) {
       // If we're dealing with a pre-transformed asset, we bail out to avoid performing the expensive parse operation.
       // We add this marker to the code to indicate that the asset has already been transformed.
-      return undefined;
-    }
-
-    const program = await parseAsync(code, {
-      filename: asset.filePath,
-      babelrc: false,
-      configFile: false,
-      caller: {name: 'compiled'},
-      rootMode: 'upward-optional',
-      parserOpts: {
-        // @ts-expect-error - Type mismatch between @babel/parser and @compiled/utils versions
-        plugins: config.parserBabelPlugins ?? DEFAULT_PARSER_BABEL_PLUGINS,
-      },
-      plugins: config.transformerBabelPlugins ?? undefined,
-    });
-
-    if (program) {
-      return {
-        type: 'babel',
-        version: '7.0.0',
-        program,
-      };
-    }
-
-    return undefined;
-  },
-
-  async transform({asset, config, options}) {
-    if (config.extract && config.classHashPrefix) {
-      throw new Error(
-        '`@atlaspack/transformer-compiled` is mixing `extract: true` and `classHashPrefix` options, which will not supported and will result in bundle size bloat.',
-      );
-    }
-
-    const ast = await asset.getAST();
-
-    if (!(ast?.type === 'babel' && ast.program)) {
-      // 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];
     }
 
     // Disable stylesheet extraction locally due to https://github.com/atlassian-labs/compiled/issues/1306
-    const extract = config.extract && options.mode !== 'development';
     const includedFiles: string[] = [];
-    const code = asset.isASTDirty() ? undefined : await asset.getCode();
 
-    const result = await transformFromAstAsync(ast.program, code, {
+    const result = await transformAsync(code, {
       code: false,
       ast: true,
       filename: asset.filePath,
@@ -169,30 +181,29 @@ export default new Transformer<CompiledTransformerOpts>({
       configFile: false,
       sourceMaps: !!asset.env.sourceMap,
       compact: false,
-      parserOpts: {
-        // @ts-expect-error - Type mismatch between @babel/parser and @compiled/utils versions
-        plugins: config.parserBabelPlugins ?? DEFAULT_PARSER_BABEL_PLUGINS,
-      },
       plugins: [
-        ...(config.transformerBabelPlugins ?? []),
+        BabelPluginSyntaxJsx,
+        [BabelPluginSyntaxTypescript, {isTSX: true}],
         asset.isSource && [
-          '@compiled/babel-plugin',
+          CompiledBabelPlugin,
           {
             ...config,
             classNameCompressionMap:
-              config.extract && config.classNameCompressionMap,
+              config.compiledConfig.extract &&
+              config.compiledConfig.classNameCompressionMap,
             onIncludedFiles: (files: string[]) => includedFiles.push(...files),
-            resolver: config.resolver
-              ? config.resolver
-              : createDefaultResolver(config),
+            resolver: config.compiledConfig.resolver
+              ? config.compiledConfig.resolver
+              : createDefaultResolver(config.compiledConfig),
             cache: false,
           } as BabelPluginOptions,
         ],
         extract && [
-          '@compiled/babel-plugin-strip-runtime',
+          CompiledBabelPluginStripRuntime,
           {
             compiledRequireExclude: true,
-            extractStylesToDirectory: config.extractStylesToDirectory,
+            extractStylesToDirectory:
+              config.compiledConfig.extractStylesToDirectory,
           } as BabelStripRuntimePluginOptions,
         ],
       ].filter(toBoolean),
@@ -217,25 +228,15 @@ export default new Transformer<CompiledTransformerOpts>({
       ];
     }
 
-    if (result?.ast) {
-      asset.setAST({
-        type: 'babel',
-        version: '7.0.0',
-        program: result.ast,
-      });
-    }
-
-    return [asset];
-  },
-
-  async generate({asset, ast, options}) {
     const originalSourceMap = await asset.getMap();
     const sourceFileName: string = relativeUrl(
-      options.projectRoot,
+      config.projectRoot,
       asset.filePath,
     );
 
-    const {code, rawMappings} = generate(ast.program, {
+    assert(result?.ast, 'Babel transform returned no AST');
+
+    const {code: generatedCode, rawMappings} = generate(result.ast.program, {
       sourceFileName,
       sourceMaps: !!asset.env.sourceMap,
       comments: true,
@@ -249,7 +250,9 @@ export default new Transformer<CompiledTransformerOpts>({
       }>;
     };
 
-    const map = new SourceMap(options.projectRoot);
+    asset.setCode(generatedCode);
+
+    const map = new SourceMap(config.projectRoot);
     if (rawMappings) {
       map.addIndexedMappings(rawMappings);
     }
@@ -266,9 +269,6 @@ export default new Transformer<CompiledTransformerOpts>({
       }
     }
 
-    return {
-      content: code,
-      map,
-    };
+    return [asset];
   },
 });