feat(babel): expose CSS extraction from AST logic (#738)

- Moved logic for extracting CSS from the AST into a `extractCssFromAst()` function and exported it from `transform.ts` - Moved logic for determining whether to run AST analysis and CSS extraction into a `shouldTransformCode()` function and exported it
callstack · Mar 3, 2021 · 03b0e38 · 03b0e38
1 parent 134ed0b
commit 03b0e38
Showing 1 changed file with 49 additions and 39 deletions.
diff --git a/src/transform.ts b/src/transform.ts
@@ -40,46 +40,16 @@ export function transformUrl(
   return relative.split(platformPath.sep).join(posixSep);
 }
 
-export default function transform(code: string, options: Options): Result {
-  // Check if the file contains `css` or `styled` words first
-  // Otherwise we should skip transforming
-  if (!/\b(styled|css)/.test(code)) {
-    return {
-      code,
-      sourceMap: options.inputSourceMap,
-    };
-  }
-
-  debug(
-    'transform',
-    `${options.filename} to ${options.outputFilename}\n${code}`
-  );
-
-  const pluginOptions = loadOptions(options.pluginOptions);
-  const babelOptions = pluginOptions?.babelOptions ?? null;
-
-  // Parse the code first so babel uses user's babel config for parsing
-  // We don't want to use user's config when transforming the code
-  const ast = parseSync(code, {
-    ...babelOptions,
-    filename: options.filename,
-    caller: { name: 'linaria' },
-  });
+export function shouldTransformCode(code: string): boolean {
+  return /\b(styled|css)/.test(code);
+}
 
-  const { metadata, code: transformedCode, map } = transformFromAstSync(
-    ast!,
-    code,
-    {
-      ...(babelOptions?.rootMode ? { rootMode: babelOptions.rootMode } : null),
-      filename: options.filename,
-      presets: [[babelPreset, pluginOptions]],
-      babelrc: false,
-      configFile: false,
-      sourceMaps: true,
-      sourceFileName: options.filename,
-      inputSourceMap: options.inputSourceMap,
-    }
-  )!;
+export function extractCssFromAst(
+  babelFileResult: babel.BabelFileResult,
+  code: string,
+  options: Options
+) {
+  const { metadata, code: transformedCode, map } = babelFileResult;
 
   if (
     !metadata ||
@@ -187,3 +157,43 @@ export default function transform(code: string, options: Options): Result {
     },
   };
 }
+
+export default function transform(code: string, options: Options): Result {
+  // Check if the file contains `css` or `styled` words first
+  // Otherwise we should skip transforming
+  if (!shouldTransformCode(code)) {
+    return {
+      code,
+      sourceMap: options.inputSourceMap,
+    };
+  }
+
+  debug(
+    'transform',
+    `${options.filename} to ${options.outputFilename}\n${code}`
+  );
+
+  const pluginOptions = loadOptions(options.pluginOptions);
+  const babelOptions = pluginOptions?.babelOptions ?? null;
+
+  // Parse the code first so babel uses user's babel config for parsing
+  // We don't want to use user's config when transforming the code
+  const ast = parseSync(code, {
+    ...babelOptions,
+    filename: options.filename,
+    caller: { name: 'linaria' },
+  });
+
+  const babelFileResult = transformFromAstSync(ast!, code, {
+    ...(babelOptions?.rootMode ? { rootMode: babelOptions.rootMode } : null),
+    filename: options.filename,
+    presets: [[babelPreset, pluginOptions]],
+    babelrc: false,
+    configFile: false,
+    sourceMaps: true,
+    sourceFileName: options.filename,
+    inputSourceMap: options.inputSourceMap,
+  })!;
+
+  return extractCssFromAst(babelFileResult, code, options);
+}