react-css-styled-component-generator/lib/index.js

As developers move towards CSS-in-JS solutions like styled-components, converting legacy CSS files or inline styles can be tedious and error-prone. This package would automate the process, allowing developers to migrate to styled-components more quickly a

// src/index.js
import styled from "styled-components";
function generateStyledComponent(styleObject, componentName) {
  const cssString = Object.entries(styleObject).map(([property, value]) => `${property.replace(/([A-Z])/g, match => `-${match.toLowerCase()}`)}: ${value};`).join("\n");
  const StyledComponent = styled.div`
    ${cssString}
  `;

  // Assign the component name to StyledComponent for debugging purposes
  StyledComponent.displayName = componentName;
  return StyledComponent;
}
export default generateStyledComponent;