How to Use FSCSS with React.js and Next.js

FSCSS (Figured Shorthand Cascading Style Sheet) is a next-generation CSS preprocessor that simplifies and accelerates styling workflows. It allows you to write compact, functional, and dynamic styles with built-in logic — and it compiles directly to plain CSS.

In this guide, you'll learn how to use FSCSS efficiently in React.js and Next.js projects.

---

Using FSCSS as a Build Tool (Recommended)

This approach compiles .fscss files into .css before running your React or Next.js app.

Install FSCSS globally

npm install -g fscss

Create your FSCSS file

Create a file in your src/ directory named style.fscss:

$primary: teal;
$accent: #069069;
.button {
  background: $primary!;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  &:hover {
    background: $accent!;
  }
}

Compile FSCSS into CSS

fscss src/style.fscss src/style.css

This converts your shorthand FSCSS code into normal CSS that React or Next.js can understand.

Import in your component

import "./style.css";

export default function App() {
  return <button className="button">Click Me</button>;
}

Done! Your FSCSS is now compiled and ready for use in your app.

---

Option 2: Using FSCSS via CDN (Runtime Mode)

If you don't want a build step, you can use the FSCSS runtime compiler via CDN.

Add this to your index.html (React) or _document.js (Next.js):

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.7/exec.min.js" defer></script>
<style>@import(exec(styles/style.fscss))</style>

This lets FSCSS compile styles dynamically in the browser — perfect for prototypes or dynamic theming.

---

Option 3: Use FSCSS in Node.js during SSR (Next.js)

You can also process FSCSS on the server side for Next.js static generation or SSR.

Install locally:

npm install fscss

Then, use it in your Next.js config or a pre-build script:

// scripts/build-css.js
import { readFileSync, writeFileSync } from "fs";
import { processFscss } from "fscss";

const input = readFileSync("src/style.fscss", "utf-8");
const output = await processFscss(input);
writeFileSync("public/style.css", output);

console.log("✅ FSCSS compiled successfully!");

Then, in your _app.js:

import "../public/style.css";

---

Why Use FSCSS in React/Next?

• Lightweight preprocessor (no setup)
• Fast compilation (CLI or CDN-based)
• Works in both frontend and backend
• Great for prototyping, design systems, and theme-based UIs