@atlaspack/transformer-css 2.14.5-canary.34 → 2.14.5-canary.340

package/src/{CSSTransformer.js → CSSTransformer.ts}

@@ -1,9 +1,7 @@
-// @flow strict-local
-
-import type {SourceLocation} from '@atlaspack/types';
+import type {MutableAsset, SourceLocation} from '@atlaspack/types';
 
 import path from 'path';
-import SourceMap from '@parcel/source-map';
+import SourceMap from '@atlaspack/source-map';
 import {Transformer} from '@atlaspack/plugin';
 import {
   remapSourceLocation,
@@ -11,37 +9,57 @@ import {
   globToRegex,
   normalizeSeparators,
 } from '@atlaspack/utils';
-import {type SourceLocation as LightningSourceLocation} from 'lightningcss';
+import {SourceLocation as LightningSourceLocation} from 'lightningcss';
 import * as native from 'lightningcss';
 import browserslist from 'browserslist';
 import nullthrows from 'nullthrows';
 import ThrowableDiagnostic, {errorToDiagnostic} from '@atlaspack/diagnostic';
+import {getFeatureFlag} from '@atlaspack/feature-flags';
 
 const {transform, transformStyleAttribute, browserslistToTargets} = native;
 
-export default (new Transformer({
+export default new Transformer({
   async loadConfig({config, options}) {
     let conf = await config.getConfigFrom(options.projectRoot + '/index', [], {
       packageKey: '@atlaspack/transformer-css',
     });
     let contents = conf?.contents;
+    // @ts-expect-error TS2339
     if (typeof contents?.cssModules?.include === 'string') {
+      // @ts-expect-error TS2339
       contents.cssModules.include = [globToRegex(contents.cssModules.include)];
+      // @ts-expect-error TS2339
     } else if (Array.isArray(contents?.cssModules?.include)) {
-      contents.cssModules.include = contents.cssModules.include.map((include) =>
-        typeof include === 'string' ? globToRegex(include) : include,
+      // @ts-expect-error TS2339
+      contents.cssModules.include = contents.cssModules.include.map(
+        // @ts-expect-error TS7006
+        (include) =>
+          typeof include === 'string' ? globToRegex(include) : include,
       );
     }
+    // @ts-expect-error TS2339
     if (typeof contents?.cssModules?.exclude === 'string') {
+      // @ts-expect-error TS2339
       contents.cssModules.exclude = [globToRegex(contents.cssModules.exclude)];
+      // @ts-expect-error TS2339
     } else if (Array.isArray(contents?.cssModules?.exclude)) {
-      contents.cssModules.exclude = contents.cssModules.exclude.map((exclude) =>
-        typeof exclude === 'string' ? globToRegex(exclude) : exclude,
+      // @ts-expect-error TS2339
+      contents.cssModules.exclude = contents.cssModules.exclude.map(
+        // @ts-expect-error TS7006
+        (exclude) =>
+          typeof exclude === 'string' ? globToRegex(exclude) : exclude,
       );
     }
     return contents;
   },
   async transform({asset, config, options, logger}) {
+    if (
+      getFeatureFlag('compiledCssInJsTransformer') &&
+      asset.filePath.endsWith('.compiled.css')
+    ) {
+      return handleCompiledCssAsset(asset);
+    }
+
     // Normalize the asset's environment so that properties that only affect JS don't cause CSS to be duplicated.
     // For example, with ESModule and CommonJS targets, only a single shared CSS bundle should be produced.
     let env = asset.env;
@@ -53,12 +71,17 @@ export default (new Transformer({
       shouldOptimize: asset.env.shouldOptimize,
       shouldScopeHoist: asset.env.shouldScopeHoist,
       sourceMap: asset.env.sourceMap,
+      unstableSingleFileOutput: getFeatureFlag(
+        'preserveUnstableSingleFileOutputInCss',
+      )
+        ? asset.env.unstableSingleFileOutput
+        : undefined,
     });
 
     let [code, originalMap] = await Promise.all([
       asset.getBuffer(),
       asset.getMap(),
-      // $FlowFixMe native.default is the init function only when bundled for the browser build
+      // @ts-expect-error TS2339
       process.browser && native.default(),
     ]);
 
@@ -69,6 +92,7 @@ export default (new Transformer({
         res = transformStyleAttribute({
           code,
           analyzeDependencies: true,
+          // @ts-expect-error TS2339
           errorRecovery: config?.errorRecovery || false,
           targets,
         });
@@ -78,6 +102,7 @@ export default (new Transformer({
           asset.meta.type !== 'tag' &&
           asset.meta.cssModulesCompiled == null
         ) {
+          // @ts-expect-error TS2339
           let cssModulesConfig = config?.cssModules;
           let isCSSModule = /\.module\./.test(asset.filePath);
           if (asset.isSource) {
@@ -88,6 +113,7 @@ export default (new Transformer({
             if (typeof cssModulesConfig === 'boolean') {
               isCSSModule = true;
             } else if (cssModulesConfig?.include) {
+              // @ts-expect-error TS7006
               isCSSModule = cssModulesConfig.include.some((include) =>
                 include.test(projectRootPath),
               );
@@ -96,7 +122,7 @@ export default (new Transformer({
             }
 
             if (
-              cssModulesConfig?.exclude?.some((exclude) =>
+              cssModulesConfig?.exclude?.some((exclude: any) =>
                 exclude.test(projectRootPath),
               )
             ) {
@@ -126,13 +152,16 @@ export default (new Transformer({
                 }
               : false,
           sourceMap: !!asset.env.sourceMap,
+          // @ts-expect-error TS2339
           drafts: config?.drafts,
+          // @ts-expect-error TS2339
           pseudoClasses: config?.pseudoClasses,
+          // @ts-expect-error TS2339
           errorRecovery: config?.errorRecovery || false,
           targets,
         });
       }
-    } catch (err) {
+    } catch (err: any) {
       err.filePath = asset.filePath;
       let diagnostic = errorToDiagnostic(err, {
         origin: '@atlaspack/transformer-css',
@@ -180,7 +209,9 @@ export default (new Transformer({
       }
     }
 
+    // @ts-expect-error TS2339
     if (res.map != null) {
+      // @ts-expect-error TS2339
       let vlqMap = JSON.parse(Buffer.from(res.map).toString());
       let map = new SourceMap(options.projectRoot);
       map.addVLQMap(vlqMap);
@@ -196,9 +227,10 @@ export default (new Transformer({
       for (let dep of res.dependencies) {
         let loc = convertLoc(dep.loc);
         if (originalMap) {
-          loc = remapSourceLocation(loc, originalMap);
+          loc = remapSourceLocation(loc, originalMap, options.projectRoot);
         }
 
+        // @ts-expect-error TS2339
         if (dep.type === 'import' && !res.exports) {
           asset.addDependency({
             specifier: dep.url,
@@ -226,7 +258,9 @@ export default (new Transformer({
     let assets = [asset];
     let buffer = Buffer.from(res.code);
 
+    // @ts-expect-error TS2339
     if (res.exports != null) {
+      // @ts-expect-error TS2339
       let exports = res.exports;
       asset.symbols.ensure();
       asset.symbols.set('default', 'default');
@@ -238,7 +272,7 @@ export default (new Transformer({
       let js = '';
       let cssImports = '';
 
-      let jsDeps = [];
+      let jsDeps: Array<never> = [];
 
       for (let key in exports) {
         locals.set(exports[key].name, key);
@@ -247,7 +281,7 @@ export default (new Transformer({
       asset.uniqueKey ??= asset.id;
 
       let seen = new Set();
-      let add = (key) => {
+      let add = (key: string) => {
         if (seen.has(key)) {
           return;
         }
@@ -299,6 +333,7 @@ export default (new Transformer({
           asset.addDependency({
             specifier: nullthrows(asset.uniqueKey),
             specifierType: 'esm',
+
             symbols: new Map([
               [key, {local: exports[key].name, isWeak: false, loc: null}],
             ]),
@@ -322,12 +357,15 @@ export default (new Transformer({
             let d = `dep_$${c++}`;
             depjs += `import * as ${d} from ${JSON.stringify(dep.url)};\n`;
             js += `for (let key in ${d}) { if (key in module.exports) module.exports[key] += ' ' + ${d}[key]; else module.exports[key] = ${d}[key]; }\n`;
+
             asset.symbols.set('*', '*');
           }
         }
       }
 
+      // @ts-expect-error TS2339
       if (res.references != null) {
+        // @ts-expect-error TS2339
         let references = res.references;
         for (let symbol in references) {
           let reference = references[symbol];
@@ -347,6 +385,7 @@ export default (new Transformer({
 
       assets.push({
         type: 'js',
+        // @ts-expect-error TS2353
         content: depjs + js,
         dependencies: jsDeps,
         env,
@@ -361,11 +400,11 @@ export default (new Transformer({
     asset.setBuffer(buffer);
     return assets;
   },
-}): Transformer);
+}) as Transformer<unknown>;
 
 let cache = new Map();
 
-function getTargets(browsers) {
+function getTargets(browsers: undefined | string | Array<string>) {
   if (browsers == null) {
     return undefined;
   }
@@ -388,3 +427,16 @@ function convertLoc(loc: LightningSourceLocation): SourceLocation {
     end: {line: loc.end.line, column: loc.end.column + 1},
   };
 }
+
+async function handleCompiledCssAsset(asset: MutableAsset) {
+  const code = await asset.getCode();
+
+  const rules: Array<string> = code.split('\n').map((line) => line.trim());
+  // styleRules will be consumed by the optimiser in @compiled/parcel-optimizer
+  asset.meta.styleRules = rules;
+
+  // Empty the code because we only use compiled CSS assets for their metadata
+  asset.setCode('');
+
+  return [asset];
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../../core/diagnostic/tsconfig.json"
+    },
+    {
+      "path": "../../core/feature-flags/tsconfig.json"
+    },
+    {
+      "path": "../../core/plugin/tsconfig.json"
+    },
+    {
+      "path": "../../core/types/tsconfig.json"
+    },
+    {
+      "path": "../../core/utils/tsconfig.json"
+    },
+    {
+      "path": "../../core/source-map/tsconfig.json"
+    }
+  ]
+}