From 03b0e385863c99d63fa734a24ff90c9075676040 Mon Sep 17 00:00:00 2001 From: Michael James Date: Wed, 3 Mar 2021 03:10:15 -0800 Subject: [PATCH] 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 --- src/transform.ts | 88 +++++++++++++++++++++++++++--------------------- 1 file changed, 49 insertions(+), 39 deletions(-) diff --git a/src/transform.ts b/src/transform.ts index 84f11e72e..5b6b55c63 100644 --- 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); +}