superflycss / cli Goto Github PK

5.0 2.0 2.0 421 KB

SuperflyCSS commandline interface

License: MIT License

JavaScript 100.00%

cli's Introduction

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

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.

cli's People

Contributors

Stargazers

Watchers

Forkers

iamturns yrobla

cli's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.