/esbuild-plugin-linaria

An unofficial and experimental esbuild plugin for Linaria.

Primary LanguageTypeScriptDo What The F*ck You Want To Public LicenseWTFPL

esbuild-plugin-linaria

An unofficial and experimental esbuild plugin for Linaria.

Linaria officially supports esbuild now.
https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#esbuild

Installation

$ npm i -D esbuild @luncheon/esbuild-plugin-linaria

Usage Example

  • build.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
import { css } from '@linaria/core'

document.body.className = css`
  display: grid;

  ::before {
    content: '';
  }
`

Run build.js

$ node build.js

Then two files will be output

  • dist/app.js
(()=>{document.body.className="a16lghq5";})();
  • dist/app.css
.a16lghq5{display:grid}.a16lghq5::before{content:"";}

Options

The followings are the options for this plugin and their default values.

linariaPlugin({
  filter: /\.[cm]?[jt]sx?$/,
  preprocess: (code, args) => code,
  linariaOptions: {
    pluginOptions: {
      babelOptions: {
        plugins: [
          presets: ['@babel/preset-react', '@babel/preset-typescript'],
        ],
      },
    },
  },
})

With esbuild-plugin-pipe

If you use this plugin with esbuild-plugin-pipe, pass the same plugin instance to both esbuild-plugin-pipe and esbuild.

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