scss-extract-js

scss-extract-js

Plugin for 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, 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>.

Cool! How do I get it?

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

$ 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:

// 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:

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:

$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:

{
  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:

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.

// 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. It should work the same with 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. Better yet, submit a PR! Seriously, any feedback and help is welcome.

License

MIT