@parcel/transformer-less 2.0.0-nightly.97 → 2.1.0

package/lib/LessTransformer.js

@@ -5,45 +5,89 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _plugin = require("@parcel/plugin");
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+
+  _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"));
+
+  _sourceMap = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _less() {
+  const data = _interopRequireDefault(require("less"));
+
+  _less = function () {
+    return data;
+  };
+
+  return data;
+}
+
+var _loadConfig = require("./loadConfig");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // E.g: ~library/file.less
 const WEBPACK_ALIAS_RE = /^~[^/]/;
 
-var _default = new _plugin.Transformer({
-  async getConfig({
-    asset,
-    resolve
+var _default = new (_plugin().Transformer)({
+  loadConfig({
+    config
   }) {
-    let config = await asset.getConfig(['.lessrc', '.lessrc.js'], {
-      packageKey: 'less'
+    return (0, _loadConfig.load)({
+      config
     });
-
-    if (config === null) {
-      config = {};
-    }
-
-    config.filename = asset.filePath;
-    config.plugins = [...(config.plugins || []), urlPlugin({
-      asset
-    }), resolvePathPlugin({
-      asset,
-      resolve
-    })];
-    return config;
   },
 
   async transform({
     asset,
     options,
-    config
+    config,
+    resolve
   }) {
-    const less = await options.packageManager.require('less', asset.filePath);
-    const code = await asset.getCode();
-    let css;
+    asset.type = 'css';
+    asset.meta.hasDependencies = false;
+    let code = await asset.getCode();
+    let result;
 
     try {
-      css = (await less.render(code, config)).css;
+      let lessConfig = config ? { ...config.config
+      } : {};
+
+      if (asset.env.sourceMap) {
+        lessConfig.sourceMap = {};
+      }
+
+      lessConfig.filename = asset.filePath;
+      lessConfig.plugins = [...(lessConfig.plugins || []), urlPlugin({
+        asset
+      }), resolvePathPlugin({
+        asset,
+        resolve
+      })];
+      result = await _less().default.render(code, lessConfig);
     } catch (err) {
       // For the error reporter
       err.fileName = err.filename;
@@ -54,9 +98,16 @@ var _default = new _plugin.Transformer({
       throw err;
     }
 
-    asset.type = 'css';
-    asset.setCode(css);
-    asset.meta.hasDependencies = false;
+    if (result.map != null) {
+      let map = new (_sourceMap().default)(options.projectRoot);
+      let rawMap = JSON.parse(result.map);
+      map.addVLQMap({ ...rawMap,
+        sources: rawMap.sources.map(s => _path().default.relative(options.projectRoot, s))
+      });
+      asset.setMap(map);
+    }
+
+    asset.setCode(result.css);
     return [asset];
   }
 
@@ -69,13 +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) {
-          node.value.value = asset.addURLDependency(node.value.value, node.currentFileInfo.filename);
+          const valueNode = node.value;
+          const stringValue = valueNode.value;
+
+          if (!stringValue.startsWith('#') // IE's `behavior: url(#default#VML)`)
+          ) {
+              valueNode.value = asset.addURLDependency(stringValue, {});
+            }
+
           return node;
         }
 
-      });
+      }); // $FlowFixMe[method-unbinding]
+
       visitor.run = visitor.visit;
       pluginManager.addVisitor(visitor);
     }
@@ -98,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
+                  });
+                }
+              }
             }
+          }
 
-            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/lib/loadConfig.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.load = load;
+
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+
+  _path = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+async function load({
+  config
+}) {
+  let configFile = await config.getConfig(['.lessrc', '.lessrc.js'], {
+    packageKey: 'less'
+  });
+  let configContents = {};
+
+  if (configFile != null) {
+    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';
+
+  if (isDynamic) {
+    config.invalidateOnStartup();
+  }
+
+  return {
+    isStatic: !isDynamic,
+    config: configContents
+  };
+}

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@parcel/transformer-less",
-  "version": "2.0.0-nightly.97+a63f3fc9",
+  "version": "2.1.0",
   "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,14 +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.1.0"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-nightly.97+a63f3fc9"
-  },
-  "devDependencies": {
-    "less": "^3.9.0"
+    "@parcel/plugin": "^2.1.0",
+    "@parcel/source-map": "^2.0.0",
+    "less": "^4.1.1"
   },
