css-object-loader

css-object-loader

Webpack loader to load CSS into an object. The object has keys that are selectors from the CSS file; the value of each selector are the rules converted to camelCase properties (see Style Object Properties). This object is compatible with React Inline Styles.

Install

npm install -D css-object-loader

Usage:

Documentation: Using loaders

Create an entry to load .css files in your webpack.config:

module: {
  loaders: [{
      test: /\.css$/,
      loaders: [ 'css-object' ],
      exclude: /node_modules/
    }
  ]
}

Requiring CSS rules:

+ rules.css
p {
  font-size: 14px;
}
h1 {
  text-indent: 20px;
}
.centered {
  width: 100%;
  margin: 0 auto;
}

var selectors = require('./rules.css');
console.log(selectors);
// Output:
// selectors: {
//    p: {
//      fontSize: '14px'
//    },
//    h1: {
//      textIndent: '20px'
//    },
//    '.centered': {
//      width: '100%',
//      margin: '0 auto'
//    }
// }

Now you can use those rules however you like:

React

const MyComponent = ({children}) => (
  <div style={selectors['.centered']}>{children}</div>
);

DOM

function applyStylesToNode (styles, node) {
  Object.keys(styles).forEach(key => { node.style[key] = styles[key] });
}
applyStylesToNode(selectors['.centered'], document.querySelector('#some-div'));

Use Case

1. You want to inline all your styles, but you still want to write your CSS into CSS files.
2. You want to use a CSS preprocessor to write your inline styles.

Multiple Loaders

Use with other CSS loaders

If you are already using a different CSS related loader like css-loader or style-loader, it is easy to use css-object-loader on a single file. For example:

// Use the loaders from your webpack config:
import styles from './styles.css';
// Explicity use `css-object-loader`:
import styleObject from '!css-object!./styles.css';
// With SASS:
import sassStyleObject from '!css-object!sass!./styles.scss';

This allows you to introduce css-object-loader into your projects without making breaking changes.

NOTE: If you import a CSS file with :local(...) selectors, the selector object will include the :local(...) string.

Preprocessors

If you want to use css-object-loader with LESS or SASS, make sure the preprocessor loader runs before css-object-loader. Webpack evaluates loaders right to left. Example config for SASS:

module: {
  loaders: [{
    test: /\.scss$/,
    loaders: [ 'css-object', 'sass' ],
    exclude: /node_modules/
  }]
}

Limitations

This library is currently a proof of concept and not intended for production usage. This loader should function with other CSS preprocessors as long as they run before css-object-loader. The underlying concept is still a work in progress, if you have any suggestions please feel free to open an issue.

Implementation

This library uses reworkcss/css to parse CSS to an AST. The AST is then traversed to find rule declarations and populate them into an object. Media queries are ignored.

Contributing

Questions, criticism and pull requests are always welcome.