{"id":16321822,"url":"https://github.com/adamgruber/sass-extract-js","last_synced_at":"2025-09-11T02:37:25.258Z","repository":{"id":59291569,"uuid":"103079528","full_name":"adamgruber/sass-extract-js","owner":"adamgruber","description":"Plugin for sass-extract to convert Sass variables into a plain JS object","archived":false,"fork":false,"pushed_at":"2018-09-11T10:56:37.000Z","size":72,"stargazers_count":110,"open_issues_count":4,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T08:21:13.274Z","etag":null,"topics":["plugin","sass","sass-extract","styled-components"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adamgruber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-11T02:15:57.000Z","updated_at":"2024-02-05T01:31:45.000Z","dependencies_parsed_at":"2022-09-14T10:52:03.692Z","dependency_job_id":null,"html_url":"https://github.com/adamgruber/sass-extract-js","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamgruber%2Fsass-extract-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamgruber%2Fsass-extract-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamgruber%2Fsass-extract-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamgruber%2Fsass-extract-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adamgruber","download_url":"https://codeload.github.com/adamgruber/sass-extract-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773726,"owners_count":20993639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plugin","sass","sass-extract","styled-components"],"created_at":"2024-10-10T22:49:11.410Z","updated_at":"2025-04-08T04:18:49.104Z","avatar_url":"https://github.com/adamgruber.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"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' [`\u003cThemeProvider\u003e`][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  \u003cThemeProvider theme={theme}\u003e\n    \u003cApp /\u003e\n  \u003c/ThemeProvider\u003e\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 =\u003e 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamgruber%2Fsass-extract-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadamgruber%2Fsass-extract-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamgruber%2Fsass-extract-js/lists"}