@gjsify/lightningcss-wasm 0.4.0

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@gjsify/lightningcss-wasm",
+  "version": "0.4.0",
+  "description": "Phase D-2 POC: GJS-compatible loader for the lightningcss WASM bundle. Re-exports the `lightningcss-wasm` npm package's transform/bundle/bundleAsync API on top of SpiderMonkey 140's synchronous `new WebAssembly.Module/Instance` constructors. Reads the .wasm via @gjsify/fs (or Node's native fs), resolves randomness via globalThis.crypto. No WASI, no SharedArrayBuffer — single-shot CSS pipeline. Intended as the WASM-track counterpart to `@gjsify/lightningcss-native`; the better of the two wins the slot in `@gjsify/rolldown-plugin-gjsify`'s cssAsStringPlugin (see Phase D-2 decision matrix).",
+  "type": "module",
+  "main": "src/index.mjs",
+  "module": "src/index.mjs",
+  "exports": {
+    ".": {
+      "default": "./src/index.mjs"
+    },
+    "./wasm/lightningcss_node.wasm": "./wasm/lightningcss_node.wasm"
+  },
+  "files": [
+    "src",
+    "wasm"
+  ],
+  "scripts": {
+    "clear": "rm -rf lib tsconfig.tsbuildinfo || exit 0",
+    "check": "echo 'no typecheck — vendored JS only' && exit 0"
+  },
+  "keywords": [
+    "gjs",
+    "lightningcss",
+    "wasm",
+    "css",
+    "minify",
+    "browserslist",
+    "napi-wasm"
+  ],
+  "dependencies": {
+    "@gjsify/fs": "^0.4.0",
+    "@gjsify/webcrypto": "^0.4.0"
+  },
+  "author": "Pascal Garber <pascal@artandcode.studio>",
+  "license": "MIT"
+}

package/src/async.mjs

@@ -0,0 +1,74 @@
+let cur_await_promise_sync;
+export function await_promise_sync(promise_addr, result_addr, error_addr) {
+  cur_await_promise_sync(promise_addr, result_addr, error_addr);
+}
+
+const State = {
+  None: 0,
+  Unwinding: 1,
+  Rewinding: 2
+};
+
+// This uses Binaryen's Asyncify transform to suspend native code execution while a promise is resolving.
+// That allows synchronous Rust code to call async JavaScript functions without multi-threading.
+// When Rust wants to await a promise, it calls await_promise_sync, which saves the stack state and unwinds.
+// That causes the bundle function to return early. If a promise has been queued, we can then await it
+// and "rewind" the function back to where it was before by calling it again. This time the result of
+// the promise can be returned, and the function can continue where it left off.
+// See the docs in https://github.com/WebAssembly/binaryen/blob/main/src/passes/Asyncify.cpp
+// The code here is also partially based on https://github.com/GoogleChromeLabs/asyncify
+export function createBundleAsync(env) {
+  let {instance, exports} = env;
+  let {asyncify_get_state, asyncify_start_unwind, asyncify_stop_unwind, asyncify_start_rewind, asyncify_stop_rewind} = instance.exports;
+
+  // allocate __asyncify_data
+  // Stack data goes right after the initial descriptor.
+  let DATA_ADDR = instance.exports.napi_wasm_malloc(8 + 4096);
+  let DATA_START = DATA_ADDR + 8;
+  let DATA_END = DATA_ADDR + 8 + 4096;
+  new Int32Array(env.memory.buffer, DATA_ADDR).set([DATA_START, DATA_END]);
+
+  function assertNoneState() {
+    if (asyncify_get_state() !== State.None) {
+      throw new Error(`Invalid async state ${asyncify_get_state()}, expected 0.`);
+    }
+  }
+
+  let promise, result, error;
+  cur_await_promise_sync = (promise_addr, result_addr, error_addr) => {
+    let state = asyncify_get_state();
+    if (state === State.Rewinding) {
+      asyncify_stop_rewind();
+      if (result != null) {
+        env.createValue(result, result_addr);
+      }
+      if (error != null) {
+        env.createValue(error, error_addr);
+      }
+      promise = result = error = null;
+      return;
+    }
+    assertNoneState();
+    promise = env.get(promise_addr);
+    asyncify_start_unwind(DATA_ADDR);
+  };
+
+  return async function bundleAsync(options) {
+    assertNoneState();
+    let res = exports.bundle(options);
+    while (asyncify_get_state() === State.Unwinding) {
+      asyncify_stop_unwind();
+      try {
+        result = await promise;
+      } catch (err) {
+        error = err;
+      }
+      assertNoneState();
+      asyncify_start_rewind(DATA_ADDR);
+      res = exports.bundle(options);
+    }
+
+    assertNoneState();
+    return res;
+  };
+}

