Skip to content

pl12133/css-object-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm versionBuild StatusCoverage Status

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.

About

Webpack loader to load CSS into a camelCased object

Resources

Stars

Watchers

Forks

Packages

No packages published