FSCSS tutorial for FSCSS tutorial

Posted on Sep 26

FSCSS inline() overview

#fscss #css #opensource #discuss

inline() is a low-level utility: take a block (often generated), strip outer curly braces / selector wrapper noise, and emit declaration or fragment lines you can drop inside another construct.

Docs line: Remove curly brackets, selectors and format lines.

Not a core architecture piece like @arr or @define — but important for advanced mixins (charts, clip-path, nested loops).

What it does

Input	Rough output
`inline(":root{ --a: 1; --b: 2; }")`	`--a: 1;` `--b: 2;`
`inline(".sel{ color: red; }")`	`color: red;`

You get inner CSS, not a full rule set.

Why it exists

FSCSS array loops expand into rule-shaped chunks:

@arr.idx[] {
  /* … */
}

That needs { } for the loop. If you are already inside:

clip-path: polygon( … )
a single .chart { … } block
a comma-separated value list

those extra braces break the outer syntax. inline() unwraps the generated block so only the useful tokens (e.g. 10% var(--st-p1),) remain.

st-core-style use

clip-path: polygon(
  inline("{}
    empty-@arr.p-idx[] {
      $i: @arr.p-idx[];
      num(<$i - 1> * 100 / <@arr.p!.length - 1>)% var(--st-p$i),
    }
  ")
);

Flow:

Loop runs in a normal block form (braces allowed).
inline() strips the brace/selector shell.
Result is a list of polygon points inside polygon().

Same idea for custom properties inside one rule:

.something {
  inline("{}
    @arr.some[] {
      --some-@arr.some[]: …;
    }
  ")
  color: var(--some-1);
}

Mental model

[ generated block with { } for the compiler ]
              │
              ▼ inline()
[ flat fragments: decls, points, commas ]
              │
              ▼
[ parent: polygon(), :root merge, one selector, … ]

Compared to other tools

Feature	Role
`@arr`	Lists + auto-index loops
`@define`	Parameterized reusable blocks
`@fun`	Named token maps
`str()`	Store multi-line strings
`inline()`	Peel braces/selectors so fragments compose

When to use it

Building clip-path / path() / multi-value lists from @arr
Emitting many --vars inside one selector without nested rule noise
Large mixins that assemble CSS text from loops

When not to: normal rules and mixins — plain @define / selectors are enough.

In short

inline() = “paste the inside of this block, not the wrapper.”

Uncommon in day-to-day stylesheets; essential for heavy generation (e.g. st-core chart polygons). Advanced, but the right tool when braces fight the parent syntax.

DEV Community