SuperflyCSS Commandline Interface

CLI for SuperflyCSS Projects. The CLI enables the running of superflycss build, test, and serve/watch tasks. The CLI uses the pli - project layout instance for project layout. See the Build PostCSS Plugins list for a list of plugins currently supported.

Installation

npm i -g @superflycss/cli

Usage

Blog Articles

• SuperflyCSS CLI New Deploy Feature
• Prototyping With Bootstrap 4 Using the SuperflyCSS CLI
• Filtering Unused CSS Selectors With SuperflyCSS
• Minifying Your CSS With SuperflyCSS
• Building Sugarss With SuperflyCSS
• Hacking the SuperflyCSS PostCSS Plugin Configuration
• Visually Testing CSS With the SuperflyCSS Test Component
• Rendering Nunjucks Templates with SuperflyCSS
• Rendering Markdown Documentation with SuperflyCSS
• Dependency Management With SuperflyCSS
• SuperflyCSS - The Wait is Over!
• Learning Flexbox with SuperflyCSS

New Project Types

The sfc new command supports five different options for project type. They are c for component, u for utility, p for prototype, e for empty, and a for application.

So for example when generating a new component project, use sfc new -t c. Prototype is the default, so when creating a prototype project just use sfc new projectname.

Supported Commands

Type sfc -h to see supported commands. The output will look like this:

  Usage: sfc [options] [command]

  SuperflyCSS Command Line Interface

  Options:

    -V, --version        output the version number
    -t, --type [type]    
    -h, --help           output usage information

  Commands:

    new|n <name>                 Create a new project
    clean|c                      Clean the build (Removes target folder)
    build:main:css|bmc           Build main css)
    build:test:css|btc           Build test CSS
    build:test:html|bth          Build test HTML
    build:main:filtered:css|bmfc Build main filtered CSS
    build:test:filtered:css|btfc Build test filtered CSS
    build:main:minified:css|bmmc Build main filtered CSS
    build:test:minified:css|btmc Build test filtered CSS
    build|b              Build main css, test css, and test html
    dist|d               Prepare dist directory for publishing to NPM
    serve|s              Compile and serve main and test css and test html

The sfc serve command watches and builds the project while also serving the projects html files with live reload courtesy of browser-sync.

Specifically it build src/test/css/**/*.css files and the results are saved to serve/css. The src/test/html/**/*.html files are build and save to the serve directory.

Place main css files in src/main/css and test css files (The CSS used in the test html file) in src/test/css. Built main css files are saved in target/main/css and test css files are saved to target/test/css. Use test case files in src/test/html/ to test the CSS being built. Run sfc test:css to compile the test html files.

Filtering

Filter CSS selectors against target/main/html or target/test/html using postcss-uncss.

• Run sfc bmfc to filter target/main/css files again target/main/html content.
• Run sfc btfc to filter target/test/css files again target/test/html content.

The files produced will have a .filtered.css extension.

Minification

Minification is performed with cssnano and mqpackger. Uncss is used when html is present to run against.

• Run sfc bmmc to minify src/main/css files.
• Run sfc btmc to minify src/test/css files.

The files produced will have a .min.css extension.

PostCSS Plugins Used by the CSS Build Commands

The following plugins are invoked when the tasks build:main:css and build:test:css are invoked.

| Plugin Name | Plugin URL | |------------------------------|--------------------------------------------------------| | autoprefixer | https://github.com/postcss/autoprefixer | | postcss-import | https://github.com/postcss/postcss-import | | postcss-apply | https://github.com/pascalduez/postcss-apply | | postcss-calc | https://github.com/postcss/postcss-calc | | postcss-color-function | https://github.com/postcss/postcss-color-function | | postcss-custom-media | https://github.com/postcss/postcss-custom-media | | postcss-css-variables | https://github.com/MadLittleMods/postcss-css-variables | | postcss-each | https://github.com/outpunk/postcss-each | | postcss-font-magician | https://github.com/jonathantneal/postcss-font-magician | | postcss-for | https://github.com/antyakushev/postcss-for | | postcss-reporter | https://github.com/postcss/postcss-reporter | | postcss-sass-color-functions | https://github.com/adam-h/postcss-sass-color-functions |

Filtering is performed by the postcss-uncss plugin and minification is performed using css-mqpacker and cssnano.

Test CSS Command

The sfc test:css command supports the visual testing of superflycss components and utilities by building the src/test/html/**/*.html content. It has the following features:

• Nunjucks templating
• Highlighting of content contained in the Test-markup block

For sample tests using nunjucks templates to keep the content DRY see component-test.