{"library":"react-with-styles-interface-css","title":"React with Styles CSS Interface","description":"This package serves as an interface for `react-with-styles`, enabling the compilation of CSS-in-JS styles into static CSS classes. It's designed to produce deterministic and human-friendly class names, which aids in easily overriding styles with standard CSS. At version 6.0.0, it integrates with `react-with-styles` (latest major version 4.x) and leverages a separate compiler (`react-with-styles-interface-css-compiler`) to generate physical CSS files during the build process, distinguishing it from runtime CSS-in-JS solutions. The library is part of the AirBnB open-source ecosystem, which typically implies a maintenance cadence, focusing on stability rather than rapid feature development. Its primary differentiation lies in offering a build-time static CSS solution within the `react-with-styles` abstraction, promoting performance and simplified debugging through predictable CSS output.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install react-with-styles-interface-css"],"cli":null},"imports":["import CSSInterface from 'react-with-styles-interface-css';","import { registerCSSInterfaceNamespace } from 'react-with-styles-interface-css';","import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';\nimport CSSInterface, { registerCSSInterfaceNamespace } from 'react-with-styles-interface-css';\nimport { withStyles, css } from 'react-with-styles';\n\n// 1. Register the CSS interface with react-with-styles\nThemedStyleSheet.registerInterface(CSSInterface);\n\n// 2. Optional: Register a namespace to prefix generated class names\nconst namespace = 'MyAwesomeApp';\nregisterCSSInterfaceNamespace(namespace);\n\n// 3. Define your styles using the withStyles HOC\nconst MyStyledComponent = withStyles(({ color, unit }) => ({\n  container: {\n    backgroundColor: color.primary,\n    padding: 2 * unit,\n    borderRadius: unit,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  text: {\n    color: color.white,\n    fontSize: 3 * unit,\n    fontWeight: 'bold',\n  },\n}))(({ styles, css, message = \"Hello, CSS Interface!\" }) => (\n  <div {...css(styles.container)}>\n    <span {...css(styles.text)}>{message}</span>\n  </div>\n));\n\n// Example usage (this part would typically be in your app's component tree)\n// This example is for demonstration; a full app would also need a ThemeProvider\n// (from react-with-styles) to provide `color` and `unit`.\n// console.log(<MyStyledComponent />);","lang":"javascript","description":"This quickstart demonstrates how to register the `CSSInterface` with `react-with-styles`, optionally namespace class names, and then apply styles to a React component using `withStyles` and `css` functions.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}