vscode extension for CSS -> CSS-in-JS
CSS JS Prefixer is a powerful extension designed to streamline your development process by converting CSS properties into JavaScript object notation. Simply select your CSS code, trigger the extension, and watch as it transforms your styles into a clean and structured JavaScript object format. With support for popular CSS properties and seamless integration into your workflow, this extension helps you maintain consistency and efficiency in your projects. Say goodbye to manual conversions and hello to effortless CSS to JS transformation with CSS JS Prefixer.
CSS included code
const card = css({
display: grid;
color: red;
background-color: blue;
font-size: 1rem;
})
Selected from display: grid;
to font-size: 1rem;
and applied extension
CSS in js code
const card = css({
display: 'grid',
color: 'red',
backgroundColor: 'blue',
fontSize: '1rem',
});
To install search css-js-prefixer in extensions and install
In your vscode settings.json
or VS Code Settings, users can configure the Autoprefixer options under the key cssJsPrefixer.options. This configuration object will be directly passed to Autoprefixer i.e. autoprefixer(/* cssJsPrefixer.options */)
Here's how you can structure your settings:
{
"cssJsPrefixer.options": {
"browsers": ["last 4 versions", "ie >= 9", "> 5%"]
}
}
{
"cssJsPrefixer.options": {
"env": <string>
"flexbox": <boolean>,
...
},
}
{
"cssJsPrefixer.options": {
"browsers": ["last 4 versions", "ie >= 9", "> 5%"],
"options": {
...
}
}
}
To run this VS Code extension, simply select code and press Ctrl+Shift+K
. Alternatively, you can execute the command using its name: autoprefixer.execute
This extension is licensed under the MIT License