# scss-extract-js

> Plugin for scss-extract to convert Sass variables into a plain JS object

Latest version **0.1.0** (published 2022-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install scss-extract-js
pnpm add scss-extract-js
yarn add scss-extract-js
bun add scss-extract-js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-06-09 |
| First published | 2022-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6 |
| Dependencies | 2 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Somesh Yadav |
| Maintainers | super-user-permission |
| Keywords | sass, scss-extract, js, styled-components, theme, css-in-js |

## Links

- npm: https://www.npmjs.com/package/scss-extract-js
- Repository: https://github.com/super-user-permission/scss-extract-js
- Homepage: https://github.com/super-user-permission/scss-extract-js#readme
- Issues: https://github.com/super-user-permission/scss-extract-js/issues
- npm.io page: https://npm.io/package/scss-extract-js

## Dependencies (2)

- [yarn](https://npm.io/package/yarn.md) ^1.22.19
- [camel-case](https://npm.io/package/camel-case.md) ^3.0.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-06-09

## README

scss-extract-js
---

Plugin for [scss-extract][scss-extract] to convert Sass global variables into a plain JS object.

## Huh? Why?

I 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 [scss-extract][scss-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].

## Cool! How do I get it?

You'll need to install [scss-extract][scss-extract], [scss-extract-loader][scss-extract-loader], [sass][sass], and this plugin.

```sh
$ yarn add scss-extract scss-extract-loader sass scss-extract-js
```
 
*(npm install works too)*

## Nice! How do I use it?

Assuming you're using webpack, you'll need to use scss-extract-loader to require/transform your sass variables file. Then you can pass the styles as a theme via a ThemeProvider component like this:

```jsx
// Require your sass variables using sass-extract-loader and specify the plugin
const theme = require('scss-extract-loader?{"plugins":["scss-extract-js"]}!./path/to/vars.scss');

// Pass the vars into your ThemeProvider component
render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
);
```

Then use themes in your styled components:

```js
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${p => p.theme.primary}
`;

```

## Sweet! What does the output look like?

Given a Sass file with some global variable declarations:

```sass
$primary: rgb(255, 202, 77);
$seondary: #1A93C8;
$primary-light: lighten($primary, 20%);
$base-padding: 10px;
$base-margin: 0 1em;
$base-border: 1px solid #ccc;
$font-family-sans: 'Helvetica', 'Arial', sans-serif;
$base-font-size: 16px;
$line-height: $base-font-size * 1.8;
```

It will yield the following object:

```js
{
  primary: 'rgb(255, 202, 77)',
  seondary: 'rgb(26, 147, 200)',
  primaryLight: 'rgb(255, 232, 179)',
  basePadding: '10px',
  baseMargin: '0 1em',
  baseBorder: '1px solid rgb(204, 204, 204)',
  fontFamilySans: '\'Helvetica\', \'Arial\', sans-serif',
  baseFontSize: '16px',
  lineHeight: '28.8px'
}
```

## Right on! But I need options.

Everybody loves options and we've got one:

Option Name | Default | Description
:---------- | :------ | :----------
`camelCase` | true    | Should SASS variable names be converted to camelCase

### Options Usage
#### scss-extract Plugin Options
As of scss-extract 2.0.0, options can be passed to plugins. Here's how:

```js
const rendered = scssExtract.renderSync({
  file: './path/to/vars.scss'
}, {
  plugins: [{ plugin: 'scss-extract-js', options: { camelCase: false } }]
});
```

#### Using `transformVars` directly

If, for some reason, you don't want to use this package as a scss-extract plugin, you can import the `transformVars` function directly and use it. This is the main function that gets called in scss-extract's plugin pipeline. It expects as its input an object with extracted SASS variables, as generated by scss-extract. The function also accepts an options object.

```js
// Import the transformVars method directly
import transformVars from 'scss-extract-js/lib/transformVars';

// Call the function, passing in your options
const transformed = transformVars(objectWithExtractedStyles, { camelCase: false });
```


## Wait! What if I don't use styled-components?

No 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.

## Help! It's not working for me.

This 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.

## License

MIT

[issues]: https://github.com/super-user-permission/scss-extract-js/issues
[pr]: https://github.com/super-user-permission/scss-extract-js/pulls
[styled-components]: https://www.styled-components.com/
[theming]: https://www.styled-components.com/docs/advanced#theming
[sass]: https://github.com/sass/dart-sass
[scss-extract]: https://github.com/wuz/scss-extract
[scss-extract-loader]: github.com/wuz/scss-extract-loader
[glamorous]: https://github.com/paypal/glamorous

---
_Source: https://npm.io/package/scss-extract-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._