diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 4fbd88ff..2be64f93 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -143,6 +143,24 @@ 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 @@ -150,6 +168,7 @@ jobs: - 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 diff --git a/Cargo.lock b/Cargo.lock index c846def9..9b647c40 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -276,7 +276,7 @@ checksum = "72ef4a56884ca558e5ddb05a1d1e7e1bfd9a68d9ed024c21704cc98872dae1bb" [[package]] name = "parcel_css" -version = "1.0.0-alpha.7" +version = "1.0.0-alpha.11" dependencies = [ "bitflags", "cssparser", diff --git a/Cargo.toml b/Cargo.toml index 1e38105e..477caec2 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -7,7 +7,7 @@ members = [ [package] authors = ["Devon Govett "] 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" diff --git a/README.md b/README.md index 01591e23..18348385 100644 --- a/README.md +++ b/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 chart diff --git a/package.json b/package.json index 30fb3e52..bfb22151 100644 --- a/package.json +++ b/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", diff --git a/scripts/build-npm.js b/scripts/build-npm.js index 7c0b4b56..e72e88c8 100644 --- a/scripts/build-npm.js +++ b/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); diff --git a/scripts/build-wasm.js b/scripts/build-wasm.js new file mode 100644 index 00000000..2d3899e5 --- /dev/null +++ b/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; +`; +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');