
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
extract-sass-to-js
Advanced tools
Plugin for sass-extract converting variable to JavaScript objects
Plugin for [sass-extract][sass-extract] to convert Sass global variables into a plain Javascript object.
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.
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
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};
`;
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]
}
);
MIT
FAQs
Plugin for sass-extract converting variable to JavaScript objects
The npm package extract-sass-to-js receives a total of 1,223 weekly downloads. As such, extract-sass-to-js popularity was classified as popular.
We found that extract-sass-to-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.