An open API service indexing awesome lists of open source software.

https://github.com/kwonoj/swc-plugin-vanilla-extract


https://github.com/kwonoj/swc-plugin-vanilla-extract

Last synced: over 1 year ago
JSON representation

Awesome Lists containing this project

README

          

# SWC-plugin-vanilla-extract

`SWC-plugin-vanilla-extract`

`swc-plugin-vanilla-extract` is a port of `@vanilla-extract/babel-plugin` for the SWC. Transform can be performed either via SWC's wasm-based plugin, or using custom passes in rust side transform chains.

## What does compatible exactly means?

This plugin attempts to mimic most of defined behavior of original plugin's test fixture. However, due to differences of plugin envioronment it does not support few things like reading package.json's dir, or packagename. Instead it uses current working directory with configurable package name. See the test cases how does it actually works.

**NOTE: Package can have breaking changes without major semver bump**

Given SWC's plugin interface itself is under experimental stage does not gaurantee semver-based major bump yet, this package also does not gaurantee semver compliant breaking changes yet. Please refer changelogs if you're encountering unexpected breaking behavior across versions.

# Usage

## Using SWC's wasm-based experimental plugin

First, install package via npm:

```
npm install --save-dev swc-plugin-vanilla-extract
```

Then add plugin into swc's configuration:

```
const pluginOptions = { packageName?: string }

jsc: {
...
experimental: {
plugins: [
["swc-plugin-vanilla-extract", pluginOptions]
]
}
}
```

## Using custom transform pass in rust

There is a single interface exposed to create a visitor for the transform, which you can pass into `before_custom_pass`.

```
create_extract_visitor(
_source_map: std::sync::Arc,
_comments: C,
filename: &str,
package_name: &str,
package_dir: &str,
) -> VanillaExtractVisitor
```

# Building / Testing

This package runs original plugin's fixture tests against SWC with its wasm plugin & custom transform both. `spec` contains set of the fixtures & unit test to run it, as well as supplimental packages to interop between instrumentation visitor to node.js runtime.

Few npm scripts are supported for wrapping those setups.

- `build:all`: Build all relative packages as debug build.
- `test`: Runs unit test for wasm plugin & custom transform.
- `test:debug`: Runs unit test, but only for `debug-test.yaml` fixture. This is mainly for local dev debugging for individual test fixture behavior.