{"library":"react-style-bundler","title":"React Style Bundler","description":"React Style Bundler is a CSS-in-JS library for React applications that leverages JavaScript's native import mechanism to manage and bundle CSS. Currently at version 1.2.3, it integrates directly into your build process by tracking CSS as it's imported via `styled` components. It is particularly well-suited for Server-Side Rendering (SSR) environments, providing a bundler-agnostic approach where the JavaScript runtime's import order dictates the final CSS bundle. Unlike traditional CSS bundlers, it doesn't require specific build tool plugins; instead, you import your main React component and then retrieve the accumulated CSS string. Its release cadence appears demand-driven, without a fixed schedule. A key differentiator is its reliance on the existing JavaScript module graph for CSS dependency resolution and bundling, aiming for a simpler setup for SSR.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-style-bundler"],"cli":null},"imports":["import { styled } from 'react-style-bundler';","import { styled } from 'react-style-bundler';\n// ... after component imports ...\nlet bundle = styled.getCSSBundle();","import { StyleSheetManager } from 'react-style-bundler';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// Import the bundler instance and styled function\nimport { styled } from \"react-style-bundler\";\n\n// Define a simple React App component that uses styled components\nfunction MyStyledComponent() {\n  return styled.div`\n    background-color: #f0f0f0;\n    padding: 20px;\n    border-radius: 8px;\n    font-family: sans-serif;\n\n    h1 {\n      color: #333;\n      margin-bottom: 10px;\n    }\n\n    button {\n      background-color: #007bff;\n      color: white;\n      border: none;\n      padding: 10px 15px;\n      border-radius: 5px;\n      cursor: pointer;\n\n      &:hover {\n        background-color: #0056b3;\n      }\n    }\n  `;\n}\n\n// Assume this is your main application component,\n// importing it triggers the style registration.\n// In a real app, this would be your root component, e.g., <App />\nconst App = () => {\n  const StyledDiv = MyStyledComponent(); // Create instance of styled component\n  return (\n    <StyledDiv>\n      <h1>Hello from React Style Bundler!</h1>\n      <button>Click Me</button>\n    </StyledDiv>\n  );\n};\n\n// Simulate rendering the app to ensure all styles are registered\n// In a real SSR scenario, you'd render this to a string.\n// For demonstration, just importing it is enough to register styles.\nconsole.log(\"App component imported, styles are now registered.\");\nApp(); // Calling it to ensure the styled components are processed\n\n// After your application component has been processed,\n// retrieve the bundled CSS as a string.\nlet cssBundle = styled.getCSSBundle();\n\n// In a real build step, you would then save this string to a file,\n// e.g., 'build/out.css'\nconsole.log(\"\\n--- Generated CSS Bundle ---\");\nconsole.log(cssBundle);\n// Example of saving: await saveFile(cssBundle, \"./build/out.css\");","lang":"typescript","description":"This quickstart demonstrates how to define a styled component, integrate it into a React application, and then extract the final CSS bundle using `styled.getCSSBundle()` after the application's components have been processed.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}