Custom property names are changed to kebab case

[Tharon-C]

Environment

npx envinfo --system --binaries --npmPackages styled-components,babel-plugin-styled-components --markdown

System:

• OS: macOS 14.1.1
• CPU: (10) arm64 Apple M1 Pro
• Memory: 2.36 GB / 32.00 GB
• Shell: 5.9 - /bin/zsh

  Binaries:

• Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
• npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
• Watchman: 2023.11.13.00 - /opt/homebrew/bin/watchman

  npmPackages:

• styled-components: ^4.3.2 => 4.4.1

Proposal

Don't change valid custom property names.

this:

  ":root": {
    "--component-ComponentName-backroundColor": "gold"
   }

should render this:

:root {
   --conponent-ComponentName-backgroundColor: gold;
}

not this:

:root {
   --component-component-name-background-color: gold;
}

Use Case

Dynamically generating properties from a design token in storybook and using hyphens and underscores as a convention to communicate the scoping of the property. Can't use theme objects because of organizational constraints.

Workaround

• Adjust to a flat kebab structure for all environments depending on component library to accommodate the needs of storybook and live with the readability / communication issues.
• Manually parse and render variables to style tag for storybook

Steps to reproduce

Set global styles using GlobalStyles

const variables = { 
 " :root": {
    "--component-ComponentName-backroundColor": "gold"
   }
}
const GlobalStyles = createGlobalStyle(variables);

Inspect variables in browser

Expected Behavior

Variables are rendered as:

:root {
   --conponent-ComponentName-backgroundColor: gold;
}

Actual Behavior

Variables are rendered as:

:root {
   --component-component-name-background-color: gold;
}