Skip to content
This repository has been archived by the owner on Dec 28, 2020. It is now read-only.
/ radium-loader Public archive

A webpack loader that transforms a stylesheet into a Radium-compatible JS object

Notifications You must be signed in to change notification settings

dminkovsky/radium-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

webpack loader that transforms a stylesheet into a Radium-compatible JS object

Installation

$ npm install radium-loader --save-dev

Usage

Chain after css-loader:

import React from 'react';
import { Style } from 'radium';
import radiumObject from 'radium!css!./stylesheet.css';

export default React.createClass({
    render() {
        return (
            <Style rules={ radiumObject } />
        );
    }
});

Motivation

Everyone loves using inline styles. But not all React components support them.

If you are using a third party component that does not support inline styles you can either:

  • Add styles for the third party component to a global stylesheet.
  • Use Radium's Style component.

The first option adds more rules to your global styles and separates those rules from the component you are styling. That's not very cool.

The second option lets you write CSS rules for your third party component right where that component is being used. But if you're copy-and-pasting rules from native CSS, you then have to rewrite them in the Radium-compatible JS object format. css-to-radium helps, but is a command line utility that must then somehow be incorporated into your build process.

That's where this module comes in. radium-loader wraps css-to-radium and provides its functionality as a webpack loader, enabling you to require() a stylesheet and get a Radium-compatible JS object in return.

Testing

npm test

Observe there are no errors in the console.

License

MIT

About

A webpack loader that transforms a stylesheet into a Radium-compatible JS object

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published