Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewbranch/no-undefined-style-loader
Webpack loader that warns when an undefined key is referenced on a required CSS file
https://github.com/andrewbranch/no-undefined-style-loader
css loader webpack webpack-loader
Last synced: about 1 month ago
JSON representation
Webpack loader that warns when an undefined key is referenced on a required CSS file
- Host: GitHub
- URL: https://github.com/andrewbranch/no-undefined-style-loader
- Owner: andrewbranch
- Created: 2017-04-03T04:43:14.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-05-07T18:01:17.000Z (over 3 years ago)
- Last Synced: 2024-11-15T00:12:28.000Z (2 months ago)
- Topics: css, loader, webpack, webpack-loader
- Language: JavaScript
- Size: 274 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/no-undefined-style-loader)
[](https://circleci.com/gh/andrewbranch/no-undefined-style-loader)
[](https://github.com/prettier/prettier)
# no-undefined-style-loader
Webpack loader that warns when an undefined class name is referenced on a CSS file you imported into JavaScript. Works when chained after [css-loader](https://github.com/webpack-contrib/css-loader) with the [modules](https://github.com/webpack-contrib/css-loader#css-modules) option enabled.
I’ve found it’s painfully easy to mistype class names (or just forget to write the CSS rule I intended to reference), and it’s not always immediately obvious what went wrong. This tool intends to catch those mistakes faster than you would by hand.
**This loader is not intended to be used in production.**
## Usage
```js
// webpack.config.js (Webpack 2 syntax shown)
export default {
entry: './app',
module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'no-undefined-style-loader',
options: {
fail: true // default: false
}
}, {
loader: 'css-loader',
options: { modules: true }
}
}]
}
}
```
```css
/* app.css */
.hide {
display: none;
}
```
```js
// app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './app.css';
// This works as usual
ReactDOM.render(
,
document.getElementById('app')
);
// This results in a warning or error
ReactDOM.render(
,
document.getElementById('app')
);
```
The browser console will warn the developer:
```
Warning: CSS class `.thisClassNameObviouslyDoesNotExist` not found in `/Users/you/path/to/app.css`.
```
## Options
- **`fail: boolean = false`** When false, accessing undefined class names warns with `console.error`. When true, attempting to access an undefined class name throws an error.
## Browser support
This loader relies on [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), which have good [support](http://caniuse.com/#search=proxy) in modern browsers. If Proxies are unavailable, the loader will emit a warning in the browser console and then do nothing.