@parcel/transformer-less 2.0.0-beta.1 → 2.0.0-nightly.1002

package/lib/LessTransformer.js

@@ -5,11 +5,45 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _path = _interopRequireDefault(require("path"));
+function _path() {
+  const data = _interopRequireDefault(require("path"));
 
-var _plugin = require("@parcel/plugin");
+  _path = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _plugin() {
+  const data = require("@parcel/plugin");
+
+  _plugin = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _sourceMap() {
+  const data = _interopRequireDefault(require("@parcel/source-map"));
 
-var _sourceMap = _interopRequireDefault(require("@parcel/source-map"));
+  _sourceMap = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _less() {
+  const data = _interopRequireDefault(require("less"));
+
+  _less = function () {
+    return data;
+  };
+
+  return data;
+}
 
 var _loadConfig = require("./loadConfig");
 
@@ -18,7 +52,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // E.g: ~library/file.less
 const WEBPACK_ALIAS_RE = /^~[^/]/;
 
-var _default = new _plugin.Transformer({
+var _default = new (_plugin().Transformer)({
   loadConfig({
     config
   }) {
@@ -27,12 +61,6 @@ var _default = new _plugin.Transformer({
     });
   },
 
-  preSerializeConfig({
-    config
-  }) {
-    return (0, _loadConfig.preSerialize)(config);
-  },
-
   async transform({
     asset,
     options,
@@ -41,9 +69,6 @@ var _default = new _plugin.Transformer({
   }) {
     asset.type = 'css';
     asset.meta.hasDependencies = false;
-    let less = await options.packageManager.require('less', asset.filePath, {
-      autoinstall: options.autoinstall
-    });
     let code = await asset.getCode();
     let result;
 
@@ -51,7 +76,7 @@ var _default = new _plugin.Transformer({
       let lessConfig = config ? { ...config.config
       } : {};
 
-      if (options.sourceMaps) {
+      if (asset.env.sourceMap) {
         lessConfig.sourceMap = {};
       }
 
@@ -62,7 +87,7 @@ var _default = new _plugin.Transformer({
         asset,
         resolve
       })];
-      result = await less.render(code, lessConfig);
+      result = await _less().default.render(code, lessConfig);
     } catch (err) {
       // For the error reporter
       err.fileName = err.filename;
@@ -74,10 +99,10 @@ var _default = new _plugin.Transformer({
     }
 
     if (result.map != null) {
-      let map = new _sourceMap.default();
+      let map = new (_sourceMap().default)(options.projectRoot);
       let rawMap = JSON.parse(result.map);
-      map.addRawMappings({ ...rawMap,
-        sources: rawMap.sources.map(s => _path.default.relative(options.projectRoot, s))
+      map.addVLQMap({ ...rawMap,
+        sources: rawMap.sources.map(s => _path().default.relative(options.projectRoot, s))
       });
       asset.setMap(map);
     }
@@ -95,17 +120,22 @@ function urlPlugin({
 }) {
   return {
     install(less, pluginManager) {
+      // This is a hack; no such interface exists, even conceptually, in Less.
       const visitor = new less.visitors.Visitor({
         visitUrl(node) {
-          if (!node.value.value.startsWith('#') // IE's `behavior: url(#default#VML)`)
+          const valueNode = node.value;
+          const stringValue = valueNode.value;
+
+          if (!stringValue.startsWith('#') // IE's `behavior: url(#default#VML)`)
           ) {
-              node.value.value = asset.addURLDependency(node.value.value, node.currentFileInfo.filename);
-            }
+            valueNode.value = asset.addURLDependency(stringValue, {});
+          }
 
           return node;
         }
 
-      });
+      }); // $FlowFixMe[method-unbinding]
+
       visitor.run = visitor.visit;
       pluginManager.addVisitor(visitor);
     }
@@ -128,24 +158,65 @@ function resolvePathPlugin({
           return false;
         }
 
-        async loadFile(rawFilename, ...args) {
+        async loadFile(rawFilename, currentDirectory, options) {
           let filename = rawFilename;
 
           if (WEBPACK_ALIAS_RE.test(filename)) {
             let correctPath = filename.replace(/^~/, '');
             throw new Error(`The @import path "${filename}" is using webpack specific syntax, which isn't supported by Parcel.\n\nTo @import files from node_modules, use "${correctPath}"`);
+          } // Based on https://github.com/less/less.js/blob/master/packages/less/src/less-node/file-manager.js
+
+
+          let isAbsoluteFilename = this.isPathAbsolute(filename);
+          let paths = isAbsoluteFilename ? [''] : [currentDirectory];
+
+          if (options.paths) {
+            paths.push(...options.paths);
           }
 
-          try {
-            return await super.loadFile(filename, ...args);
-          } catch (err) {
-            if (err.type !== 'File') {
-              throw err;
+          let prefixes = options.prefixes || [''];
+          let fileParts = this.extractUrlParts(filename);
+          let filePath;
+          let contents;
+
+          if (filename[0] !== '~') {
+            outer: for (let p of paths) {
+              for (let prefix of prefixes) {
+                filePath = fileParts.rawPath + prefix + fileParts.filename;
+
+                if (p) {
+                  filePath = _path().default.join(p, filePath);
+                }
+
+                if (options.ext) {
+                  filePath = this.tryAppendExtension(filePath, options.ext);
+                }
+
+                try {
+                  contents = await asset.fs.readFile(filePath, 'utf8');
+                  break outer;
+                } catch (err) {
+                  asset.invalidateOnFileCreate({
+                    filePath
+                  });
+                }
+              }
             }
+          }
+
+          if (!contents) {
+            filePath = await resolve(asset.filePath, filename);
+            contents = await asset.fs.readFile(filePath, 'utf8');
+          }
 
-            filename = await resolve(asset.filePath, filename);
-            return super.loadFile(filename, ...args);
+          if (filePath) {
+            asset.invalidateOnFileChange(filePath);
           }
+
+          return {
+            contents,
+            filename: filePath
+          };
         }
 
       }

package/lib/loadConfig.js

@@ -4,9 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.load = load;
-exports.preSerialize = preSerialize;
 
-var _path = _interopRequireDefault(require("path"));
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+
+  _path = function () {
+    return data;
+  };
+
+  return data;
+}
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,30 +26,25 @@ async function load({
   let configContents = {};
 
   if (configFile != null) {
-    configContents = configFile.contents;
+    configContents = configFile.contents; // Resolve relative paths from config file
+
+    if (configContents.paths) {
+      configContents.paths = configContents.paths.map(p => _path().default.resolve(_path().default.dirname(configFile.filePath), p));
+    }
   } // Rewrites urls to be relative to the provided filename
 
 
   configContents.rewriteUrls = 'all';
   configContents.plugins = configContents.plugins || []; // This should enforce the config to be reloaded on every run as it's JS
 
-  let isDynamic = configFile && _path.default.extname(configFile.filePath) === '.js';
+  let isDynamic = configFile && _path().default.extname(configFile.filePath) === '.js';
 
   if (isDynamic) {
-    config.shouldInvalidateOnStartup();
-    config.shouldReload();
+    config.invalidateOnStartup();
   }
 
-  return config.setResult({
+  return {
     isStatic: !isDynamic,
     config: configContents
-  });
-}
-
-function preSerialize(config) {
-  if (!config.result) return; // Ensure we dont pass functions to the serialiser
-
-  if (!config.result.isStatic) {
-    config.result.config = {};
-  }
+  };
 }

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@parcel/transformer-less",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-nightly.1002+5530a6ef",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/parcel-bundler/parcel.git"
@@ -12,15 +16,13 @@
   "main": "lib/LessTransformer.js",
   "source": "src/LessTransformer.js",
   "engines": {
-    "node": ">= 10.0.0",
-    "parcel": "^2.0.0-alpha.1.1"
+    "node": ">= 12.0.0",
+    "parcel": "2.0.0-nightly.1000+5530a6ef"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-beta.1",
-    "@parcel/source-map": "2.0.0-alpha.4.13"
-  },
-  "devDependencies": {
-    "less": "^3.9.0"
+    "@parcel/plugin": "2.0.0-nightly.1002+5530a6ef",
+    "@parcel/source-map": "^2.0.0",
+    "less": "^4.1.1"
   },
-  "gitHead": "74335525be92e23bac4ed1bf30595443cfb238e3"
+  "gitHead": "5530a6eff8b619873353baeb0457ae4ec591e9fa"
 }

package/src/LessTransformer.js

@@ -1,9 +1,11 @@
 // @flow
+import {typeof default as Less} from 'less';
 import path from 'path';
 import {Transformer} from '@parcel/plugin';
 import SourceMap from '@parcel/source-map';
+import less from 'less';
 
-import {load, preSerialize} from './loadConfig';
+import {load} from './loadConfig';
 
 // E.g: ~library/file.less
 const WEBPACK_ALIAS_RE = /^~[^/]/;
@@ -15,29 +17,21 @@ type LessConfig = {
   ...
 };
 
-export default new Transformer({
+export default (new Transformer({
   loadConfig({config}) {
     return load({config});
   },
 
-  preSerializeConfig({config}) {
-    return preSerialize(config);
-  },
-
   async transform({asset, options, config, resolve}) {
     asset.type = 'css';
     asset.meta.hasDependencies = false;
 
-    let less = await options.packageManager.require('less', asset.filePath, {
-      autoinstall: options.autoinstall,
-    });
-
     let code = await asset.getCode();
     let result;
     try {
       let lessConfig: LessConfig = config ? {...config.config} : {};
 
-      if (options.sourceMaps) {
+      if (asset.env.sourceMap) {
         lessConfig.sourceMap = {};
       }
 
@@ -60,9 +54,9 @@ export default new Transformer({
     }
 
     if (result.map != null) {
-      let map = new SourceMap();
+      let map = new SourceMap(options.projectRoot);
       let rawMap = JSON.parse(result.map);
-      map.addRawMappings({
+      map.addVLQMap({
         ...rawMap,
         sources: rawMap.sources.map(s => path.relative(options.projectRoot, s)),
       });
@@ -73,25 +67,28 @@ export default new Transformer({
 
     return [asset];
   },
-});
+}): Transformer);
 
 function urlPlugin({asset}) {
   return {
-    install(less, pluginManager) {
+    install(less: Less, pluginManager) {
+      // This is a hack; no such interface exists, even conceptually, in Less.
+      type LessNodeWithValue = less.tree.Node & {value: any, ...};
+
       const visitor = new less.visitors.Visitor({
         visitUrl(node) {
+          const valueNode = ((node.value: any): LessNodeWithValue);
+          const stringValue = (valueNode.value: string);
           if (
-            !node.value.value.startsWith('#') // IE's `behavior: url(#default#VML)`)
+            !stringValue.startsWith('#') // IE's `behavior: url(#default#VML)`)
           ) {
-            node.value.value = asset.addURLDependency(
-              node.value.value,
-              node.currentFileInfo.filename,
-            );
+            valueNode.value = asset.addURLDependency(stringValue, {});
           }
           return node;
         },
       });
 
+      // $FlowFixMe[method-unbinding]
       visitor.run = visitor.visit;
       pluginManager.addVisitor(visitor);
     },
@@ -110,7 +107,7 @@ function resolvePathPlugin({asset, resolve}) {
           return false;
         }
 
-        async loadFile(rawFilename, ...args) {
+        async loadFile(rawFilename, currentDirectory, options) {
           let filename = rawFilename;
 
           if (WEBPACK_ALIAS_RE.test(filename)) {
@@ -120,15 +117,53 @@ function resolvePathPlugin({asset, resolve}) {
             );
           }
 
-          try {
-            return await super.loadFile(filename, ...args);
-          } catch (err) {
-            if (err.type !== 'File') {
-              throw err;
+          // Based on https://github.com/less/less.js/blob/master/packages/less/src/less-node/file-manager.js
+          let isAbsoluteFilename = this.isPathAbsolute(filename);
+          let paths = isAbsoluteFilename ? [''] : [currentDirectory];
+          if (options.paths) {
+            paths.push(...options.paths);
+          }
+
+          let prefixes = options.prefixes || [''];
+          let fileParts = this.extractUrlParts(filename);
+          let filePath;
+          let contents;
+
+          if (filename[0] !== '~') {
+            outer: for (let p of paths) {
+              for (let prefix of prefixes) {
+                filePath = fileParts.rawPath + prefix + fileParts.filename;
+                if (p) {
+                  filePath = path.join(p, filePath);
+                }
+
+                if (options.ext) {
+                  filePath = this.tryAppendExtension(filePath, options.ext);
+                }
+
+                try {
+                  contents = await asset.fs.readFile(filePath, 'utf8');
+                  break outer;
+                } catch (err) {
+                  asset.invalidateOnFileCreate({filePath});
+                }
+              }
             }
-            filename = await resolve(asset.filePath, filename);
-            return super.loadFile(filename, ...args);
           }
+
+          if (!contents) {
+            filePath = await resolve(asset.filePath, filename);
+            contents = await asset.fs.readFile(filePath, 'utf8');
+          }
+
+          if (filePath) {
+            asset.invalidateOnFileChange(filePath);
+          }
+
+          return {
+            contents,
+            filename: filePath,
+          };
         }
       }
 

package/src/loadConfig.js

@@ -2,7 +2,16 @@
 import type {Config} from '@parcel/types';
 import path from 'path';
 
-export async function load({config}: {|config: Config|}) {
+type ConfigResult = {|
+  isStatic: boolean,
+  config: any,
+|};
+
+export async function load({
+  config,
+}: {|
+  config: Config,
+|}): Promise<ConfigResult> {
   let configFile = await config.getConfig(['.lessrc', '.lessrc.js'], {
     packageKey: 'less',
   });
@@ -10,6 +19,13 @@ export async function load({config}: {|config: Config|}) {
   let configContents = {};
   if (configFile != null) {
     configContents = configFile.contents;
+
+    // Resolve relative paths from config file
+    if (configContents.paths) {
+      configContents.paths = configContents.paths.map(p =>
+        path.resolve(path.dirname(configFile.filePath), p),
+      );
+    }
   }
 
   // Rewrites urls to be relative to the provided filename
@@ -19,18 +35,8 @@ export async function load({config}: {|config: Config|}) {
   // This should enforce the config to be reloaded on every run as it's JS
   let isDynamic = configFile && path.extname(configFile.filePath) === '.js';
   if (isDynamic) {
-    config.shouldInvalidateOnStartup();
-    config.shouldReload();
+    config.invalidateOnStartup();
   }
 
-  return config.setResult({isStatic: !isDynamic, config: configContents});
-}
-
-export function preSerialize(config: Config) {
-  if (!config.result) return;
-
-  // Ensure we dont pass functions to the serialiser
-  if (!config.result.isStatic) {
-    config.result.config = {};
-  }
+  return {isStatic: !isDynamic, config: configContents};
 }