{"id":15797,"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.","status":"maintenance","version":"6.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/airbnb/react-with-styles-interface-css#readme","tags":["javascript","react-with-styles","css-in-js","css"],"install":[{"cmd":"npm install react-with-styles-interface-css","lang":"bash","label":"npm"},{"cmd":"yarn add react-with-styles-interface-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-with-styles-interface-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, likely for Babel helper functions used in compiled output or internal utilities.","package":"@babel/runtime","optional":false},{"reason":"Core peer dependency; this package provides an interface specifically for `react-with-styles`.","package":"react-with-styles","optional":false}],"imports":[{"note":"`CSSInterface` is the default export of this package. Ensure `react-with-styles/lib/ThemedStyleSheet` is also imported and `registerInterface` is called.","wrong":"import { CSSInterface } from 'react-with-styles-interface-css'; // Not a named export\nconst CSSInterface = require('react-with-styles-interface-css'); // CommonJS is deprecated for modern React libs","symbol":"CSSInterface","correct":"import CSSInterface from 'react-with-styles-interface-css';"},{"note":"Used to prefix all generated class names for better organization and to prevent collisions in larger applications. This is a named export.","wrong":"import registerCSSInterfaceNamespace from 'react-with-styles-interface-css'; // Not a default export","symbol":"registerCSSInterfaceNamespace","correct":"import { registerCSSInterfaceNamespace } from 'react-with-styles-interface-css';"},{"note":"Required from the core `react-with-styles` library to register this CSS interface. This path `react-with-styles/lib/ThemedStyleSheet` is specific and crucial for correct setup.","wrong":"import { ThemedStyleSheet } from 'react-with-styles'; // Incorrect path, ThemedStyleSheet is not a root export","symbol":"ThemedStyleSheet","correct":"import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';"}],"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."},"warnings":[{"fix":"Ensure all class names defined in your `react-with-styles` style objects are globally unique, or utilize the `registerCSSInterfaceNamespace` function to prefix them, minimizing collision risk.","message":"Class name collisions can occur if styles across your project are not given unique names, leading to unintended style overrides. The generated static CSS relies on these names being distinct.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Instead of targeting the internal, highly specific selectors, override styles using the original class names defined in your `react-with-styles` definitions, potentially combined with the registered namespace prefix.","message":"The CSS output by this interface uses specifiers with varying levels of specificity to maintain compatibility with `aphrodite`'s style resolution logic. Directly overriding these generated specifiers can lead to unpredictable behavior and should be avoided.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be aware of the project's maintenance status. For new projects, evaluate more actively developed CSS-in-JS solutions or build-time styling libraries that are aligned with current React practices like React Server Components.","message":"The `react-with-styles` ecosystem, including this interface, is considered to be in maintenance by Airbnb, with its last major `react-with-styles` update in 2021. While stable, this implies less active development and potential for slower adoption of new React features or changes in the broader CSS-in-JS landscape.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Install `react-with-styles-interface-css-compiler` and configure your build process (e.g., via `npm scripts` or a custom build step) to run its CLI or programmatic API. Ensure the compiler points to your application's entry point.","message":"Actual CSS file generation requires the separate `react-with-styles-interface-css-compiler` package. Forgetting to integrate this compiler into your build pipeline will result in no CSS output despite defining styles correctly in your components.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';` is used and `react-with-styles` is installed (peer dependency). Check the `react-with-styles` documentation for proper setup.","cause":"`ThemedStyleSheet` was not imported correctly or `react-with-styles` is not installed/incorrectly configured.","error":"ThemedStyleSheet.registerInterface is not a function"},{"fix":"Review all style definitions for duplicate class names. Utilize `registerCSSInterfaceNamespace('YourAppName')` to prefix all generated class names. Avoid attempting to override the internal specificity selectors and stick to overriding via the original class names. Use browser developer tools to inspect the generated class names and their applied styles to identify conflicts.","cause":"Class name collisions due to non-unique style names or improper handling of specificity.","error":"Styles are not applying or are being overridden unexpectedly."},{"fix":"Run `npm install react-with-styles-interface-css` or `yarn add react-with-styles-interface-css`. Verify the import statement `import CSSInterface from 'react-with-styles-interface-css';`.","cause":"The package is not installed or the import path is incorrect.","error":"Module not found: Can't resolve 'react-with-styles-interface-css'"}],"ecosystem":"npm"}