React-prefix-loader NPM

react-prefix-loader

A Webpack loader that prefixes classes in React components
The idea is to isolate styles in framework components

Simple example

MyComponent.jsx

class MyComponent extends React.Component {
  render () {
    return <div className='myclass'></div>
  }
}

export default MyComponent

Output:

class MyComponent extends React.Component {
  render () {
    return <div className='MyComponent-myclass'></div>
  }
}

export default MyComponent

Complex example

MyComponent.jsx

@connect(state => ({foo: state.foo}))
export default class MyComponent extends React.Component {
  render () {
    return (
      <div className={c(`root ${this.props.className} -hello`, {
        '-selected': true
      })}
        <div className='title'></div>
        <table className='-wide'></table>
        <div className='Avatar'></div>
        <div className={classnames('left', {})}></div>
        <div className={classnames('Topbar-left', {})}></div>
        <div className={c("body " + this.props.className)}></div>
        <div className='title'></div>
        <div className={"body " + this.props.className}></div>
      </div>
    )
  }
}

Output:

@connect(state => ({foo: state.foo}))
export default class MyComponent extends React.Component {
  render () {
    return (
      <div className={c(`MyComponent ${this.props.className} -hello`, {
        '-selected': true
      })}
        <div className='MyComponent-title'>Title</div>
        <table className='-wide'></table>
        <div className='Avatar'></div>
        <div className={classnames('MyComponent-left', {})}></div>
        <div className={classnames('Topbar-left', {})}></div>
        <div className={c("MyComponent-body " + this.props.className)}></div>
        <div className='MyComponent-title'></div>
        <div className={"MyComponent-body " + this.props.className}></div>
      </div>
    )
  }
}

Features:

lower-case classes are prefixed with the ComponentName:
- title --> ComponentName-title
- content --> ComponentName-content
- leftListItem --> ComponentName-leftListItem
root is a treated as a special class name and will be replaces with the ComponentName:
- root --> ComponentName

supports classNames which have the value of either a string or a {} binding:

className='title'
className={`title ${this.props.className}`}
className={"title " + this.props.className}

within {} binding it also does the replacement if the classnames function is called (as classnames or as c):

className={c('title', {'-active': true})}
className={classnames(`title ${this.props.className}`, {
  '-active': true
}}

Ignores:

filenames that starts from not capital letter
modifiers (classes that starts from hyphen)
classes that starts from capital letter

Caveats:

the class name to replace be the very first class name within the className attribute.
For example, in className='Form item' the item won't get prefixed:
- className='Form item' --> className='Form item'
If you want it to be prefixed, just place it first:
- className='item Form' --> className='MyComponent-item Form'
searches for export default ComponentName or export default class ComponentName construction to find component name