@atlaspack/transformer-css 2.14.5-canary.27 → 2.14.5-canary.270

package/lib/CSSTransformer.js

@@ -60,6 +60,13 @@ function _diagnostic() {
   };
   return data;
 }
+function _featureFlags() {
+  const data = require("@atlaspack/feature-flags");
+  _featureFlags = function () {
+    return data;
+  };
+  return data;
+}
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -78,15 +85,27 @@ var _default = exports.default = new (_plugin().Transformer)({
       packageKey: '@atlaspack/transformer-css'
     });
     let contents = conf === null || conf === void 0 ? void 0 : conf.contents;
+    // @ts-expect-error TS2339
     if (typeof (contents === null || contents === void 0 || (_contents$cssModules = contents.cssModules) === null || _contents$cssModules === void 0 ? void 0 : _contents$cssModules.include) === 'string') {
+      // @ts-expect-error TS2339
       contents.cssModules.include = [(0, _utils().globToRegex)(contents.cssModules.include)];
+      // @ts-expect-error TS2339
     } else if (Array.isArray(contents === null || contents === void 0 || (_contents$cssModules2 = contents.cssModules) === null || _contents$cssModules2 === void 0 ? void 0 : _contents$cssModules2.include)) {
-      contents.cssModules.include = contents.cssModules.include.map(include => typeof include === 'string' ? (0, _utils().globToRegex)(include) : include);
+      // @ts-expect-error TS2339
+      contents.cssModules.include = contents.cssModules.include.map(
+      // @ts-expect-error TS7006
+      include => typeof include === 'string' ? (0, _utils().globToRegex)(include) : include);
     }
+    // @ts-expect-error TS2339
     if (typeof (contents === null || contents === void 0 || (_contents$cssModules3 = contents.cssModules) === null || _contents$cssModules3 === void 0 ? void 0 : _contents$cssModules3.exclude) === 'string') {
+      // @ts-expect-error TS2339
       contents.cssModules.exclude = [(0, _utils().globToRegex)(contents.cssModules.exclude)];
+      // @ts-expect-error TS2339
     } else if (Array.isArray(contents === null || contents === void 0 || (_contents$cssModules4 = contents.cssModules) === null || _contents$cssModules4 === void 0 ? void 0 : _contents$cssModules4.exclude)) {
-      contents.cssModules.exclude = contents.cssModules.exclude.map(exclude => typeof exclude === 'string' ? (0, _utils().globToRegex)(exclude) : exclude);
+      // @ts-expect-error TS2339
+      contents.cssModules.exclude = contents.cssModules.exclude.map(
+      // @ts-expect-error TS7006
+      exclude => typeof exclude === 'string' ? (0, _utils().globToRegex)(exclude) : exclude);
     }
     return contents;
   },
