Allow visitors to add dependencies (parcel-bundler#1170)

Author: devongovett

node/composeVisitors.js

@@ -1,15 +1,23 @@
 // @ts-check
 /** @typedef {import('./index').Visitor} Visitor */
+/** @typedef {import('./index').VisitorFunction} VisitorFunction */
 
 /**
  * Composes multiple visitor objects into a single one.
- * @param {Visitor[]} visitors 
- * @return {Visitor}
+ * @param {(Visitor | VisitorFunction)[]} visitors 
+ * @return {Visitor | VisitorFunction}
  */
 function composeVisitors(visitors) {
   if (visitors.length === 1) {
     return visitors[0];
   }
+  
+  if (visitors.some(v => typeof v === 'function')) {
+    return (opts) => {
+      let v = visitors.map(v => typeof v === 'function' ? v(opts) : v);
+      return composeVisitors(v);
+    };
+  }
 
   /** @type Visitor */
   let res = {};
@@ -366,7 +374,7 @@ function createArrayVisitor(visitors, apply) {
       // For each value, call all visitors. If a visitor returns a new value,
       // we start over, but skip the visitor that generated the value or saw
       // it before (to avoid cycles). This way, visitors can be composed in any order. 
-      for (let v = 0; v < visitors.length;) {
+      for (let v = 0; v < visitors.length && i < arr.length;) {
         if (seen.get(v)) {
           v++;
           continue;

node/index.d.ts

@@ -63,7 +63,7 @@ export interface TransformOptions<C extends CustomAtRules> {
    * For optimal performance, visitors should be as specific as possible about what types of values
    * they care about so that JavaScript has to be called as little as possible.
    */
-  visitor?: Visitor<C>,
+  visitor?: Visitor<C> | VisitorFunction<C>,
   /**
    * Defines how to parse custom CSS at-rules. Each at-rule can have a prelude, defined using a CSS
    * [syntax string](https://drafts.css-houdini.org/css-properties-values-api/#syntax-strings), and
@@ -213,6 +213,13 @@ export interface Visitor<C extends CustomAtRules> {
   EnvironmentVariableExit?: EnvironmentVariableVisitor | EnvironmentVariableVisitors;
 }
 
+export type VisitorDependency = FileDependency | GlobDependency;
+export interface VisitorOptions {
+  addDependency: (dep: VisitorDependency) => void
+}
+
+export type VisitorFunction<C extends CustomAtRules> = (options: VisitorOptions) => Visitor<C>;
+
 export interface CustomAtRules {
   [name: string]: CustomAtRuleDefinition
 }
@@ -358,7 +365,7 @@ export interface DependencyCSSModuleReference {
   specifier: string
 }
 
-export type Dependency = ImportDependency | UrlDependency;
+export type Dependency = ImportDependency | UrlDependency | FileDependency | GlobDependency;
 
 export interface ImportDependency {
   type: 'import',
@@ -384,6 +391,16 @@ export interface UrlDependency {
   placeholder: string
 }
 
+export interface FileDependency {
+  type: 'file',
+  filePath: string
+}
+
+export interface GlobDependency {
+  type: 'glob',
+  glob: string
+}
+
 export interface SourceLocation {
   /** The file path in which the dependency exists. */
   filePath: string,
@@ -438,7 +455,7 @@ export interface TransformAttributeOptions {
    * For optimal performance, visitors should be as specific as possible about what types of values
    * they care about so that JavaScript has to be called as little as possible.
    */
-  visitor?: Visitor<never>
+  visitor?: Visitor<never> | VisitorFunction<never>
 }
 
 export interface TransformAttributeResult {
@@ -474,4 +491,4 @@ export declare function bundleAsync<C extends CustomAtRules>(options: BundleAsyn
 /**
  * Composes multiple visitor objects into a single one.
  */
-export declare function composeVisitors<C extends CustomAtRules>(visitors: Visitor<C>[]): Visitor<C>;
+export declare function composeVisitors<C extends CustomAtRules>(visitors: (Visitor<C> | VisitorFunction<C>)[]): Visitor<C> | VisitorFunction<C>;

node/index.js

@@ -13,16 +13,47 @@ if (process.platform === 'linux') {
   parts.push('msvc');
 }
 
-if (process.env.CSS_TRANSFORMER_WASM) {
-  module.exports = require(`../pkg`);
-} else {
-  try {
-    module.exports = require(`lightningcss-${parts.join('-')}`);
-  } catch (err) {
-    module.exports = require(`../lightningcss.${parts.join('-')}.node`);
-  }
+let native;
+try {
+  native = require(`lightningcss-${parts.join('-')}`);
+} catch (err) {
+  native = require(`../lightningcss.${parts.join('-')}.node`);
 }
 
+module.exports.transform = wrap(native.transform);
+module.exports.transformStyleAttribute = wrap(native.transformStyleAttribute);
+module.exports.bundle = wrap(native.bundle);
+module.exports.bundleAsync = wrap(native.bundleAsync);
 module.exports.browserslistToTargets = require('./browserslistToTargets');
 module.exports.composeVisitors = require('./composeVisitors');
 module.exports.Features = require('./flags').Features;
+
+function wrap(call) {
+  return (options) => {
+    if (typeof options.visitor === 'function') {
+      let deps = [];
+      options.visitor = options.visitor({
+        addDependency(dep) {
+          deps.push(dep);
+        }
+      });
+
+      let result = call(options);
+      if (result instanceof Promise) {
+        result = result.then(res => {
+          if (deps.length) {
+            res.dependencies ??= [];
+            res.dependencies.push(...deps);
+          }
+          return res;
+        });
+      } else if (deps.length) {
+        result.dependencies ??= [];
+        result.dependencies.push(...deps);
+      }
+      return result;
+    } else {
+      return call(options);
+    }
+  };
+}

node/test/composeVisitors.test.mjs

@@ -800,4 +800,61 @@ test('StyleSheet', () => {
   assert.equal(styleSheetExitCalledCount, 2);
 });
 
+test('visitor function', () => {
+  let res = transform({
+    filename: 'test.css',
+    minify: true,
+    code: Buffer.from(`
+      @dep "foo.js";
+      @dep2 "bar.js";
+
+      .foo {
+        width: 32px;
+      }
+    `),
+    visitor: composeVisitors([
+      ({addDependency}) => ({
+        Rule: {
+          unknown: {
+            dep(rule) {
+              let file = rule.prelude[0].value.value;
+              addDependency({
+                type: 'file',
+                filePath: file
+              });
+              return [];
+            }
+          }
+        }
+      }),
+      ({addDependency}) => ({
+        Rule: {
+          unknown: {
+            dep2(rule) {
+              let file = rule.prelude[0].value.value;
+              addDependency({
+                type: 'file',
+                filePath: file
+              });
+              return [];
+            }
+          }
+        }
+      })
+    ])
+  });
+
+  assert.equal(res.code.toString(), '.foo{width:32px}');
+  assert.equal(res.dependencies, [
+    {
+      type: 'file',
+      filePath: 'foo.js'
+    },
+    {
+      type: 'file',
+      filePath: 'bar.js'
+    }
+  ]);
+});
+
 test.run();

node/test/visitor.test.mjs

@@ -1170,4 +1170,119 @@ test('visit stylesheet', () => {
   assert.equal(res.code.toString(), '.bar{width:80px}.foo{width:32px}');
 });
 
+test('visitor function', () => {
+  let res = transform({
+    filename: 'test.css',
+    minify: true,
+    code: Buffer.from(`
+      @dep "foo.js";
+
+      .foo {
+        width: 32px;
+      }
+    `),
+    visitor: ({addDependency}) => ({
+      Rule: {
+        unknown: {
+          dep(rule) {
+            let file = rule.prelude[0].value.value;
+            addDependency({
+              type: 'file',
+              filePath: file
+            });
+            return [];
+          }
+        }
+      }
+    })
+  });
+
+  assert.equal(res.code.toString(), '.foo{width:32px}');
+  assert.equal(res.dependencies, [{
+    type: 'file',
+    filePath: 'foo.js'
+  }]);
+});
+
+test('visitor function works with style attributes', () => {
+  let res = transformStyleAttribute({
+    filename: 'test.css',
+    minify: true,
+    code: Buffer.from('height: 12px'),
+    visitor: ({addDependency}) => ({
+      Length() {
+        addDependency({
+          type: 'file',
+          filePath: 'test.json'
+        });
+      }
+    })
+  });
+
+  assert.equal(res.dependencies, [{
+    type: 'file',
+    filePath: 'test.json'
+  }]);
+});
+
+test('visitor function works with bundler', () => {
+  let res = bundle({
+    filename: 'tests/testdata/a.css',
+    minify: true,
+    visitor: ({addDependency}) => ({
+      Length() {
+        addDependency({
+          type: 'file',
+          filePath: 'test.json'
+        });
+      }
+    })
+  });
+
+  assert.equal(res.dependencies, [
+    {
+      type: 'file',
+      filePath: 'test.json'
+    },
+    {
+      type: 'file',
+      filePath: 'test.json'
+    },
+    {
+      type: 'file',
+      filePath: 'test.json'
+    }
+  ]);
+});
+
+test('works with async bundler', async () => {
+  let res = await bundleAsync({
+    filename: 'tests/testdata/a.css',
+    minify: true,
+    visitor: ({addDependency}) => ({
+      Length() {
+        addDependency({
+          type: 'file',
+          filePath: 'test.json'
+        });
+      }
+    })
+  });
+
+  assert.equal(res.dependencies, [
+    {
+      type: 'file',
+      filePath: 'test.json'
+    },
+    {
+      type: 'file',
+      filePath: 'test.json'
+    },
+    {
+      type: 'file',
+      filePath: 'test.json'
+    }
+  ]);
+});
+
 test.run();

wasm/index.mjs

@@ -38,19 +38,47 @@ export default async function init(input) {
 }
 
 export function transform(options) {
-  return wasm.transform(options);
+  return wrap(wasm.transform, options);
 }
 
 export function transformStyleAttribute(options) {
-  return wasm.transformStyleAttribute(options);
+  return wrap(wasm.transformStyleAttribute, options);
 }
 
 export function bundle(options) {
-  return wasm.bundle(options);
+  return wrap(wasm.bundle, options);
 }
 
 export function bundleAsync(options) {
-  return bundleAsyncInternal(options);
+  return wrap(bundleAsyncInternal, options);
+}
+
+function wrap(call, options) {
+  if (typeof options.visitor === 'function') {
+    let deps = [];
+    options.visitor = options.visitor({
+      addDependency(dep) {
+        deps.push(dep);
+      }
+    });
+
+    let result = call(options);
+    if (result instanceof Promise) {
+      result = result.then(res => {
+        if (deps.length) {
+          res.dependencies ??= [];
+          res.dependencies.push(...deps);
+        }
+        return res;
+      });
+    } else if (deps.length) {
+      result.dependencies ??= [];
+      result.dependencies.push(...deps);
+    }
+    return result;
+  } else {
+    return call(options);
+  }
 }
 
 export { browserslistToTargets } from './browserslistToTargets.js';