react-style-bundler

// Import the bundler instance and styled function import { styled } from "react-style-bundler"; // Define a simple React App component that uses styled components function MyStyledComponent() { return styled.div` background-color: #f0f0f0; padding: 20px; border-radius: 8px; font-family: sans-serif; h1 { color: #333; margin-bottom: 10px; } button { background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; &:hover { background-color: #0056b3; } } `; } // Assume this is your main application component, // importing it triggers the style registration. // In a real app, this would be your root component, e.g., <App /> const App = () => { const StyledDiv = MyStyledComponent(); // Create instance of styled component return ( <StyledDiv> <h1>Hello from React Style Bundler!</h1> <button>Click Me</button> </StyledDiv> ); }; // Simulate rendering the app to ensure all styles are registered // In a real SSR scenario, you'd render this to a string. // For demonstration, just importing it is enough to register styles. console.log("App component imported, styles are now registered."); App(); // Calling it to ensure the styled components are processed // After your application component has been processed, // retrieve the bundled CSS as a string. let cssBundle = styled.getCSSBundle(); // In a real build step, you would then save this string to a file, // e.g., 'build/out.css' console.log("\n--- Generated CSS Bundle ---"); console.log(cssBundle); // Example of saving: await saveFile(cssBundle, "./build/out.css");