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
Component { return <div ='myclass'></div> }
Output:
Component { return <div ='MyComponent-myclass'></div> }
Complex example
MyComponent.jsx
@Component { return <div = < ='title'></div> <table ='-wide'></table> <div ='Avatar'></div> <div =></div> <div =></div> <div =></div> <div ='title'></div> <div =></div> </div> }
Output:
@Component { return <div = < ='MyComponent-title'>Title</div> <table ='-wide'></table> <div ='Avatar'></div> <div =></div> <div =></div> <div =></div> <div ='MyComponent-title'></div> <div =></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 theComponentName
:root
-->ComponentName
- supports
className
s which have the value of either a string or a{}
binding:className='title'className=`title `className="title " + thispropsclassName - within
{}
binding it also does the replacement if theclassnames
function is called (asclassnames
or asc
):className=className=
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'
theitem
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
orexport 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