feat(babel): expose CSS extraction from AST logic

- Moved logic for extracting CSS from the AST into a `extractCssFromAst()` function and exported it from the `@linaria/babel-preset` package
callstack · Feb 23, 2021 · 853dbd5 · 853dbd5
1 parent 81e6343
commit 853dbd5
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 40 deletions.
diff --git a/packages/babel/src/index.ts b/packages/babel/src/index.ts
@@ -15,7 +15,11 @@ export { default as JSXElement } from './evaluators/visitors/JSXElement';
 export { default as ProcessCSS } from './evaluators/visitors/ProcessCSS';
 export { default as ProcessStyled } from './evaluators/visitors/ProcessStyled';
 export { default as Module } from './module';
-export { default as transform } from './transform';
+export {
+  default as transform,
+  extractCssFromAst,
+  shouldTransformCode,
+} from './transform';
 export * from './types';
 export type { PluginOptions } from './utils/loadOptions';
 export { default as isNode } from './utils/isNode';

diff --git a/packages/babel/src/transform.ts b/packages/babel/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);
+}