Using Web Workers to Compile SCSS in a Frontend Application

During a recent interview the author was criticized for using Prettier directly in the browser because loading the library adds overhead and the formatting can block the main thread. Two alternatives are proposed: delegating the work to a backend via an HTTP request, or using a Web Worker to run the formatting code in a background thread.

What is a Web Worker

A Web Worker is a browser feature that runs JavaScript in a separate thread, allowing heavy computations, network requests, or data processing to occur without freezing the UI. Multiple workers can run in parallel, improving responsiveness.

Using a Web Worker

First create a separate JavaScript file (e.g., worker.js ) that listens for messages, performs the heavy work, and posts the result back:

// worker.js
self.addEventListener("message", (event) => {
  const data = event.data;
  const result = doSomeHeavyWork(data);
  self.postMessage(result);
});

function doSomeHeavyWork(data) {
  // simulate intensive calculation
  return data * 2;
}

In the main thread you instantiate the worker and communicate via postMessage and addEventListener('message') :

// main thread
const worker = new Worker("worker.js");
worker.postMessage(42);
worker.addEventListener("message", (event) => {
  console.log("Received from worker:", event.data);
  worker.terminate();
});

Applying Web Workers to SCSS Compilation

In a real project the author built an online code‑collaboration editor that needs to compile SCSS to CSS. By creating a worker ( compiler.ts ) that imports the sass package, the SCSS code is compiled off the main thread:

import * as sass from "sass";
self.onmessage = (event) => {
  const scssCode = event.data;
  try {
    const result = sass.compileString(scssCode);
    self.postMessage({ compiledCss: result.css });
  } catch (error) {
    self.postMessage({ error: error.message });
  }
};

The React component ( App.tsx ) creates the worker on demand, sends the SCSS source, and updates the UI with the compiled CSS when the worker replies:

import React, { useState } from "react";

const App = () => {
  const [scssCode, setScssCode] = useState(`
    $primary-color: #3498db;
    .button {
      background-color: $primary-color;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      &:hover { background-color: darken($primary-color, 10%); }
    }
  `);

  const compileScss = () => {
    if (!scssCode) return;
    const worker = new Worker(new URL("./compiler.ts", import.meta.url), { type: "module" });
    worker.onmessage = (event) => {
      if (event.data.error) {
        console.error(event.data.error);
      } else {
        setScssCode(event.data.compiledCss);
      }
      worker.terminate();
    };
    worker.postMessage(scssCode);
  };

  return (
{scssCode}
Compile Code
);
};

export default App;

When the user clicks the compile button, the SCSS is sent to the worker, compiled, and the resulting CSS is displayed, keeping the UI smooth.

Conclusion

By moving the time‑consuming SCSS compilation into a Web Worker, the frontend remains responsive while providing real‑time compilation feedback, demonstrating a practical use of Web Workers in modern web development.