extract-sass-to-js

Fork of sass-extract-js

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

Intro

Using extract-sass-to-js we can mix and match the world of CSS-in-JS along with common SASS approaches or even CSS modules. We can actually extract global SASS variables and pass them through a <ThemeProvider /> or actually any provider used by styled-components, emotion and so on.

Usage

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

$ yarn add sass-extract sass-extract-loader node-sass extract-sass-to-js

Usage

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

// Require your sass variables using sass-extract-loader and specify the plugin
const theme = require('sass-extract-loader?{"plugins":["extract-sass-to-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};
`;

Plugin Instance

You can also create a plugin instance with your desired options and pass the instance directly inside the plugins array.

import sassExtract from 'sass-extract';
import extract from 'extract-sass-to-js/src/plugin';
 
// Create a plugin instance, passing in your options
const instance = extract({camelCase: false});
 
// Call the `renderSync` function with the path to your Sass file
// and pass the plugin instance in the plugins array
const rendered = sassExtract.renderSync(
  {
    file: './foo/path/to/vars.scss'
  },
  {
    plugins: [instance]
  }
);

License

MIT