Building Sugarss with SuperflyCSS

Photo by Ron Whitaker on Unsplash

Scenario

We have sugarss formatted CSS in the file src/main/sss/index.sss :

.a
  color: red
:fullscreen

We need to build it by passing it through all the SuperflyCSS PostCSS plugins like autoprefixer, etc.

Approach

Install @superflycss/CLI:

npm i -g @superflycss/cli

Create an empty project and launch it in VSCode:

sfc new -t e project
cd project
code .

Place the example content in src/main/sss/index.sss .

Build it with sfc b and check target/main/css/index.css . It looks like this:

.a { color: red }
:-webkit-full-screen {}
:-moz-full-screen {}
:-ms-fullscreen {}
:fullscreen {}

Note that autoprefixer has been invoked on the :fullscreen selector.