babel-plugin-react-css-modules - Transforms styleName to className using compile time CSS module resolution

  •        24

Transforms styleName to className using compile time CSS module resolution. In contrast to react-css-modules, babel-plugin-react-css-modules has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs 17kb react-css-modules + lodash dependency).

https://github.com/gajus/babel-plugin-react-css-modules

Dependencies:

ajv : ^6.1.1
ajv-keywords : ^3.1.0
babel-plugin-syntax-jsx : ^6.18.0
babel-types : ^6.19.0
generic-names : ^1.0.2
postcss : ^6.0.13
postcss-modules : ^1.1.0
postcss-modules-extract-imports : ^1.1.0
postcss-modules-local-by-default : ^1.1.1
postcss-modules-parser : ^1.1.0
postcss-modules-scope : ^1.0.2
postcss-modules-values : ^1.2.2

Tags
Implementation
License
Platform

   




Related Projects

react-css-modules - Seamless mapping of class names to CSS modules inside of React components.

  •    Javascript

If you are considering to use react-css-modules, evaluate if babel-plugin-react-css-modules covers your use case. babel-plugin-react-css-modules is a lightweight alternative of react-css-modules. babel-plugin-react-css-modules is not a drop-in replacement and does not cover all the use cases of react-css-modules. However, it has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs +17kb).

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

  •    Javascript

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

babel-plugin-css-in-js - A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e

  •    Javascript

A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the className prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server. babel-plugin-css-in-js works seamlessly on both client and server. It has built-in support for media queries, pseudo-classes, attribute selectors, and theming. The plugin's options allow you to configure vendor-prefixing, minification, and class name compression.

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

  •    Javascript

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

babel-plugin-react-intl - Extracts string messages from React components that use React Intl.

  •    Javascript

Extracts string messages for translation from modules that use React Intl.Note: This Babel plugin works with React Intl v2.x, and 1.x of this plugin works with Babel 5, 2.x works with Babel 6.


babel-plugin-flow-react-proptypes - A babel plugin to generate React PropTypes definitions from Flow type declarations

  •    Javascript

A babel plugin to generate React PropTypes definitions from Flow type declarations. Starting in 14.0.0, we output ES6 import/export statements by default. The deadCode option (explained below) will cause it to use common.js modules instead.

react-css-components - Define React presentational components with CSS

  •    Javascript

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

redux-webpack-es6-boilerplate - A starter project for modern React apps with Redux

  •    Javascript

Note: If you still want to use a previous version, please checkout old-original-structure branch. A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.

babel-plugin-module-resolver - Custom module resolver plugin for Babel

  •    Javascript

A Babel plugin to add a new resolver for your modules when compiling your code using Babel. This plugin allows you to add new "root" directories that contain your modules. It also allows you to setup a custom alias for directories, specific files, or even other npm modules. This plugin can simplify the require/import paths in your project. For example, instead of using complex relative paths like ../../../../utils/my-utils, you can write utils/my-utils. It will allow you to work faster since you won't need to calculate how many levels of directory you have to go up before accessing the file.

babel-plugin-react-transform - Babel plugin to instrument React components with custom transforms

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. This plugin wraps React components with arbitrary transforms. In other words, it allows you to instrument React components in any way—limited only by your imagination.

sku - Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less, ESLint and Jest.

  •    Javascript

Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less, ESLint and Jest. Quickly get up and running with a zero-config development environment, or optionally add minimal config when needed. Designed for usage with seek-style-guide, although this isn't a requirement.

babel-plugin-transform-react-remove-prop-types - Remove unnecessary React propTypes from the production build

  •    Javascript

Remove unnecessary React propTypes from the production build. Remove React propTypes from the production build, as they are only used in development. You can save bandwidth by removing them.

react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS Modules

  •    Javascript

React Toolbox uses CSS Modules by default to import stylesheets written using PostCSS & postcss-preset-env features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules. Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

jsx-control-statements - Neater If and For for React JSX

  •    Javascript

JSX-Control-Statements is a Babel plugin that extends JSX to add basic control statements: conditionals and loops. It does so by transforming component-like control statements to their JavaScript counterparts - e.g. <If condition={condition()}>Hello World!</If> becomes condition() ? 'Hello World!' : null. Developers coming to React from using JavaScript templating libraries like Handlebars are often surprised that there's no built-in looping or conditional syntax. This is by design - JSX by is not a templating library, it's declarative syntactic sugar over functional JavaScript expressions. JSX Control Statements follows the same principle - it provides a component-like syntax that keeps your render functions neat and readable, but desugars into clean, readable JavaScript.

babel-plugin-import - Modularly import plugin for babel.

  •    Javascript

Modular import plugin for babel, compatible with antd, antd-mobile, lodash, material-ui, and so on. Note : with style: true css source files are imported and optimizations can be done during compilation time. With style: "css", pre bundled css files are imported as they are.

react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules

  •    Javascript

react-flexbox-grid is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.react-flexbox-grid imports the styles from flexboxgrid, that's why we're configuring the loader for it.

react-css-themr - Easy theming and composition for CSS Modules.

  •    Javascript

Easy theming and composition for CSS Modules. Note: Feedback and contributions on the docs are highly appreciated.

css-modules-require-hook - A require hook to compile CSS Modules in runtime

  •    Javascript

The require hook compiles CSS Modules in runtime. This is similar to Babel's babel/register. See the example: demo. A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. Learn more in the article CSS Modules - Welcome to the Future by Glen Maddern.

nwb - A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)

  •    Javascript

Installing globally provides an nwb command for quick development and working with projects. Using npm >= 3 is recommended, as Babel takes significantly more time and disk space to install with npm 2 due to its lack of deduplication.