Introduction to FSCSS pattern()

NEW IN v1.1.25

The pattern() method lets you define a piece of CSS alongside a plain-language description, then reference it anywhere in your stylesheet using natural phrases instead of exact class names or mixin calls.

Unlike @define, which requires an exact call signature, pattern() resolves by similarity. A phrase in your stylesheet is scored against every pattern description, and the best match above its confidence threshold gets injected as CSS.

Semantic Matching

Phrases don't need to match exactly — close enough clears the threshold

Confidence Threshold

Set how strict or forgiving each pattern's matching should be

Quote-Safe Syntax

Mix quote types freely so CSS content can include its own quotes

Direct Injection

Matched CSS is expanded in place during compilation

Key Concept: The threshold is a minimum similarity score (0–1). A phrase must score at or above it to trigger the pattern. Higher thresholds mean stricter, closer-to-exact matches.

Basic Syntax

Pattern Declaration

pattern()

The basic syntax for defining a pattern:

syntax.fscss 
pattern(threshold: "description", `
  /* css to inject */
`)

Simple Pattern

example.fscss 
pattern(0.5: "Hello World card", `
  border-radius: 12px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
`)

.card {
  hello world card
}

Threshold and Matching

How Similarity Scoring Works

threshold

Every pattern has a threshold — a minimum similarity score a phrase must reach to trigger it. Phrases are compared word-for-word against the description, case-insensitively.

⚠️ Important: The colon : separates the threshold from the description. Omitting the threshold defaults it to 1 (near-exact match required).

✅ Forgiving Match

pattern(0.5: "Beautiful card", `
  background: #06f;
`)

/* matches: "beautiful card",
   "beautiful", "a card that's beautiful" */

❌ Strict Match

pattern("dark button", `
  background: #111;
`)

/* threshold defaults to 1 —
   only "dark button" itself matches */
threshold-example.fscss 
pattern(0.8: "dark background and light color", `
  background: #212121;
  color: #ffffff;
`)

.chip {
  style dark background and light color
}
Chip with matched dark styling

Property Patterns vs Block Patterns

Property Patterns

Property

Resolve to a group of declarations inside a rule. Ideal for cards, buttons, and common component styling described in plain language.

pattern(0.6: "rounded primary button", `
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background: #ffffff;
  color: #764ba2;
  font-weight: 600;
  cursor: pointer;
`)

.btn {
  rounded primary button
}

Block Patterns

Block

Resolve to full CSS structures like keyframes or at-rules. The matching phrase can stand alone, outside any selector.

pattern(0.7: "animated keyframe for spin", `
  @keyframes spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
  }
`)

an Animated keyframes for spin

Practical Examples

Building a Component System

Components

Describe a small set of components once, then invoke them anywhere with natural phrasing:

components.fscss 
pattern(0.6: "rounded primary button", `
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background: #ffffff;
  color: #764ba2;
  font-weight: 600;
  cursor: pointer;
`)

pattern(0.9: "hello world heading", `h1:before{content: 'Hello World';}`)

.btn {
  rounded primary button
}

.title {
  hello world heading
}

Best Practices

Write Distinct Descriptions

Keep pattern descriptions distinguishable from each other to avoid overlapping matches

Tune Thresholds Deliberately

Use higher thresholds (0.8+) for short, generic phrases; lower thresholds for longer, unique ones

Use Block Patterns for At-Rules

Reserve block patterns for keyframes, media queries, and standalone structures

Prefer Backtick Blocks for CSS

Use backticks for the CSS argument so it can freely contain single or double quotes

Pro Tip: Group related patterns into a single file (e.g. _patterns.fscss) and import them, the same way you would organize @define libraries.

Why Use FSCSS pattern()?

Benefits of Semantic Pattern Matching

Write What You Mean

Describe intent in plain language instead of memorizing exact call signatures

Forgiving by Design

Small wording differences still resolve correctly, thanks to threshold-based matching

Great for Teams

Non-technical contributors can describe styling needs without learning exact syntax

Resolved at Compile Time

No runtime cost — matching happens during compilation, just like @define

Feature Benefit
Similarity scoring Phrases don't need to match descriptions exactly
Configurable threshold Control how strict or forgiving each pattern is
Quote-type-aware parsing CSS content can freely include quotes without breaking the pattern
Direct expansion Predictable output with no runtime overhead
Availability: pattern() is live now on v1.1.25 via CDN, API, and CLI. VS Code extension syntax highlighting and autocomplete are landing August 20, 2026.