styled component for react & style-loader/usable
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scripts
src
.gitignore
.travis.yml
LICENSE
README.md
package.json
testem.yml
webpack.config.js
webpack.test.config.js
webpack.test.js

README.md

react-styled

ES7 decorator for dynamic stylesheet usage w/ webpack

Build Status

install

$ npm install bloody-react-styled --save-dev

require

import styled from "bloody-react-styled"

API

@styled(styles) class

styled is a ES7 decorator that applies useable style only if at least one instance of the component it is attached to is in mounted, and removes it when there are no more instances.

how to

first, install style-loader, css-loader and possibility the loader of your choice for a pre/post-processor.

$ npm install --save-dev style-loader css-loader

to configure webpack for that, use in your webpack.config.js :

const config = {
  // ...
  module : {
    loaders : [
      // ...
      {
        test : /\.css$/,
        loaders: [
          // use the useable to only use the stylesheet when necessary
          "style/useable",
          "css",
          // example of css processor you might want to use
          "cssnext",
        ],
      },
    ],
  },
  // ...
}

then you can do

import React, {Component} from "react"
import styled from "bloody-react-styled"

import styles from "./styles.css"

@styled(styles)
class MyComponent extends Component {

  render() {
    return (
      <div className="MyComponent">
        will be styled!
      </div>
    )
  }
}

export default MyComponent

local stylesheets with css-loader

css

:local .default {
  padding: 1rem;
}

js

import React, {Component} from "react"
import styled from "bloody-react-styled"

import styles from "./styles.css"

@styled(styles)
class MyComponent extends Component {

  render() {
    const {locals} = styles
    return (
      <div className={locals.default}>
        will be styled!
      </div>
    )
  }
}

export default MyComponent

license