Package Exports

react-prefix-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-prefix-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-prefix-loader

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

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

Ignores:

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

Caveats:

searches for 'export default ComponentName' construction to find component name
prefixes only className fields that are set as string

Installation

npm install react-prefix-loader

License

MIT

Recommendation

Use it with postcss-filename-prefix for css files