vmakhaev/react-prefix-loader

Webpack loader that prefixes classes in React components

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

Installation

npm install react-prefix-loader

License

MIT

Recommendation

• Use it with postcss-filename-prefix for css files

react-prefix-loader's Issues

Module Build Failed Error Webpack 4

Hello,

Im trying to use this loader in Webpack 4 and I'm getting module build failed error.

This is happening due to a TypeError in the loader which says:

Cannot read property 'reactPrefixLoader' of undefined.

When I look at the code, I think it might be that due to the changes in webpack 4. It is for some reason not getting the this.options correctly.

Im trying to understand how to set this up correctly into my project.

Kindly help me out.

Thank you