package/src/browserslistToTargets.js

@@ -0,0 +1,48 @@
+const BROWSER_MAPPING = {
+  and_chr: 'chrome',
+  and_ff: 'firefox',
+  ie_mob: 'ie',
+  op_mob: 'opera',
+  and_qq: null,
+  and_uc: null,
+  baidu: null,
+  bb: null,
+  kaios: null,
+  op_mini: null,
+};
+
+function browserslistToTargets(browserslist) {
+  let targets = {};
+  for (let browser of browserslist) {
+    let [name, v] = browser.split(' ');
+    if (BROWSER_MAPPING[name] === null) {
+      continue;
+    }
+
+    let version = parseVersion(v);
+    if (version == null) {
+      continue;
+    }
+
+    if (targets[name] == null || version < targets[name]) {
+      targets[name] = version;
+    }
+  }
+
+  return targets;
+}
+
+function parseVersion(version) {
+  let [major, minor = 0, patch = 0] = version
+    .split('-')[0]
+    .split('.')
+    .map(v => parseInt(v, 10));
+
+  if (isNaN(major) || isNaN(minor) || isNaN(patch)) {
+    return null;
+  }
+
+  return (major << 16) | (minor << 8) | patch;
+}
+
+export {browserslistToTargets};

package/src/composeVisitors.js