@@ -96,6 +115,10 @@ var _default = exports.default = new (_plugin().Transformer)({
     options,
     logger
   }) {
+    if ((0, _featureFlags().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;
@@ -106,10 +129,11 @@ var _default = exports.default = new (_plugin().Transformer)({
       },
       shouldOptimize: asset.env.shouldOptimize,
       shouldScopeHoist: asset.env.shouldScopeHoist,
-      sourceMap: asset.env.sourceMap
+      sourceMap: asset.env.sourceMap,
+      unstableSingleFileOutput: (0, _featureFlags().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()]);
     let targets = getTargets(asset.env.engines.browsers);
     let res;
@@ -118,12 +142,14 @@ var _default = exports.default = new (_plugin().Transformer)({
         res = transformStyleAttribute({
           code,
           analyzeDependencies: true,
+          // @ts-expect-error TS2339
           errorRecovery: (config === null || config === void 0 ? void 0 : config.errorRecovery) || false,
           targets
         });
       } else {
         let cssModules = false;
         if (asset.meta.type !== 'tag' && asset.meta.cssModulesCompiled == null) {
+          // @ts-expect-error TS2339
           let cssModulesConfig = config === null || config === void 0 ? void 0 : config.cssModules;
           let isCSSModule = /\.module\./.test(asset.filePath);
           if (asset.isSource) {
@@ -132,6 +158,7 @@ var _default = exports.default = new (_plugin().Transformer)({
             if (typeof cssModulesConfig === 'boolean') {
               isCSSModule = true;
             } else if (cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.include) {
+              // @ts-expect-error TS7006
               isCSSModule = cssModulesConfig.include.some(include => include.test(projectRootPath));
             } else if (cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.global) {
               isCSSModule = true;
@@ -155,8 +182,11 @@ var _default = exports.default = new (_plugin().Transformer)({
             preserveImports: true
           } : false,
           sourceMap: !!asset.env.sourceMap,
+          // @ts-expect-error TS2339
           drafts: config === null || config === void 0 ? void 0 : config.drafts,
+          // @ts-expect-error TS2339
           pseudoClasses: config === null || config === void 0 ? void 0 : config.pseudoClasses,
+          // @ts-expect-error TS2339
           errorRecovery: (config === null || config === void 0 ? void 0 : config.errorRecovery) || false,
           targets
         });
@@ -196,7 +226,10 @@ var _default = exports.default = new (_plugin().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().default)(options.projectRoot);
       map.addVLQMap(vlqMap);
@@ -209,8 +242,10 @@ var _default = exports.default = new (_plugin().Transformer)({
       for (let dep of res.dependencies) {
         let loc = convertLoc(dep.loc);
         if (originalMap) {
-          loc = (0, _utils().remapSourceLocation)(loc, originalMap);
+          loc = (0, _utils().remapSourceLocation)(loc, originalMap, options.projectRoot);
         }
+
+        // @ts-expect-error TS2339
         if (dep.type === 'import' && !res.exports) {
           asset.addDependency({
             specifier: dep.url,
@@ -236,7 +271,10 @@ var _default = exports.default = new (_plugin().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');
@@ -246,6 +284,7 @@ var _default = exports.default = new (_plugin().Transformer)({
       let depjs = '';
       let js = '';
       let cssImports = '';
+      let jsDeps = [];
       for (let key in exports) {
         locals.set(exports[key].name, key);
       }
@@ -327,7 +366,10 @@ var _default = exports.default = new (_plugin().Transformer)({
           }
         }
       }
+
+      // @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,8 +389,9 @@ var _default = exports.default = new (_plugin().Transformer)({
       }
       assets.push({
         type: 'js',
+        // @ts-expect-error TS2353
         content: depjs + js,
-        dependencies: [],
+        dependencies: jsDeps,
         env
       });
 
@@ -386,4 +429,14 @@ function convertLoc(loc) {
       column: loc.end.column + 1
     }
   };
+}
+async function handleCompiledCssAsset(asset) {
+  const code = await asset.getCode();
+  const rules = 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/lib/types/CSSTransformer.d.ts

@@ -0,0 +1,3 @@
+import { Transformer } from '@atlaspack/plugin';
+declare const _default: Transformer<unknown>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaspack/transformer-css",
-  "version": "2.14.5-canary.27+6fce152f5",
+  "version": "2.14.5-canary.270+ec3abe4df",
   "license": "(MIT OR Apache-2.0)",
   "publishConfig": {
     "access": "public"
@@ -9,15 +9,18 @@
     "type": "git",
     "url": "https://github.com/atlassian-labs/atlaspack.git"
   },
-  "main": "lib/CSSTransformer.js",
-  "source": "src/CSSTransformer.js",
+  "main": "./lib/CSSTransformer.js",
+  "source": "./src/CSSTransformer.ts",
+  "types": "./lib/types/CSSTransformer.d.ts",
   "engines": {
     "node": ">= 16.0.0"
   },
   "dependencies": {
-    "@atlaspack/diagnostic": "2.14.1-canary.95+6fce152f5",
-    "@atlaspack/plugin": "2.14.5-canary.27+6fce152f5",
-    "@atlaspack/utils": "2.14.5-canary.27+6fce152f5",
+    "@atlaspack/diagnostic": "2.14.1-canary.338+ec3abe4df",
+    "@atlaspack/feature-flags": "2.14.1-canary.338+ec3abe4df",
+    "@atlaspack/plugin": "2.14.5-canary.270+ec3abe4df",
+    "@atlaspack/types": "2.14.5-canary.270+ec3abe4df",
+    "@atlaspack/utils": "2.14.5-canary.270+ec3abe4df",
     "@parcel/source-map": "^2.1.1",
     "browserslist": "^4.6.6",
     "lightningcss": "^1.28.2",
@@ -30,5 +33,8 @@
     "lightningcss": "lightningcss-wasm"
   },
   "type": "commonjs",
-  "gitHead": "6fce152f53ea2b495291733792f5c0546bc1b062"
-}
+  "scripts": {
+    "build:lib": "gulp build --gulpfile ../../../gulpfile.js --cwd ."
+  },
+  "gitHead": "ec3abe4dffc98560a850fd2f71fb566577e6c99c"
+}

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

@@ -1,6 +1,4 @@
-// @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';
@@ -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,24 @@
+{
+  "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"
+    }
+  ]
+}