{"maintainers":[{"name":"youzan-lc","email":"lichen@youzan.com"}],"dist-tags":{"latest":"1.0.0"},"author":{"name":"Li Chen","email":"lichen@youzan.com"},"description":"A [postcss](http://postcss.org/) plugin to override variables specified in options. An unobtrusive way to create themes.","readme":"# postcss-theme-variables\n\nA [postcss](http://postcss.org/) plugin to override variables specified in options. An unobtrusive way to create themes.\n\n\n## Usage\n\n```shell\nyarn add postcss postcss-theme-variables --dev\n\n{\n  plugins: [require('postcss-theme-variables')(/* options */)]\n}\n\n# And in your postcss source files, use variables as you wish.\n```\n\n⚠️ Plugin orders are important in postcss, make sure this plugin comes after any `import` related plugins(like `postcss-easy-import`) and before any other plugins(like `precss`).\n\n#### Example Usage with `postcss-easy-import` and `precss`\n\n```js\n// PostCSS config\nconst themeVariables = require('postcss-theme-variables');\nconst easyImport = require('postcss-easy-import');\nconst precss = require('precss');\n\nconst vars = {\n  'padding-size': '10px'\n};\n\npostcss([\n  easyImport({ prefix: '_' }),\n  themeVariables({ vars, prefix: '$' }),\n\n  // Imports are inlined by postcss-easy-import so precss won't see them\n  precss()\n])\n.process(...);\n```\n\n```css\n/* _colors.css */\n$padding-size: 5px;\n\n/* in.css */\n@import './_colors.css';\n\nul li {\n  padding: $padding-size;\n}\n```\n\n```css\n/* out.css */\n\nul li {\n  padding: 10px;\n}\n```\n\n#### Example Usage with `precss`\n\n```js\n// PostCSS config\nconst themeVariables = require('postcss-theme-variables');\nconst precss = require('precss');\n\nconst vars = {\n  'padding-size': '10px'\n};\n\npostcss([\n  themeVariables({ vars, prefix: '$' }),\n  precss({\n    import: {\n      // This is required to process any variables inside dependencies\n      plugins: [themeVariables({ vars })]\n    }\n  })\n])\n.process(...);\n```\n\n```css\n/* in.css */\n$padding-size: 5px;\n\nul li {\n  padding: $padding-size;\n}\n```\n\n```css\n/* out.css */\n\nul li {\n  padding: 10px;\n}\n```\n\n## Options\n\n| Option | Type | Description | Default Value | Required |\n|------|------|------|--------|--------|\n| vars | `Object` | Variables to override | `{}` | No |\n| prefix | `string` | Variable prefix, it's `'$'` if you use SCSS. You can omit prefix in vars map. | `''` | No |\n\n## License\n\nMIT license.\n","users":{},"license":"MIT","versions":{"1.0.0":{"name":"postcss-theme-variables","version":"1.0.0","author":{"name":"Li Chen","email":"lichen@youzan.com"},"main":"lib/index.js","license":"MIT","scripts":{"test":"rm -f tests/failure*.css && node tests/runner.js","build":"cross-env NODE_ENV=production babel src -d lib","prepublish":"yarn build"},"devDependencies":{"babel-preset-env":"^1.6.0","cross-env":"^5.0.5","postcss-easy-import":"^3.0.0","precss":"^2.0.0"},"dependencies":{"babel-cli":"^6.26.0","lodash":"^4.17.4","postcss":"^6.0.11"},"description":"A [postcss](http://postcss.org/) plugin to override variables specified in options. An unobtrusive way to create themes.","_id":"postcss-theme-variables@1.0.0","_shasum":"aac76da40f7e1069e194d86fabcce701f4dd70f1","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.0","_npmUser":{"name":"youzan-lc","email":"lichen@youzan.com"},"dist":{"shasum":"aac76da40f7e1069e194d86fabcce701f4dd70f1","size":23706,"noattachment":false,"tarball":"http://tools.bpmhome.cn:8082/nexus/repository/npm-lc/postcss-theme-variables/-/postcss-theme-variables-1.0.0.tgz"},"maintainers":[{"name":"youzan-lc","email":"lichen@youzan.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-theme-variables-1.0.0.tgz_1505875335391_0.7380993997212499"},"directories":{},"publish_time":1505875335500,"_hasShrinkwrap":false,"_cnpm_publish_time":1505875335500}},"name":"postcss-theme-variables","time":{"modified":"2018-09-14T07:33:31.473Z","created":"2017-09-20T02:42:15.500Z","1.0.0":"2017-09-20T02:42:15.500Z"},"readmeFilename":"README.md"}