https://github.com/luncheon/esbuild-plugin-linaria
An unofficial and experimental esbuild plugin for Linaria.
https://github.com/luncheon/esbuild-plugin-linaria
css-in-js esbuild esbuild-plugin linaria
Last synced: 12 months ago
JSON representation
An unofficial and experimental esbuild plugin for Linaria.
- Host: GitHub
- URL: https://github.com/luncheon/esbuild-plugin-linaria
- Owner: luncheon
- License: wtfpl
- Created: 2020-12-25T05:58:53.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-08-23T09:28:45.000Z (almost 3 years ago)
- Last Synced: 2025-05-26T14:03:09.104Z (about 1 year ago)
- Topics: css-in-js, esbuild, esbuild-plugin, linaria
- Language: TypeScript
- Homepage:
- Size: 389 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# esbuild-plugin-linaria
An unofficial and experimental [esbuild](https://esbuild.github.io/) plugin for [Linaria](https://linaria.dev/).
> Linaria officially supports esbuild now.
> https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#esbuild
## Installation
```sh
$ npm i -D esbuild @luncheon/esbuild-plugin-linaria
```
## Usage Example
- build.js
```js
const esbuild = require('esbuild')
const linariaPlugin = require('@luncheon/esbuild-plugin-linaria')
// set stylis options as needed
const stylis = require('stylis')
stylis.set({ prefix: false })
esbuild.build({
entryPoints: ['src/app.ts'],
outdir: 'dist',
bundle: true,
minify: true,
plugins: [linariaPlugin()],
})
```
- src/app.ts
```tsx
import { css } from '@linaria/core'
document.body.className = css`
display: grid;
::before {
content: '';
}
`
```
Run build.js
```sh
$ node build.js
```
Then two files will be output
- dist/app.js
```js
(()=>{document.body.className="a16lghq5";})();
```
- dist/app.css
```css
.a16lghq5{display:grid}.a16lghq5::before{content:"";}
```
## Options
The followings are the options for this plugin and their default values.
```js
linariaPlugin({
filter: /\.[cm]?[jt]sx?$/,
preprocess: (code, args) => code,
linariaOptions: {
pluginOptions: {
babelOptions: {
plugins: [
presets: ['@babel/preset-react', '@babel/preset-typescript'],
],
},
},
},
})
```
- `filter` is an option for esbuild to narrow down the files to which this plugin should be applied.
https://esbuild.github.io/plugins/#filters
- `preprocess` callback is called before the source code is transformed by Linaria.
- The first argument `code` is the source code content.
- The second argument `args` is the argument passed by esbuild. `args.path` is the file path.
- It must return source code content string.
- `linariaOptions` is the option for Linaria.
- `preprocessor`
https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#options
- `pluginOptions`
https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#options
## With `esbuild-plugin-pipe`
If you use this plugin with [`esbuild-plugin-pipe`](https://github.com/nativew/esbuild-plugin-pipe), pass the same plugin instance to both `esbuild-plugin-pipe` and `esbuild`.
```js
import esbuild from 'esbuild'
import pipe from 'esbuild-plugin-pipe'
import linariaPlugin from '@luncheon/esbuild-plugin-linaria'
const linaria = linariaPlugin({ filter: /^$/ })
esbuild.build({
entryPoints: ['src/app.ts'],
outdir: 'dist',
bundle: true,
minify: true,
plugins: [
pipe({
filter: /\.[jt]sx?$/,
plugins: [linaria],
}),
linaria,
],
})
```
## License
[WTFPL](http://www.wtfpl.net/)