├── .gitignore ├── LICENSE.md ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | coverage 4 | *.log 5 | lib -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Anton Petrov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # classnames-loader 2 | 3 | [![npm version](https://img.shields.io/npm/v/classnames-loader.svg?style=flat-square)](https://www.npmjs.com/package/classnames-loader) 4 | 5 | This is a webpack loader that automatically bind [css-modules](https://github.com/css-modules/css-modules) to [classnames](https://github.com/JedWatson/classnames). 6 | 7 | If you are using css-modules, or a similar approach to abstract class "names" and the real `className` values that are actually output to the DOM, you may want to use the [bind](https://github.com/JedWatson/classnames#alternate-bind-version-for-css-modules) variant of classnames module. 8 | 9 | Check out [this example](https://gist.github.com/itsmepetrov/7dbe519bb1332dd0f6c9) that shows the difference between `classNames`, `classNames/bind` and `classnames-loader` 10 | 11 | ### Installation 12 | 13 | ``` 14 | npm install --save-dev classnames-loader 15 | ``` 16 | 17 | ## Usage 18 | 19 | To enable this loader add `classnames` before `style` loader in webpack config: 20 | 21 | ```js 22 | { 23 | test: /\.css$/, 24 | loader: 'classnames!style!css') 25 | } 26 | ``` 27 | 28 | If you're using `ExtractTextPlugin` your webpack config should look like this: 29 | 30 | ```js 31 | { 32 | test: /\.css$/, 33 | loaders: ['classnames', ExtractTextPlugin.extract('style', 'css')]) 34 | } 35 | ``` 36 | 37 | Example usage in component: 38 | 39 | ```js 40 | import { Component } from 'react'; 41 | import cx from './submit-button.css'; 42 | 43 | export default class SubmitButton extends Component { 44 | render () { 45 | let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit'; 46 | let className = cx({ 47 | base: true, 48 | inProgress: this.props.store.submissionInProgress, 49 | error: this.props.store.errorOccurred, 50 | disabled: !this.props.form.valid, 51 | }); 52 | return ; 53 | } 54 | } 55 | ``` 56 | 57 | You can also access the class names just as you would do that with [css-modules](https://github.com/css-modules/css-modules): 58 | 59 | ```js 60 | import { Component } from 'react'; 61 | import styles from './submit-button.css'; 62 | 63 | export default class SubmitButton extends Component { 64 | render () { 65 | let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit'; 66 | return ; 67 | } 68 | } 69 | ``` 70 | 71 | ## Thanks 72 | 73 | [@JedWatson](https://github.com/JedWatson) for [classnames](https://github.com/JedWatson/classnames) module 74 | 75 | ## License 76 | 77 | [MIT](LICENSE.md) 78 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var loaderUtils = require("loader-utils"); 2 | 3 | module.exports = function(source, map) { 4 | this.callback(null, source, map); 5 | }; 6 | 7 | module.exports.pitch = function(remainingRequest) { 8 | this.cacheable(); 9 | return ` 10 | // classnames-loader: automatically bind css-modules to classnames 11 | function interopRequireDefault(obj) { 12 | return obj && obj.__esModule ? obj : {default: obj}; 13 | } 14 | var classNames = require(${loaderUtils.stringifyRequest(this, '!' + require.resolve('classnames/bind'))}); 15 | var locals = interopRequireDefault(require(${loaderUtils.stringifyRequest(this, '!!' + remainingRequest)})).default; 16 | var css = classNames.bind(locals); 17 | for (var style in locals) { 18 | if (!locals.hasOwnProperty(style)) { 19 | continue; 20 | } 21 | if (typeof Object.defineProperty === 'function') { 22 | Object.defineProperty(css, style, {value: locals[style]}); 23 | } 24 | else { 25 | css[style] = locals[style]; 26 | } 27 | } 28 | module.exports = css; 29 | `; 30 | }; 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "classnames-loader", 3 | "version": "2.1.0", 4 | "description": "Webpack loader to automatically bind css-modules to classnames", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/itsmepetrov/classnames-loader.git" 12 | }, 13 | "keywords": [ 14 | "webpack", 15 | "loader", 16 | "css", 17 | "modules", 18 | "css-modules", 19 | "classnames", 20 | "styles", 21 | "react", 22 | "bind" 23 | ], 24 | "author": "Anton Petrov (http://github.com/itsmepetrov)", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/itsmepetrov/classnames-loader/issues" 28 | }, 29 | "homepage": "https://github.com/itsmepetrov/classnames-loader#readme", 30 | "dependencies": { 31 | "loader-utils": "^0.2.11" 32 | }, 33 | "peerDependencies": { 34 | "classnames": "^2.2.0" 35 | } 36 | } 37 | 38 | --------------------------------------------------------------------------------