diff --git a/README.md b/README.md index 383fe8d..8849bfb 100644 --- a/README.md +++ b/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 = ( +
+ Hello + +
+) +``` + ## Roadmap - Vue.js export (currently in alpha) diff --git a/lib/loader.js b/lib/loader.js new file mode 100644 index 0000000..60563a2 --- /dev/null +++ b/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) +} diff --git a/loader.js b/loader.js new file mode 100644 index 0000000..18abae3 --- /dev/null +++ b/loader.js @@ -0,0 +1 @@ +module.exports = require('./lib/loader')