SugarSS

SugarSS is an indent-based CSS syntax for PostCSS. Parcel supports SugarSS using the @parcel/transformer-sugarss plugin. To use it, install it into your app and add it to your .parcelrc.

yarn add @parcel/transformer-sugarss@next --dev

.parcelrc:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.sss": ["@parcel/transformer-sugarss"]
  }
}

Compiled SugarSS files are also processed the same way as CSS, which means it is compiled for your browser targets, and any PostCSS plugins are also applied. CSS modules can also be used by naming your file with the .module.sss extension.

Example usage

Referencing a SugarSS file in an HTML file:

<link rel="stylesheet" href="style.sss" />

Importing a SugarSS file as a CSS module in JavaScript or TypeScript:

import * as classes from "./style.module.sss";

document.body.className = classes.body;

Directly compiling SugarSS using the Parcel CLI

parcel build style.sss