Add webpack loader

README.md

@@ -96,6 +96,36 @@ but templates were used in an attempt to make it easier to contribute to this pr
 
 See [`docs/lab-json.md`](docs/lab-json.md)
 
+## webpack-loader
+
+The lab-loader imports a `lab.json` file and converts it into [styled-components][sc] for use in webpack.
+
+```js
+// example webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /lab\.json$/,
+        loader: '@compositor/lab/loader'
+      }
+    ]
+  }
+}
+```
+
+```js
+// example usage
+import { Heading, Button } from './lab.json'
+
+const example = (
+  <div>
+    <Heading>Hello</Heading>
+    <Button>Beep</Button>
+  </div>
+)
+```
+
 ## Roadmap
 
 - Vue.js export (currently in alpha)

lib/loader.js

@@ -0,0 +1,51 @@
+// lab webpack loader
+// currently only supports styled-components
+const { getOptions } = require('loader-utils')
+const lab = require('./index')
+
+const template = ({
+  name,
+  type,
+  propsString,
+  styleString,
+  system = []
+}) => (`
+export const ${name} = styled(${type})([], props => (${styleString}),
+  space,
+  fontSize,
+  width,
+  color,
+  ${system.map(name => `system.${name}`)}
+)
+${name}.defaultProps = ${propsString}
+${name}.displayName = '${name}'
+`)
+
+module.exports = function (src) {
+  const callback = this.async()
+  const opts = getOptions(this)
+
+  const config = JSON.parse(src)
+  const modules = lab(config, {
+    harmony: true,
+    template
+  })
+    .filter(m => m.name !== 'index')
+  const moduleNames = modules.map(m => m.name)
+
+  const code = `
+    import styled from 'styled-components'
+    import system, {
+      space,
+      fontSize,
+      width,
+      color
+    } from 'styled-system'
+    ${modules.map(m => m.module).join('\n\n')}
+    export default {
+      ${moduleNames.join(',\n')}
+    }
+  `
+
+  callback(null, code)
+}

loader.js

@@ -0,0 +1 @@
+module.exports = require('./lib/loader')