react-prefix-loader
Webpack loader that prefixes classes in React components
Last updated 3 years ago by vmakhaev .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-prefix-loader 
SYNC missed versions from official npm registry.

react-prefix-loader

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

js-standard-style

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

Current Tags

  • 1.0.2                                ...           latest (3 years ago)

6 Versions

  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.0                                ...           6 years ago
  • 0.1.0                                ...           6 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (14)
Dependents (1)

Copyright 2014 - 2021 © npmmirror.com |