esbuild-styled-components

It is like Styled Components babel plugin, but for esbuild.

Install

npm install -D @lukalabs/esbuild-styled-components
# or
yarn add -D @lukalabs/esbuild-styled-components

Usage with Remix

(see esbuild-inject-plugin for how to setup a Remix project)

esbuild-plugins.js

const styledComponentsPlugin = require('@lukalabs/esbuild-styled-components').default;

exports.plugins = function(plugins) {
  return [styledComponentsPlugin(/* options */), ...plugins];
}

Plugin options

const options = {
  // Regular expression to match current file contents
  // (only process files with "styled-components" in it)
  scMatch = 'styled-components',
  // Regular expression to match current file name
  filter = '(.jsx|.js|.tsx|.ts)$',
  // Regular expression for files to exclude 
  exclude = '/node_modules/',

  // These options are same as in Babel plugin (see https://styled-components.com/docs/tooling#babel-plugin)
  ssr = true,
  displayName = true,
  fileName = true,
  meaninglessFileNames = ['index']  
};

License

MIT

esbuild-styled-components uses these libraries:

• tree-sitter (MIT license)
• tree-sitter-typescript (MIT license)