Skip to content
This tool uses puppeteer's coverage feature to output an optimized CSS files.
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cli build(deps): bump handlebars from 4.2.0 to 4.3.0 in /cli Jan 20, 2020
example
.gitignore maintenance Sep 17, 2019
README.md サンプルの修正 Dec 20, 2019

README.md

css-optimization

This tool uses puppeteer's coverage feature to output an optimized CSS file.

As a feature of the tool, by using pupperium, user can operate puppeteer with the yaml file.

Media query and font-face, etc. are not deleted because PostCSS AST node is used.

Installing

$ npm install -g css-optimization

How to use

$ css-optimization -p <caseDir> -i <imgDir> -c <cssDir>

Options

$ css-optimization --help
Usage: css-optimization [options]

Options:
  -V, --version                   output the version number
  -p, --path <caseDir>            cases root dir
  -i, --image-dir <imgDir>        screehshots dir
  -c, --css-dir <cssDir>          optimize css dir
  -h, --disable-headless          disable headless mode
  -h, --help                      output usage information

example: case file

name: demo
url: 'http://example.com/'
userAgent: 'bot'

steps:
  - action:
      type: hover
      selector: '.fuga'
  - action:
      type: click
      selector: '.hoge'
  - action:
      type: wait
      duration: 500
  - action:
      type: select
      selector: '.fuga'
  - action:
      type: focus
      selector: '.fuga'
  - action:
      type: screenshot
      name: 'demo'

Demo

$ git clone https://github.com/toshi1127/css-optimization.git
$ cd cli
$ npm install
$ npm run build
$ npm run start:demo
You can’t perform that action at this time.