-  "gitHead": "a63f3fc9726483219412920faeb255e035f90747"
+  "gitHead": "5a80fbe4af8797d0aab248a66f5254f42f00e83e"
 }

package/src/LessTransformer.js

@@ -1,36 +1,48 @@
-// @flow strict-local
-
+// @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} from './loadConfig';
 
 // E.g: ~library/file.less
 const WEBPACK_ALIAS_RE = /^~[^/]/;
 
-export default new Transformer({
-  async getConfig({asset, resolve}) {
-    let config = await asset.getConfig(['.lessrc', '.lessrc.js'], {
-      packageKey: 'less',
-    });
-
-    if (config === null) {
-      config = {};
-    }
+type LessConfig = {
+  sourceMap: any,
+  filename: string,
+  plugins: Array<any>,
+  ...
+};
 
-    config.filename = asset.filePath;
-    config.plugins = [
-      ...(config.plugins || []),
-      urlPlugin({asset}),
-      resolvePathPlugin({asset, resolve}),
-    ];
-
-    return config;
+export default (new Transformer({
+  loadConfig({config}) {
+    return load({config});
   },
 
-  async transform({asset, options, config}) {
-    const less = await options.packageManager.require('less', asset.filePath);
-    const code = await asset.getCode();
-    let css;
+  async transform({asset, options, config, resolve}) {
+    asset.type = 'css';
+    asset.meta.hasDependencies = false;
+
+    let code = await asset.getCode();
+    let result;
     try {
-      css = (await less.render(code, config)).css;
+      let lessConfig: LessConfig = config ? {...config.config} : {};
+
+      if (asset.env.sourceMap) {
+        lessConfig.sourceMap = {};
+      }
+
+      lessConfig.filename = asset.filePath;
+      lessConfig.plugins = [
+        ...(lessConfig.plugins || []),
+        urlPlugin({asset}),
+        resolvePathPlugin({asset, resolve}),
+      ];
+
+      result = await less.render(code, lessConfig);
     } catch (err) {
       // For the error reporter
       err.fileName = err.filename;
@@ -41,26 +53,42 @@ export default new Transformer({
       throw err;
     }
 
-    asset.type = 'css';
-    asset.setCode(css);
-    asset.meta.hasDependencies = false;
+    if (result.map != null) {
+      let map = new SourceMap(options.projectRoot);
+      let rawMap = JSON.parse(result.map);
+      map.addVLQMap({
+        ...rawMap,
+        sources: rawMap.sources.map(s => path.relative(options.projectRoot, s)),
+      });
+      asset.setMap(map);
+    }
+
+    asset.setCode(result.css);
+
     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) {
-          node.value.value = asset.addURLDependency(
-            node.value.value,
-            node.currentFileInfo.filename,
-          );
+          const valueNode = ((node.value: any): LessNodeWithValue);
+          const stringValue = (valueNode.value: string);
+          if (
+            !stringValue.startsWith('#') // IE's `behavior: url(#default#VML)`)
+          ) {
+            valueNode.value = asset.addURLDependency(stringValue, {});
+          }
           return node;
         },
       });
 
+      // $FlowFixMe[method-unbinding]
       visitor.run = visitor.visit;
       pluginManager.addVisitor(visitor);
     },
@@ -79,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)) {
@@ -89,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

@@ -0,0 +1,42 @@
+// @flow
+import type {Config} from '@parcel/types';
+import path from 'path';
+
+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',
+  });
+
+  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
+  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.extname(configFile.filePath) === '.js';
+  if (isDynamic) {
+    config.invalidateOnStartup();
+  }
+
+  return {isStatic: !isDynamic, config: configContents};
+}