initial commit

Author: vmakhaev

.babelrc

@@ -0,0 +1,3 @@
+{
+  "stage": 0
+}

.gitignore

@@ -0,0 +1,3 @@
+lib
+node_modules
+npm-debug.log

.npmignore

@@ -0,0 +1 @@
+src

README.md

@@ -0,0 +1,53 @@
+# react-prefix-loader
+
+A Webpack loader that prefixes classes in React components  
+The idea is to isolate styles in framework components
+
+[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
+
+MyComponent.jsx
+
+```jsx
+class MyComponent extends React.Component {
+  render () {
+    return <div className='myclass'></div>
+  }
+}
+
+export default MyComponent
+```
+
+Output:
+
+```jsx
+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](https://github.com/vmakhaev/postcss-filename-prefix) for css files

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "react-prefix-loader",
+  "version": "0.1.0",
+  "description": "Webpack loader that prefixes classes in React components",
+  "main": "lib/index.js",
+  "scripts": {
+    "prepublish": "babel --optional runtime src --out-dir lib",
+    "postpublish": "rm -rf lib",
+    "lint": "standard | snazzy",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": "vmakhaev/react-prefix-loader",
+  "keywords": [
+    "react",
+    "webpack"
+  ],
+  "author": "Vladimir Makhaev",
+  "license": "MIT",
+  "devDependencies": {
+    "babel": "^5.8.34",
+    "babel-eslint": "^4.1.5",
+    "snazzy": "^2.0.1",
+    "standard": "^5.4.1"
+  },
+  "standard": {
+    "globals": [
+      "assert",
+      "describe",
+      "it",
+      "before",
+      "beforeEach",
+      "after",
+      "afterEach"
+    ],
+    "parser": "babel-eslint"
+  }
+}

src/index.js

@@ -0,0 +1,32 @@
+const exportDefaultContainerRegex = /export default .*\(([a-zA-Z]*)/
+const exportDefaultRegex = /export default ([a-zA-Z]*)/
+const classNameRegex = /className=\'([a-zA-Z\-\s]*)\'/g
+const needPrefixRegex = /^[a-z]/
+
+function prefix (className, name) {
+  if (needPrefixRegex.test(className)) return `${name}-${className}`
+
+  return className
+}
+
+function loader (source, inputSourceMap) {
+  let matches = exportDefaultContainerRegex.exec(source) ||
+    exportDefaultRegex.exec(source)
+
+  if (matches) {
+    let name = matches[1]
+
+    source = source.replace(classNameRegex, (text, classNames) => {
+      let prefixedClassNames = classNames
+        .split(' ')
+        .map((className) => prefix(className, name))
+        .join(' ')
+
+      return `className='${prefixedClassNames}'`
+    })
+  }
+
+  this.callback(null, source, inputSourceMap)
+}
+
+export default loader