CSS Js Prefixer

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.

Example

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',
});

Installation

To install search css-js-prefixer in extensions and install

Settings

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:

Config Example 1:

{
  "cssJsPrefixer.options": {
    "browsers": ["last 4 versions", "ie >= 9", "> 5%"]
  }
}

Config Example 2:

{
    "cssJsPrefixer.options": {
        "env": <string>
        "flexbox": <boolean>,
        ...
    },
}

Config Example 3:

{
    "cssJsPrefixer.options": {
        "browsers": ["last 4 versions", "ie >= 9", "> 5%"],
        "options": {
            ...
        }
    }
}

Keyboard shortcuts

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

License

This extension is licensed under the MIT License