{"_id":"sass-extract-js","_rev":"4-d355c989258a17db85bcf77040d7fc78","name":"sass-extract-js","description":"Plugin for sass-extract to convert Sass variables into a plain JS object","dist-tags":{"latest":"0.4.0"},"versions":{"0.1.0":{"name":"sass-extract-js","version":"0.1.0","description":"Plugin for sass-extract to convert Sass variables into a plain JS object","keywords":["sass","sass-extract","js","styled-components","theme","css-in-js"],"engines":{"node":">=6"},"main":"index.js","scripts":{"lint":"eslint lib test","test":"jest"},"repository":{"type":"git","url":"git+ssh://git@github.com/adamgruber/sass-extract-js.git"},"bugs":{"url":"https://github.com/adamgruber/sass-extract-js/issues"},"author":{"name":"Adam Gruber","email":"adamgruber@me.com"},"license":"MIT","dependencies":{"camel-case":"^3.0.0"},"devDependencies":{"eslint":"^3.19.0 || ^4.5.0","eslint-config-airbnb-base":"^11.3.2","eslint-plugin-import":"^2.7.0","jest":"^20.0.4","node-sass":"^4.5.3","sass-extract":"^1.0.1"},"peerDependencies":{"sass-extract":"^1.0.1"},"jest":{"collectCoverage":true,"coverageDirectory":"./coverage","coverageReporters":["text","lcov"]},"gitHead":"f525f8ac99c9aeea96a515db8fc23bce427525e8","homepage":"https://github.com/adamgruber/sass-extract-js#readme","_id":"sass-extract-js@0.1.0","_npmVersion":"5.4.1","_nodeVersion":"6.10.2","_npmUser":{"name":"adamgruber","email":"talknmime@gmail.com"},"dist":{"integrity":"sha512-S6hlK5EfIwn8csZmCNOPrjZebGzBZJrHZUDX5WM5uMNLLiXaaqAvFMUYpE1d+32KGhc3XQF2BPvLqbkYnqz99w==","shasum":"714465f80781b4f03d2932516358c4eea4fcf30d","tarball":"https://registry.npmjs.org/sass-extract-js/-/sass-extract-js-0.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAYCmeaXq5eyI188rwR73yVH8n6uWQoQpuLnVTgR22hyAiBIMqVa2y0+KhtzxaDm2pzKiPUjkVSPUaFtor0O3+pmdQ=="}]},"maintainers":[{"name":"adamgruber","email":"talknmime@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sass-extract-js-0.1.0.tgz_1505101314095_0.945594581309706"},"directories":{}},"0.2.0":{"name":"sass-extract-js","version":"0.2.0","description":"Plugin for sass-extract to convert Sass variables into a plain JS object","keywords":["sass","sass-extract","js","styled-components","theme","css-in-js"],"engines":{"node":">=6"},"main":"sass-extract-js.js","files":["lib"],"scripts":{"lint":"eslint lib test sass-extract-js.js","tdd":"jest --watch","test":"jest"},"repository":{"type":"git","url":"git+ssh://git@github.com/adamgruber/sass-extract-js.git"},"bugs":{"url":"https://github.com/adamgruber/sass-extract-js/issues"},"author":{"name":"Adam Gruber","email":"adamgruber@me.com"},"license":"MIT","dependencies":{"camel-case":"^3.0.0"},"devDependencies":{"eslint":"^3.19.0 || ^4.5.0","eslint-config-airbnb-base":"^11.3.2","eslint-plugin-import":"^2.7.0","jest":"^20.0.4","node-sass":"^4.5.3","sass-extract":"^1.0.1"},"peerDependencies":{"sass-extract":"^1.0.1"},"jest":{"collectCoverage":true,"coverageDirectory":"./coverage","coverageReporters":["text","lcov"]},"gitHead":"1ca651f86807f97e8f2763b1dbb979aebbf3f0bb","homepage":"https://github.com/adamgruber/sass-extract-js#readme","_id":"sass-extract-js@0.2.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"adamgruber","email":"talknmime@gmail.com"},"dist":{"integrity":"sha512-CuBzP1hj/mNEyGouAjgnDwcAmrbBSZDwA8dznDt1fwsmt8TD3cSTFipOhwNS49LHwxPCkxy7uMe8xa+nI2J4iQ==","shasum":"816fd56131fc8c68f0d5994f7806c17ecc472c31","tarball":"https://registry.npmjs.org/sass-extract-js/-/sass-extract-js-0.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+dd8P4JEdKNaF4dKjmTb1zn83SlqpCJTbzEhTcm6eQAiBGjqM6+n3LQRc59s6CipSob04aXdWiv0NaxnmS+6Bm9w=="}]},"maintainers":[{"name":"adamgruber","email":"talknmime@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sass-extract-js-0.2.0.tgz_1512074023452_0.9220471687149256"},"directories":{}},"0.3.0":{"name":"sass-extract-js","version":"0.3.0","description":"Plugin for sass-extract to convert Sass variables into a plain JS object","keywords":["sass","sass-extract","js","styled-components","theme","css-in-js"],"engines":{"node":">=6"},"main":"sass-extract-js.js","files":["lib"],"scripts":{"lint":"eslint lib test sass-extract-js.js","tdd":"jest --watch","test":"jest"},"repository":{"type":"git","url":"git+ssh://git@github.com/adamgruber/sass-extract-js.git"},"bugs":{"url":"https://github.com/adamgruber/sass-extract-js/issues"},"author":{"name":"Adam Gruber","email":"adamgruber@me.com"},"license":"MIT","dependencies":{"camel-case":"^3.0.0"},"devDependencies":{"eslint":"^3.19.0 || ^4.5.0","eslint-config-airbnb-base":"^11.3.2","eslint-plugin-import":"^2.7.0","jest":"^20.0.4","node-sass":"^4.5.3","sass-extract":"^2.0.0"},"peerDependencies":{"sass-extract":"^1.0.1"},"jest":{"collectCoverage":true,"coverageDirectory":"./coverage","coverageReporters":["text","lcov"]},"gitHead":"37c2db56712c9a60a309e2b8852eef0ccd331323","homepage":"https://github.com/adamgruber/sass-extract-js#readme","_id":"sass-extract-js@0.3.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"adamgruber","email":"talknmime@gmail.com"},"dist":{"integrity":"sha512-JYyx28EgoPjduSRu/Xyv7+ec/D3CrWiLujNOawYea1YQCBPcgNk12sKxMYkgHeoRGhsIOfu1MXsY6zGcm02mrA==","shasum":"3fc5be20d84ce55c29a8b089a49254fbfb69a2a3","tarball":"https://registry.npmjs.org/sass-extract-js/-/sass-extract-js-0.3.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH84ykWqD6HMEst+th0u4dHLgPaH675SEpmCHS0638ekAiEA3NhFQLekgPUncKat55E1bwDKO/SAPSI7LUj2yU7I0Dg="}]},"maintainers":[{"name":"adamgruber","email":"talknmime@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sass-extract-js-0.3.0.tgz_1512500167930_0.1332488611806184"},"directories":{}},"0.4.0":{"name":"sass-extract-js","version":"0.4.0","description":"Plugin for sass-extract to convert Sass variables into a plain JS object","keywords":["sass","sass-extract","js","styled-components","theme","css-in-js"],"engines":{"node":">=6"},"main":"sass-extract-js.js","files":["lib"],"scripts":{"lint":"eslint lib test sass-extract-js.js","tdd":"jest --watch","test":"jest"},"repository":{"type":"git","url":"git+ssh://git@github.com/adamgruber/sass-extract-js.git"},"bugs":{"url":"https://github.com/adamgruber/sass-extract-js/issues"},"author":{"name":"Adam Gruber","email":"adamgruber@me.com"},"license":"MIT","dependencies":{"camel-case":"^3.0.0"},"devDependencies":{"eslint":"^5.2.0","eslint-config-airbnb-base":"^13.0.0","eslint-plugin-import":"^2.13.0","jest":"^23.4.1","node-sass":"^4.9.2","sass-extract":"^2.1.0"},"peerDependencies":{"sass-extract":"*"},"jest":{"collectCoverage":true,"coverageDirectory":"./coverage","coverageReporters":["text","lcov"]},"gitHead":"7261c5414fc86609d8d3228a6b66e77de1488616","homepage":"https://github.com/adamgruber/sass-extract-js#readme","_id":"sass-extract-js@0.4.0","_npmVersion":"6.2.0","_nodeVersion":"8.11.1","_npmUser":{"name":"adamgruber","email":"talknmime@gmail.com"},"dist":{"integrity":"sha512-iCeT4yARgI1EE+KkjKQEuGbNiN7UPm9ObD6dlFFFUgoRQzDHfP2faK+8aKn4fvzznSa1B+R2EFJw1YzCYUavSw==","shasum":"0578dc8459b9844936794d9bacfa83d4c8d7dbf8","tarball":"https://registry.npmjs.org/sass-extract-js/-/sass-extract-js-0.4.0.tgz","fileCount":7,"unpackedSize":17009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbVg09CRA9TVsSAnZWagAAlYUQAKD6BjNvjyot1cx4ve0U\nB7/aLTXdjQ7jWAb0s1q/aDUWOC0xUeOtdVN8j84EJWBnV1thYHqNdlhE+XoG\n3bv1aIbveAIkHOWmeDEX5ditIg7y5bMNNaxuxgcruUGIUzy2bFF4fJ8XvGx4\nn/BXFW2OLJNRa11NaVC9kX5BiRA1ZhAz/oG5LGWJPPWwE9hyqFWpUXxXB9ZM\nSELsj2kCLgLTVz+kBIhbja5WX3wHd7ZU0ZySorYkMajyxj94HrALcd0HsL5O\nlveysDhW/hmTUpMezv6RPBRM+r0Xj4ekfgyy+/8j2mX1Sg1MuEjgp+Ivvj4/\nPzJred6DAm5u0R071jJoTzIcGyEfETXcK6UzOX9Elynb7XbS7Aq3qaiu/SXq\nw76eGve4JarOyx7TgiK+7CJ2otCE6SzVssxKIOKyCHSP9BsbHUX6sHaZAl22\nfaTV/gVL3t1z0P5Y076JQCztlSEQnR5DKMJbvdPTfH8Utf+VUhLgE5OFSj6a\nfhzubntvXq3TWz4sIuLXXMbb4J52BDnALud4/vvSaKrNcEddaZckwZVMMV07\nkpzzbGzqCMYOU4GcG3aBRlWl9GDhtIzcCwa7Vu0y4DagUJUZIA5+AfJwbCzd\n7luW2SkXT/tGr5D777GimtyhltR9haMHzRXvo4FuwrZa2lB2RiOmF6mX260d\nxmBb\r\n=+FmV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFsOLshCYzf0Kp6lAuzqqlPP6Lc4ZTejgU1k64YW+ZoxAiEA8fjiXoGqrb7XhawI3aE1NqgQFGjU+N8wyu0BxDMwDog="}]},"maintainers":[{"name":"adamgruber","email":"talknmime@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sass-extract-js_0.4.0_1532366141546_0.6523322005135372"},"_hasShrinkwrap":false}},"readme":"sass-extract-js\n---\n\n[![npm](https://img.shields.io/npm/v/sass-extract-js.svg?style=flat-square)](http://www.npmjs.com/package/sass-extract-js)\n\nPlugin for [sass-extract][sass-extract] to convert Sass global variables into a plain JS object.\n\n## Huh? Why?\n\nI work on a team that uses Sass. We've got a shared variables file that gets referenced throughout our styleguide and in our components. I wanted to start using [styled-components][] in some projects and wanted to keep things consistent but I didn't want to have to copy our Sass variables over. Using this plugin with [sass-extract][sass-extract], I can simply extract the global variables from our Sass stylesheet and they will be converted into a JS object that gets passed down to my components via styled-components' [`<ThemeProvider>`][theming].\n\n## Cool! How do I get it?\n\nYou'll need to install [sass-extract][sass-extract], [sass-extract-loader][sass-extract-loader], [node-sass][node-sass], and this plugin.\n\n```sh\n$ yarn add sass-extract sass-extract-loader node-sass sass-extract-js\n```\n\n*(npm install works too)*\n\n## Nice! How do I use it?\n\nAssuming you're using webpack, you'll need to use sass-extract-loader to require/transform your sass variables file. Then you can pass the styles as a theme via a ThemeProvider component like this:\n\n```jsx\n// Require your sass variables using sass-extract-loader and specify the plugin\nconst theme = require('sass-extract-loader?{\"plugins\":[\"sass-extract-js\"]}!./path/to/vars.scss');\n\n// Pass the vars into your ThemeProvider component\nrender(\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>\n);\n```\n\nThen use themes in your styled components:\n\n```js\nimport styled from 'styled-components';\n\nconst Button = styled.button`\n  background-color: ${p => p.theme.primary}\n`;\n\n```\n\n## Sweet! What does the output look like?\n\nGiven a Sass file with some global variable declarations:\n\n```sass\n$primary: rgb(255, 202, 77);\n$seondary: #1A93C8;\n$primary-light: lighten($primary, 20%);\n$base-padding: 10px;\n$base-margin: 0 1em;\n$base-border: 1px solid #ccc;\n$font-family-sans: 'Helvetica', 'Arial', sans-serif;\n$base-font-size: 16px;\n$line-height: $base-font-size * 1.8;\n```\n\nIt will yield the following object:\n\n```js\n{\n  primary: 'rgb(255, 202, 77)',\n  seondary: 'rgb(26, 147, 200)',\n  primaryLight: 'rgb(255, 232, 179)',\n  basePadding: '10px',\n  baseMargin: '0 1em',\n  baseBorder: '1px solid rgb(204, 204, 204)',\n  fontFamilySans: '\\'Helvetica\\', \\'Arial\\', sans-serif',\n  baseFontSize: '16px',\n  lineHeight: '28.8px'\n}\n```\n\n## Right on! But I need options.\n\nEverybody loves options and we've got one:\n\nOption Name | Default | Description\n:---------- | :------ | :----------\n`camelCase` | true    | Should SASS variable names be converted to camelCase\n\n### Options Usage\n#### sass-extract Plugin Options\nAs of sass-extract 2.0.0, options can be passed to plugins. Here's how:\n\n```js\nconst rendered = sassExtract.renderSync({\n  file: './path/to/vars.scss'\n}, {\n  plugins: [{ plugin: 'sass-extract-js', options: { camelCase: false } }]\n});\n```\n\n#### Plugin Instance\n\nYou can also create a plugin instance with your desired options and pass the instance directly inside the plugins array.\n\n```js\n// Import the plugin factory directly\nimport createSassExtractJsPlugin from 'sass-extract-js/lib/plugin';\n\n// Create a plugin instance, passing in your options\nconst sassExtractJsPlugin = createSassExtractJsPlugin({ camelCase: false });\n\n// Call the `renderSync` function with the path to your Sass file\n// and pass the plugin instance in the plugins array\nconst rendered = sassExtract.renderSync({\n  file: './path/to/vars.scss'\n}, {\n  plugins: [sassExtractJsPlugin]\n});\n\n```\n\n#### Using `transformVars` directly\n\nIf, for some reason, you don't want to use this package as a sass-extract plugin, you can import the `transformVars` function directly and use it. This is the main function that gets called in sass-extract's plugin pipeline. It expects as its input an object with extracted SASS variables, as generated by sass-extract. The function also accepts an options object.\n\n```js\n// Import the transformVars method directly\nimport transformVars from 'sass-extract-js/lib/transformVars';\n\n// Call the function, passing in your options\nconst transformed = transformVars(objectWithExtractedStyles, { camelCase: false });\n```\n\n\n## Wait! What if I don't use styled-components?\n\nNo problem! I made this so I could use the extracted JS object as a theme but it's not specific to [styled-components][styled-components]. It should work the same with [glamorous][glamorous] too. Really you can use this plugin for any scenario where you need to convert Sass vars to JS.\n\n## Help! It's not working for me.\n\nThis project is open source. I've tried to make sure it works for a lot of use cases (read: mine) but if I missed yours, feel free to [open an issue][issues]. Better yet, [submit a PR][pr]! Seriously, any feedback and help is welcome.\n\n## License\n\nMIT\n\n[issues]: https://github.com/adamgruber/sass-extract-js/issues\n[pr]: https://github.com/adamgruber/sass-extract-js/pulls\n[styled-components]: https://www.styled-components.com/\n[theming]: https://www.styled-components.com/docs/advanced#theming\n[node-sass]: https://github.com/sass/node-sass#options\n[sass-extract]: https://github.com/jgranstrom/sass-extract\n[sass-extract-loader]: https://github.com/jgranstrom/sass-extract-loader\n[glamorous]: https://github.com/paypal/glamorous\n","maintainers":[{"name":"adamgruber","email":"talknmime@gmail.com"}],"time":{"modified":"2022-05-17T03:35:47.988Z","created":"2017-09-11T03:41:55.200Z","0.1.0":"2017-09-11T03:41:55.200Z","0.2.0":"2017-11-30T20:33:44.310Z","0.3.0":"2017-12-05T18:56:08.049Z","0.4.0":"2018-07-23T17:15:41.618Z"},"homepage":"https://github.com/adamgruber/sass-extract-js#readme","keywords":["sass","sass-extract","js","styled-components","theme","css-in-js"],"repository":{"type":"git","url":"git+ssh://git@github.com/adamgruber/sass-extract-js.git"},"author":{"name":"Adam Gruber","email":"adamgruber@me.com"},"bugs":{"url":"https://github.com/adamgruber/sass-extract-js/issues"},"license":"MIT","readmeFilename":"README.md"}