What str() is

str(name, "…") registers a named entry in the style store. Entries are used for:

  1. Reusable style blocks — multi-line CSS you inject by name (see Examples · Variables)
  2. Property-name aliases — map alternate spellings to standard kebab-case properties

There is no separate “converter runtime.” Alias modules pre-register hundreds of str(alias, "kebab-property") pairs; the preprocessor rewrites matching property names when compiling.

1. Named style blocks

Store a multi-line snippet, then expand it by writing the store name inside a rule (same pattern as the themed-card demo on /examples):

$primary: #3b82f6;
$radius: 8px;
$shadow: 0 4px 6px rgba(0,0,0,0.1);

str(card-style, "
  background: white;
  border-radius: $radius!;
  box-shadow: $shadow!;
  padding: 1.5rem;
  transition: all 0.3s ease;
")

.themed-card {
  card-style
  border-left: 4px solid $primary!;
}

Variables inside the string expand with $name! when the store is applied. Prefer @define when you need parameters; prefer str() for fixed or lightly variable blocks and for alias maps.

2. Property aliases via str()

Register a non-standard property token → official CSS property name:

str(backgroundColor, "background-color")
str(fontSize, "font-size")
str(flex_direction, "flex-direction")
str(border_radius, "border-radius")
/* …hundreds more in the official modules */

When FSCSS sees a property written as the store name, it emits the mapped string as the property name in the final CSS.

How mapping works

  • No special JS converter at runtime for production CLI builds
  • Lookup is the style store populated by str() (or bulk registration equivalent)
  • Output is always standard kebab-case CSS

3. camelCase & snake_case modules

Both modules rely on str() (or the same style-store system) to register the property-name map. Import the module, write the alternate casing, get kebab-case CSS out.

Module Input style Mechanism Output
camelCase backgroundColor str() / style store background-color
snake_case background_color str() / style store background-color

camelCase

@import((*) from camelCase)

.card {
  backgroundColor: #111;
  borderRadius: 12px;
  fontSize: 14px;
}

snake_case

@import((*) from snake_case)

.card {
  background_color: #111;
  border_radius: 12px;
  font_size: 14px;
}

Both compile to

.card {
  background-color: #111;
  border-radius: 12px;
  font-size: 14px;
}

Module sources live under the FSCSS libraries org — see fscss-ttr/FSCSS and /libraries for published packs. Import by module name when using the official registry / CDN path your project already uses for st-core, overlapui, etc.

4. Custom aliases

You can extend the map in your own stylesheet without importing a full module:

str(bgColor, "background-color")
str(bdRadius, "border-radius")

.panel {
  bgColor: #0b1220;
  bdRadius: 16px;
}

Keep aliases readable and document them for your team — large custom maps behave like the official camelCase / snake_case packs.

5. str() vs other features

Feature Best for
str(name, "…") Fixed/reusable text blocks; property alias registration
@define Parameterized mixins (@use)
inline() Strip braces / inject fragments inside values
1.2.5 shorthands Short property names (bg, rounded) → longhands

Shorthands and str() aliases can coexist; they solve related problems (shorter / alternate names → standard CSS).