All Projects → indooorsman → esbuild-css-modules-plugin

indooorsman / esbuild-css-modules-plugin

Licence: MIT license
A esbuild plugin to bundle css modules into js(x)/ts(x)

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to esbuild-css-modules-plugin

React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (+379.69%)
Mutual labels:  postcss, css-modules
React Cool Starter
😎 🐣 A starter boilerplate for a universal web app with the best development experience and a focus on performance and best practices.
Stars: ✭ 1,083 (+1592.19%)
Mutual labels:  postcss, css-modules
Kratos Boilerplate
🔥 A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
Stars: ✭ 308 (+381.25%)
Mutual labels:  postcss, css-modules
react.js
A boilerplate for react js project. 基于 reactjs+redux+webpack2 的单页应用项目模板。
Stars: ✭ 28 (-56.25%)
Mutual labels:  postcss, css-modules
React Native Css Modules
Style React Native components using CSS, PostCSS, Sass, Less or Stylus.
Stars: ✭ 207 (+223.44%)
Mutual labels:  postcss, css-modules
webpack-typescript-react
Webpack 5 boilerplate with support of most common loaders and modules (see tags and description)
Stars: ✭ 185 (+189.06%)
Mutual labels:  postcss, css-modules
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: ✭ 678 (+959.38%)
Mutual labels:  postcss, css-modules
esbuild-plugin-import-glob
A esbuild plugin which allows to import multiple files using the glob syntax.
Stars: ✭ 28 (-56.25%)
Mutual labels:  esbuild, esbuild-plugin
React Typescript Webpack2 Cssmodules Postcss
Simple Starter Template for React, TypeScript, postCSS, ITCSS, CSS-Modules, Webpack and Live Reloading (React Hot Loader 3)
Stars: ✭ 117 (+82.81%)
Mutual labels:  postcss, css-modules
Rollup Plugin Styles
🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
Stars: ✭ 116 (+81.25%)
Mutual labels:  postcss, css-modules
twitter-web-react
twitter-web-react.now.sh
Stars: ✭ 104 (+62.5%)
Mutual labels:  postcss, css-modules
esbuild-plugin-svgr
A plugin for esbuild that enables importing *.svg files as React components.
Stars: ✭ 27 (-57.81%)
Mutual labels:  esbuild, esbuild-plugin
esbuild-plugin-alias
esbuild plugin for path aliases
Stars: ✭ 20 (-68.75%)
Mutual labels:  esbuild, esbuild-plugin
edgestack
[UNMAINTAINED] A Universal React Stack with deeply integrated localization Support, semi-automatic route-based code splitting, Hot Module Reloading (HMR), Redux, Apollo GraphQL and more...
Stars: ✭ 77 (+20.31%)
Mutual labels:  postcss, css-modules
build-plugin
Track your build performances like never before.
Stars: ✭ 45 (-29.69%)
Mutual labels:  esbuild, esbuild-plugin
Rollup Plugin Postcss
Seamless integration between Rollup and PostCSS.
Stars: ✭ 507 (+692.19%)
Mutual labels:  postcss, css-modules
Css In React
🍭 CSS in React - Learn the best CSS in JS frameworks by example
Stars: ✭ 101 (+57.81%)
Mutual labels:  postcss, css-modules
Modular Css
A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS
Stars: ✭ 234 (+265.63%)
Mutual labels:  postcss, css-modules
vital
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Stars: ✭ 151 (+135.94%)
Mutual labels:  postcss, css-modules
jess
If you like CSS, Less, Sass, and/or CSS modules, you're gonna want to star this repo.
Stars: ✭ 26 (-59.37%)
Mutual labels:  css-modules

esbuild-css-modules-plugin

npm version Test

A esbuild plugin to bundle css modules into js(x)/ts(x).

Works both with bundle: false and bundle: true.

If build with bundle: false, xxx.modules.css will be transformed to xxx.modules.css.js.

See ./test/test.js for examples.

Install

npm i -D esbuild-css-modules-plugin

or

yarn add -D esbuild-css-modules-plugin

Usage

const esbuild = require('esbuild');
const cssModulesPlugin = require('esbuild-css-modules-plugin');

esbuild.build({
  plugins: [
    cssModulesPlugin({
      // optional. set to false to not inject generated css into page;
      // default value is false when set `v2` to `true`, otherwise default is true,
      // if set to `true`, the generated css will be injected into `head`;
      // could be a string of css selector of the element to inject into,
      // e.g.
      // ```
      // inject: '#some-element-id' // the plugin will try to get `shadowRoot` of the found element, and append css to the `shadowRoot`, if no shadowRoot then append to the found element, if no element found then append to document.head
      // ```
      // could be a function with params content & digest (return a string of js code to inject to page),
      // e.g.
      // ```
      // inject: (cssContent, digest) => `console.log("${cssContent}", "${digest}")`
      // ```
      inject: false,

      localsConvention: 'camelCaseOnly', // optional. value could be one of 'camelCaseOnly', 'camelCase', 'dashes', 'dashesOnly', default is 'camelCaseOnly'

      generateScopedName: (name, filename, css) => string, // optional. refer to: https://github.com/madyankin/postcss-modules#generating-scoped-names

      filter: /\.modules?\.css$/i // Optional. Regex to filter certain CSS files.

      cssModulesOption: {
        // optional, refer to: https://github.com/madyankin/postcss-modules/blob/d7cefc427c43bf35f7ebc55e7bda33b4689baf5a/index.d.ts#L27
        // this option will override others passed to postcss-modules
      },

      v2: true, // experimental. v2 can bundle images in css, note if set `v2` to true, other options except `inject` will be ignored. and v2 only works with `bundle: true`.
      v2CssModulesOption: { // Optional.
        dashedIndents: false, // Optional. refer to: https://github.com/parcel-bundler/parcel-css/releases/tag/v1.9.0
        /**
         * Optional. The currently supported segments are:
         * [name] - the base name of the CSS file, without the extension
         * [hash] - a hash of the full file path
         * [local] - the original class name
         */
        pattern: `custom-prefix_[local]_[hash]`
      }
    })
  ]
});
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].