Publish WASM package

.github/workflows/release.yml

@@ -143,13 +143,32 @@ jobs:
           name: bindings-${{ matrix.target }}
           path: '*.node'
 
+  build-wasm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Node.JS
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - name: Install wasm-pack
+        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+      - name: Build wasm
+        run: yarn wasm-browser:build
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v2
+        with:
+          name: wasm
+          path: node/pkg
+
   release:
     runs-on: ubuntu-latest
     name: Build and release
     needs:
       - build
       - build-linux
       - build-apple-silicon
+      - build-wasm
     steps:
       - uses: actions/checkout@v1
       - uses: bahmutov/npm-install@v1.1.0
@@ -158,7 +177,9 @@ jobs:
         with:
           path: artifacts
       - name: Build npm packages
-        run: node scripts/build-npm.js
+        run: |
+          node scripts/build-npm.js
+          node scripts/build-wasm.js
       - run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > ~/.npmrc
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -172,6 +193,9 @@ jobs:
           done
           echo "Publishing @parcel/css...";
           npm publish
+          echo "Publishing @parcel/css-wasm..."
+          cd npm/wasm
+          npm publish
 
   release-crates:
     runs-on: ubuntu-latest

Cargo.toml

@@ -7,7 +7,7 @@ members = [
 [package]
 authors = ["Devon Govett <devongovett@gmail.com>"]
 name = "parcel_css"
-version = "1.0.0-alpha.10"
+version = "1.0.0-alpha.11"
 description = "A CSS parser, transformer, and minifier"
 license = "MIT"
 edition = "2018"

README.md

@@ -44,7 +44,7 @@ A CSS parser, transformer, and minifier written in Rust.
 
 `@parcel/css` can be used from [Parcel](https://parceljs.org), as a standalone library from JavaScript or Rust, or wrapped as a plugin within any other tool.
 
-### From JavaScript
+### From Node
 
 See the [TypeScript definitions](https://github.com/parcel-bundler/parcel-css/blob/master/node/index.d.ts) for full API docs.
 
@@ -115,6 +115,24 @@ You can also configure Parcel CSS in the `package.json` in the root of your proj
 }
 ```
 
+### From Deno or in browser
+
+The `@parcel/css-wasm` package can be used in Deno or directly in browsers. This uses a WebAssembly build of Parcel CSS. Use `TextEncoder` and `TextDecoder` convert code from a string to a typed array and back.
+
+```js
+import init, {transform} from 'https://cdn.skypack.dev/@parcel/css-wasm';
+
+await init();
+
+let {code, map} = transform({
+  filename: 'style.css',
+  code: new TextEncoder().encode('.foo { color: red }'),
+  minify: true,
+});
+
+console.log(new TextDecoder().decode(code));
+```
+
 ## Benchmarks
 
 <img width="666" alt="chart" src="https://user-images.githubusercontent.com/19409/149202953-fe174902-aba1-4f3e-babb-f02a30f92b91.png#gh-light-mode-only">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/css",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "description": "A CSS parser, transformer, and minifier written in Rust",
   "main": "node/index.js",

scripts/build-npm.js

@@ -57,7 +57,7 @@ for (let triple of triples) {
   delete pkg2.scripts;
   delete pkg2.types;
 
-  optionalDependencies[pkg2.name] = '^' + pkg.version;
+  optionalDependencies[pkg2.name] = pkg.version;
 
   try {
     fs.mkdirSync(dir + '/npm/' + t);

scripts/build-wasm.js

@@ -0,0 +1,47 @@
+const exec = require('child_process').execSync;
+const fs = require('fs');
+const pkg = require('../package.json');
+
+const dir = `${__dirname}/..`;
+
+try {
+  fs.mkdirSync(dir + '/npm');
+} catch (err) {}
+
+exec(`cp -R ${dir}/artifacts/wasm ${dir}/npm/.`);
+fs.writeFileSync(`${dir}/npm/wasm/index.js`, `export {default, transform, transformStyleAttribute} from './parcel_css_node.js';\nexport {browserslistToTargets} from './browserslistToTargets.js'`);
+
+let b = fs.readFileSync(`${dir}/node/browserslistToTargets.js`, 'utf8');
+b = b.replace('module.exports = browserslistToTargets;', 'export {browserslistToTargets};');
+fs.writeFileSync(`${dir}/npm/wasm/browserslistToTargets.js`, b);
+fs.unlinkSync(`${dir}/npm/wasm/parcel_css_node.d.ts`);
+
+let dts = fs.readFileSync(`${dir}/node/index.d.ts`, 'utf8');
+dts = dts.replace(/: Buffer/g, ': Uint8Array');
+dts += `
+/** Initializes the web assembly module. */
+export default function init(): Promise<void>;
+`;
+fs.writeFileSync(`${dir}/npm/wasm/index.d.ts`, dts);
+fs.copyFileSync(`${dir}/node/targets.d.ts`, `${dir}/npm/wasm/targets.d.ts`);
+
+let readme = fs.readFileSync(`${dir}/README.md`, 'utf8');
+readme = readme.replace('# @parcel/css', '# @parcel/css-wasm');
+fs.writeFileSync(`${dir}/npm/wasm/README.md`, readme);
+
+fs.unlinkSync(`${dir}/npm/wasm/.gitignore`);
+
+let wasmPkg = {...pkg};
+wasmPkg.name = '@parcel/css-wasm';
+wasmPkg.module = 'index.js';
+wasmPkg.types = 'index.d.ts';
+wasmPkg.sideEffects = false;
+delete wasmPkg.main;
+delete wasmPkg.files;
+delete wasmPkg.napi;
+delete wasmPkg.devDependencies;
+delete wasmPkg.dependencies;
+delete wasmPkg.optionalDependencies;
+delete wasmPkg.targets;
+delete wasmPkg.scripts;
+fs.writeFileSync(`${dir}/npm/wasm/package.json`, JSON.stringify(wasmPkg, false, 2) + '\n');