babel-plugin-styled-components-css-variable

Using css variable with style-components

Example:

Normal usage of css variable by styled-components:

const Title = styled.h1`
  --defaultColor: black;
  color: var(--defaultColor);
`;

<Title style={{ "--defaultColor": "orange" }} />;

But by this plugin we can pass value like this:

const Title = styled.h1`
  --defaultColor: black;
  color: var(--defaultColor);
`;

<Title $$defaultColor="orange" />;

Install

npm i babel-plugin-styled-components-css-variable
// or
yarn add babel-plugin-styled-components-css-variable

Configuration

// babel.config.json

{
  "plugins": ["babel-plugin-styled-components-css-variable"]
}