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

  •        809

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.

https://github.com/css-modules/css-modules-require-hook

Dependencies:

debug : ^2.2.0
generic-names : ^1.0.1
glob-to-regexp : ^0.3.0
icss-replace-symbols : ^1.0.2
lodash : ^4.3.0
postcss : ^6.0.1
postcss-modules-extract-imports : ^1.0.0
postcss-modules-local-by-default : ^1.0.1
postcss-modules-resolve-imports : ^1.3.0
postcss-modules-scope : ^1.0.0
postcss-modules-values : ^1.1.1
seekout : ^1.0.1

Tags
Implementation
License
Platform

   




Related Projects

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.

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.

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).

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-css-modules - Transforms styleName to className using compile time CSS module resolution

  •    Javascript

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).


css-modules-demos - a collection of simple demos of CSS Modules

  •    Javascript

This repo is a collection of simple demos of CSS Modules. If you don't know, CSS Modules is a method to add local scope and module dependencies into CSS.

Marionette-Require-Boilerplate - Marionette-Require-Boilerplate

  •    Javascript

A Marionette.js and Require.js Boilerplate that promotes decoupling your JavaScript into modules, separating business logic from application logic using Collections/Models, Regions and Views, reusing your JavaScript between Desktop and Mobile Web versions while using a mobile framework (jQuery Mobile), including non-AMD Compatible Third Party Scripts in your project, optimizing your JavaScript and CSS files (minify, concatenate, etc), and unit testing your JavaScript. Part of the BoilerplateMVC suite. Uses a large portion of the HTML5 Boilerplate HTML and CSS.

typed-css-modules - Creates .d.ts files from css-modules .css files

  •    Javascript

Creates TypeScript definition files from CSS Modules .css files. Then, this creates *.css.d.ts files under the directory which has original .css file.

decss - 🎨 Converts CSS modules into components 👩‍🎨

  •    Javascript

decss converts CSS modules into React/Preact components. Thanks to simple CSS class naming convention it generates enum and boolean props for the component automatically so you can keep your code clean and tidy. The runtime size is exactly 673 B.

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.

postcss-modules - PostCSS plugin to use CSS Modules everywhere

  •    Javascript

A PostCSS plugin to use CSS Modules everywhere. Not only at the client side. getJSON may also return a Promise.

webpack-demo - Working demo of CSS Modules, using Webpack's css-loader in module mode

  •    Javascript

A working demo of CSS Modules, using Webpack's css-loader in module mode. In this project's package.json file you find a lot of npm modules for this demo application. Since not all of them are required for the actual CSS modules features, we've created the following list to describe their purposes.

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 - Documentation about css-modules

  •    

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. All URLs (url(...)) and @imports are in module request format (./xxx and ../xxx means relative, xxx and xxx/yyy means in modules folder, i. e. in node_modules). When importing the CSS Module from a JS Module, it exports an object with all mappings from local names to global names.

css-modulesify - A browserify plugin to load CSS Modules

  •    Javascript

A browserify plugin to load CSS Modules. Please note that this is still highly experimental.

pure - A set of small, responsive CSS modules that you can use in every web project.

  •    HTML

Now, all Pure CSS files should be built into the `pure/build/` directory. Allfiles that are in this build directory are also available on the CDN. The namingconventions of the files in the `build/` directory follow these rules:* `[module]-core.css`: The minimal set of styles, ususally structural, that provide the base on which the rest of the module's styles build.* `[module]-nr.css`: Rollup of `[module]-core.css` + `[module].css` + `[module]-[feature].css` from the `src/[module]/` dir. This i

suit - Style tools for UI components

  •    CSS

Style tools for component-based UI development. Each of these modules are made up of smaller modules, making it easy to customize your setup and build pipeline.

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.

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.

sheetify - :sparkles: Modular CSS bundler for browserify

  •    Javascript

Modular CSS bundler for browserify. Works with npm modules like browserify does. Sheetify is very good for namespacing static css assets in your javaScript code. Currently there is no support for dynamic variables within sheetify, however you could achieve this by setting the inline style property of an element.