FSCSS v1.1.25: pattern() is here 🎉

New in this release: pattern() — semantic pattern matching for your stylesheets.

Instead of memorizing exact selectors or class names, describe what you want in plain language, set a confidence threshold, and let FSCSS match it to reusable CSS.

Basic example

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
}

Write the phrase anywhere inside a selector, and FSCSS matches it against your defined patterns using similarity scoring — no exact match required, just close enough to clear the threshold.

Buttons

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
}

Dark theme surfaces

pattern(0.8: "dark background and light text", `
  background: #212121;
  color: #ffffff;
`)

.chip {
  dark background and light text
}

.tooltip {
  dark background light text
}

Two different phrasings, same pattern — because it's matched on meaning, not exact wording.

Animations

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

animated keyframe for spin

Patterns aren't limited to selector bodies — they can resolve to full at-rules too.

Content injection

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

hello world heading

What's shipped

• ✅ CDN
• ✅ API
• ✅ CLI
• ✅ Available now on v1.1.25

What's coming

VS Code extension support (syntax highlighting + autocomplete for pattern()) isn't live yet — landing August 20, 2026.

Full explanation coming soon. Try it out and let me know what patterns you build 👇

---