@osiris-smarttv/style-util

Layered className composition utility for Smart TV UI codebases.

Combines:

• Tailwind utility classes
• design-token-aware atomic classes
• CSS module classes
• caller className overrides

with deterministic merge order and tailwind-merge conflict resolution.

Install

npm i @osiris-smarttv/style-util

Quick start

import { cn } from '@osiris-smarttv/style-util'

const className = cn({
  tw: ['flex', 'items-center', 'px-4'],
  s: [styles.container, isActive && styles.active],
  className: props.className,
})

API

• cn(input) - default combiner
• createCn() - build custom combiner
• createCnForTokens() - token-typed combiner factory

Key exported types:

• CnInput
• TwClass
• AtomicClass
• ModuleClass
• DesignToken
• DesignTokenValue

Merge behavior

Layer precedence is explicit and stable:

1. tw
2. atomic
3. s
4. className

tailwind-merge runs on Tailwind-like layers to drop conflicting utilities. Module classes are preserved.

Local development

yarn install
yarn build
yarn typecheck
yarn test

Manual publish (no GitHub Actions)

yarn publish:check
yarn publish:dry-run
yarn publish:manual

If publish returns 404 or permission errors for @osiris-smarttv/*, verify:

• your npm account has publish access to scope @osiris-smarttv
• package name is allowed by org policy
• you are authenticated against https://registry.npmjs.org/