@@ -0,0 +1,450 @@
+// @ts-check
+/** @typedef {import('./index').Visitor} Visitor */
+/** @typedef {import('./index').VisitorFunction} VisitorFunction */
+
+/**
+ * Composes multiple visitor objects into a single one.
+ * @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 = {};
+  composeSimpleVisitors(res, visitors, 'StyleSheet');
+  composeSimpleVisitors(res, visitors, 'StyleSheetExit');
+  composeObjectVisitors(res, visitors, 'Rule', ruleVisitor, wrapCustomAndUnknownAtRule);
+  composeObjectVisitors(res, visitors, 'RuleExit', ruleVisitor, wrapCustomAndUnknownAtRule);
+  composeObjectVisitors(res, visitors, 'Declaration', declarationVisitor, wrapCustomProperty);
+  composeObjectVisitors(res, visitors, 'DeclarationExit', declarationVisitor, wrapCustomProperty);
+  composeSimpleVisitors(res, visitors, 'Url');
+  composeSimpleVisitors(res, visitors, 'Color');
+  composeSimpleVisitors(res, visitors, 'Image');
+  composeSimpleVisitors(res, visitors, 'ImageExit');
+  composeSimpleVisitors(res, visitors, 'Length');
+  composeSimpleVisitors(res, visitors, 'Angle');
+  composeSimpleVisitors(res, visitors, 'Ratio');
+  composeSimpleVisitors(res, visitors, 'Resolution');
+  composeSimpleVisitors(res, visitors, 'Time');
+  composeSimpleVisitors(res, visitors, 'CustomIdent');
+  composeSimpleVisitors(res, visitors, 'DashedIdent');
+  composeArrayFunctions(res, visitors, 'MediaQuery');
+  composeArrayFunctions(res, visitors, 'MediaQueryExit');
+  composeSimpleVisitors(res, visitors, 'SupportsCondition');
+  composeSimpleVisitors(res, visitors, 'SupportsConditionExit');
+  composeArrayFunctions(res, visitors, 'Selector');
+  composeTokenVisitors(res, visitors, 'Token', 'token', false);
+  composeTokenVisitors(res, visitors, 'Function', 'function', false);
+  composeTokenVisitors(res, visitors, 'FunctionExit', 'function', true);
+  composeTokenVisitors(res, visitors, 'Variable', 'var', false);
+  composeTokenVisitors(res, visitors, 'VariableExit', 'var', true);
+  composeTokenVisitors(res, visitors, 'EnvironmentVariable', 'env', false);
+  composeTokenVisitors(res, visitors, 'EnvironmentVariableExit', 'env', true);
+  return res;
+}
+
+export { composeVisitors };
+
+function wrapCustomAndUnknownAtRule(k, f) {
+  if (k === 'unknown') {
+    return (value => f({ type: 'unknown', value }));
+  }
+  if (k === 'custom') {
+    return (value => f({ type: 'custom', value }));
+  }
+  return f;
+}
+
+function wrapCustomProperty(k, f) {
+  return k === 'custom' ? (value => f({ property: 'custom', value })) : f;
+}
+
+/**
+ * @param {import('./index').Visitor['Rule']} f 
+ * @param {import('./ast').Rule} item 
+ */
+function ruleVisitor(f, item) {
+  if (typeof f === 'object') {
+    if (item.type === 'unknown') {
+      let v = f.unknown;
+      if (typeof v === 'object') {
+        v = v[item.value.name];
+      }
+      return v?.(item.value);
+    }
+    if (item.type === 'custom') {
+      let v = f.custom;
+      if (typeof v === 'object') {
+        v = v[item.value.name];
+      }
+      return v?.(item.value);
+    }
+    return f[item.type]?.(item);
+  }
+  return f?.(item);
+}
+
+/**
+ * @param {import('./index').Visitor['Declaration']} f 
+ * @param {import('./ast').Declaration} item 
+ */
+function declarationVisitor(f, item) {
+  if (typeof f === 'object') {
+    /** @type {string} */
+    let name = item.property;
+    if (item.property === 'unparsed') {
+      name = item.value.propertyId.property;
+    } else if (item.property === 'custom') {
+      let v = f.custom;
+      if (typeof v === 'object') {
+        v = v[item.value.name];
+      }
+      return v?.(item.value);
+    }
+    return f[name]?.(item);
+  }
+  return f?.(item);
+}
+
+/**
+ * 
+ * @param {Visitor[]} visitors 
+ * @param {string} key 
+ * @returns {[any[], boolean, Set<string>]}
+ */
+function extractObjectsOrFunctions(visitors, key) {
+  let values = [];
+  let hasFunction = false;
+  let allKeys = new Set();
+  for (let visitor of visitors) {
+    let v = visitor[key];
+    if (v) {
+      if (typeof v === 'function') {
+        hasFunction = true;
+      } else {
+        for (let key in v) {
+          allKeys.add(key);
+        }
+      }
+      values.push(v);
+    }
+  }
+  return [values, hasFunction, allKeys];
+}
+
+/**
+ * @template {keyof Visitor} K
+ * @param {Visitor} res
+ * @param {Visitor[]} visitors
+ * @param {K} key
+ * @param {(visitor: Visitor[K], item: any) => any | any[] | void} apply 
+ * @param {(k: string, f: any) => any} wrapKey 
+ */
+function composeObjectVisitors(res, visitors, key, apply, wrapKey) {
+  let [values, hasFunction, allKeys] = extractObjectsOrFunctions(visitors, key);
+  if (values.length === 0) {
+    return;
+  }
+
+  if (values.length === 1) {
+    res[key] = values[0];
+    return;
+  }
+
+  let f = createArrayVisitor(visitors, (visitor, item) => apply(visitor[key], item));
+  if (hasFunction) {
+    res[key] = f;
+  } else {
+    /** @type {any} */
+    let v = {};
+    for (let k of allKeys) {
+      v[k] = wrapKey(k, f);
+    }
+    res[key] = v;
+  }
+}
+
+/**
+ * @param {Visitor} res 
+ * @param {Visitor[]} visitors 
+ * @param {string} key 
+ * @param {import('./ast').TokenOrValue['type']} type 
+ * @param {boolean} isExit 
+ */
+function composeTokenVisitors(res, visitors, key, type, isExit) {
+  let [values, hasFunction, allKeys] = extractObjectsOrFunctions(visitors, key);
+  if (values.length === 0) {
+    return;
+  }
+
+  if (values.length === 1) {
+    res[key] = values[0];
+    return;
+  }
+
+  let f = createTokenVisitor(visitors, type, isExit);
+  if (hasFunction) {
+    res[key] = f;
+  } else {
+    let v = {};
+    for (let key of allKeys) {
+      v[key] = f;
+    }
+    res[key] = v;
+  }
+}
+
+/**
+ * @param {Visitor[]} visitors 
+ * @param {import('./ast').TokenOrValue['type']} type 
+ */
+function createTokenVisitor(visitors, type, isExit) {
+  let v = createArrayVisitor(visitors, (visitor, /** @type {import('./ast').TokenOrValue} */ item) => {
+    let f;
+    switch (item.type) {
+      case 'token':
+        f = visitor.Token;
+        if (typeof f === 'object') {
+          f = f[item.value.type];
+        }
+        break;
+      case 'function':
+        f = isExit ? visitor.FunctionExit : visitor.Function;
+        if (typeof f === 'object') {
+          f = f[item.value.name];
+        }
+        break;
+      case 'var':
+        f = isExit ? visitor.VariableExit : visitor.Variable;
+        break;
+      case 'env':
+        f = isExit ? visitor.EnvironmentVariableExit : visitor.EnvironmentVariable;
+        if (typeof f === 'object') {
+          let name;
+          switch (item.value.name.type) {
+            case 'ua':
+            case 'unknown':
+              name = item.value.name.value;
+              break;
+            case 'custom':
+              name = item.value.name.ident;
+              break;
+          }
+          f = f[name];
+        }
+        break;
+      case 'color':
+        f = visitor.Color;
+        break;
+      case 'url':
+        f = visitor.Url;
+        break;
+      case 'length':
+        f = visitor.Length;
+        break;
+      case 'angle':
+        f = visitor.Angle;
+        break;
+      case 'time':
+        f = visitor.Time;
+        break;
+      case 'resolution':
+        f = visitor.Resolution;
+        break;
+      case 'dashed-ident':
+        f = visitor.DashedIdent;
+        break;
+    }
+
+    if (!f) {
+      return;
+    }
+
+    let res = f(item.value);
+    switch (item.type) {
+      case 'color':
+      case 'url':
+      case 'length':
+      case 'angle':
+      case 'time':
+      case 'resolution':
+      case 'dashed-ident':
+        if (Array.isArray(res)) {
+          res = res.map(value => ({ type: item.type, value }))
+        } else if (res) {
+          res = { type: item.type, value: res };
+        }
+        break;
+    }
+
+    return res;
+  });
+
+  return value => v({ type, value });
+}
+
+/**
+ * @param {Visitor[]} visitors 
+ * @param {string} key 
+ */
+function extractFunctions(visitors, key) {
+  let functions = [];
+  for (let visitor of visitors) {
+    let f = visitor[key];
+    if (f) {
+      functions.push(f);
+    }
+  }
+  return functions;
+}
+
+/**
+ * @param {Visitor} res 
+ * @param {Visitor[]} visitors 
+ * @param {string} key 
+ */
+function composeSimpleVisitors(res, visitors, key) {
+  let functions = extractFunctions(visitors, key);
+  if (functions.length === 0) {
+    return;
+  }
+
+  if (functions.length === 1) {
+    res[key] = functions[0];
+    return;
+  }
+
+  res[key] = arg => {
+    let mutated = false;
+    for (let f of functions) {
+      let res = f(arg);
+      if (res) {
+        arg = res;
+        mutated = true;
+      }
+    }
+
+    return mutated ? arg : undefined;
+  };
+}
+
+/**
+ * @param {Visitor} res 
+ * @param {Visitor[]} visitors 
+ * @param {string} key 
+ */
+function composeArrayFunctions(res, visitors, key) {
+  let functions = extractFunctions(visitors, key);
+  if (functions.length === 0) {
+    return;
+  }
+
+  if (functions.length === 1) {
+    res[key] = functions[0];
+    return;
+  }
+
+  res[key] = createArrayVisitor(functions, (f, item) => f(item));
+}
+
+/**
+ * @template T
+ * @template V
+ * @param {T[]} visitors 
+ * @param {(visitor: T, item: V) => V | V[] | void} apply 
+ * @returns {(item: V) => V | V[] | void}
+ */
+function createArrayVisitor(visitors, apply) {
+  let seen = new Bitset(visitors.length);
+  return arg => {
+    let arr = [arg];
+    let mutated = false;
+    seen.clear();
+    for (let i = 0; i < arr.length; i++) {
+      // 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 && i < arr.length;) {
+        if (seen.get(v)) {
+          v++;
+          continue;
+        }
+
+        let item = arr[i];
+        let visitor = visitors[v];
+        let res = apply(visitor, item);
+        if (Array.isArray(res)) {
+          if (res.length === 0) {
+            arr.splice(i, 1);
+          } else if (res.length === 1) {
+            arr[i] = res[0];
+          } else {
+            arr.splice(i, 1, ...res);
+          }
+          mutated = true;
+          seen.set(v);
+          v = 0;
+        } else if (res) {
+          arr[i] = res;
+          mutated = true;
+          seen.set(v);
+          v = 0;
+        } else {
+          v++;
+        }
+      }
+    }
+
+    if (!mutated) {
+      return;
+    }
+
+    return arr.length === 1 ? arr[0] : arr;
+  };
+}
+
+class Bitset {
+  constructor(maxBits = 32) {
+    this.bits = 0;
+    this.more = maxBits > 32 ? new Uint32Array(Math.ceil((maxBits - 32) / 32)) : null;
+  }
+
+  /** @param {number} bit */
+  get(bit) {
+    if (bit >= 32 && this.more) {
+      let i = Math.floor((bit - 32) / 32);
+      let b = bit % 32;
+      return Boolean(this.more[i] & (1 << b));
+    } else {
+      return Boolean(this.bits & (1 << bit));
+    }
+  }
+
+  /** @param {number} bit */
+  set(bit) {
+    if (bit >= 32 && this.more) {
+      let i = Math.floor((bit - 32) / 32);
+      let b = bit % 32;
+      this.more[i] |= 1 << b;
+    } else {
+      this.bits |= 1 << bit;
+    }
+  }
+
+  clear() {
+    this.bits = 0;
+    if (this.more) {
+      this.more.fill(0);
+    }
+  }
+}

package/src/flags.js

@@ -0,0 +1,28 @@
+// This file is autogenerated by build-prefixes.js. DO NOT EDIT!
+
+export const Features = {
+  Nesting: 1,
+  NotSelectorList: 2,
+  DirSelector: 4,
+  LangSelectorList: 8,
+  IsSelector: 16,
+  TextDecorationThicknessPercent: 32,
+  MediaIntervalSyntax: 64,
+  MediaRangeSyntax: 128,
+  CustomMediaQueries: 256,
+  ClampFunction: 512,
+  ColorFunction: 1024,
+  OklabColors: 2048,
+  LabColors: 4096,
+  P3Colors: 8192,
+  HexAlphaColors: 16384,
+  SpaceSeparatedColorNotation: 32768,
+  FontFamilySystemUi: 65536,
+  DoublePositionGradients: 131072,
+  VendorPrefixes: 262144,
+  LogicalProperties: 524288,
+  LightDark: 1048576,
+  Selectors: 31,
+  MediaQueries: 448,
+  Colors: 1113088,
+};