CSSiin

CSSiin is a stylesheet language and toolchain that extends CSS with component-oriented syntax and a dedicated compiler. It outputs standard CSS for use in existing browsers and build pipelines, enabling modular styling without changing runtime behavior.

Originating as an experimental project in 2023 from an open-source collective called NovaForge, CSSiin released its first public version in 2024 under the MIT License. The project aims for gradual adoption alongside conventional CSS and continues to evolve through community contributions.

Core concepts include scope, design tokens, theming, and composition. Scoping confines styles to a component’s tree to prevent leakage. Tokens provide a centralized vocabulary for color, typography, and spacing. Theming maps tokens to themes, while composition enables style reuse through mixins and references.

Syntax resembles CSS but adds directives such as @token, @scope, and @component. Files use the .ciin extension and compile into standard CSS with scoped selectors and CSS variables derived from tokens.

Tooling encompasses a command-line compiler (cssiin-cli) and a package for integration with Webpack, Rollup, or Vite. It supports responsive design, token export as CSS custom properties, and interoperability with existing CSS modules and shadow DOM patterns.

Reception remains limited to experimental design systems; advocates cite clearer design language and safer scoping, while critics point to added complexity and the need for strong governance and documentation. CSSiin thus occupies a niche position as an alternative approach to organizing CSS in component-based workflows.