diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 00000000..ead65078 --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,40 @@ +# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node +# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +name: Node.js CI + +on: + push: + branches: [ master ] + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [10.x, 12.x, 14.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2-beta + with: + node-version: ${{ matrix.node-version }} + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "::set-output name=dir::$(yarn cache dir)" + - uses: actions/cache@v2 + id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + - run: yarn + - run: yarn lintcheck + - run: yarn test --runInBand + - run: yarn e2e diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..471de961 --- /dev/null +++ b/.npmignore @@ -0,0 +1,8 @@ +*.peterbe +*~ +dummy* +hack* +coverage +/tests +scripts/lintcheck.sh +/.github diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index b0e31f97..00000000 --- a/.travis.yml +++ /dev/null @@ -1,13 +0,0 @@ -language: node_js -node_js: - stable -cache: yarn -branches: - only: - - master -script: - - set -e - - yarn - - yarn lintcheck - - yarn test - - yarn e2e diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c58191a..59e64331 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,32 @@ +# 0.11.3 + +* Cope with selectors with a `\` character before the `:` + [pull#426](https://github.com/peterbe/minimalcss/pull/426) + +# 0.11.2 + +* Add a `.npmignore` to avoid shipping tests and backup files. + +# 0.11.1 + +* Upgrade sub-dependency `find-my-way` + [pull#407](https://github.com/peterbe/minimalcss/pull/407) + +# 0.11.0 + +* The main parameter `urls` can no be a string called just `url`. You just + need to either use `urls` (array) or `url` (string). + +* New `ignoreRequestErrors` option to ignore HTTP responses that are `>=400`. + [pull#365](https://github.com/peterbe/minimalcss/pull/365) + Thanks @Fgruntjes + +* (Chore) Switching from TravisCI to GitHub Actions + +# 0.10.0 + +* Upgrade dependency on `puppeteer` to `^2.0.0` + # 0.9.0 * Ability to pass a list of whitelist selector regexes diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 359918ce..3742e17e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -5,12 +5,12 @@ The README has instructions about how to do testing and lint checking. Generally you do: ```sh -$ git clone https://github.com/peterbe/minimalcss.git -$ cd minimalcss -$ ./bin/minimalcss.js https://news.ycombinator.com +git clone https://github.com/peterbe/minimalcss.git +cd minimalcss +./bin/minimalcss.js https://news.ycombinator.com ``` -If you make a PR, Travis will run unit tests, lint checks and end-to-end +If you make a PR, GitHub Actions will run unit tests, lint checks and end-to-end testing. Hopefully it's clear from any errors there what needs to be done. ## Style guide diff --git a/README.md b/README.md index dedd5ec2..0cfac370 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # minimalcss -[![Build Status](https://travis-ci.org/peterbe/minimalcss.svg?branch=master)](https://travis-ci.org/peterbe/minimalcss) +![Build status](https://github.com/peterbe/minimalcss/workflows/Node.js%20CI/badge.svg) [![NPM version](https://img.shields.io/npm/v/minimalcss.svg)](https://www.npmjs.com/package/minimalcss) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](#badge) [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovateapp.com/) @@ -136,7 +136,7 @@ For example: ```javascript minimalcss - .minimize({ urls: ['https://example.com/'] }) + .minimize({ url: 'https://example.com/' }) .then(result => { console.log('OUTPUT', result.finalCss.length, result.finalCss); }) @@ -151,16 +151,27 @@ That `result` object that is returned by the `minimize` function contains: * `stylesheetContents` - an object of stylesheet URLs as keys and their content as text. +Optionally, you can supply a list of URLs like this: + +```javascript +minimalcss + .minimize({ urls: ['https://example.com/page1', 'https://example.com/page2'] }) + ... +``` + +and `minimalcss` will try to merge the minimal critical CSS across all pages. +But we aware that this can be "dangerous" because of the inherit order of CSS. + ## API Options Calling `minimalcss.run(options)` takes an object whose only mandatory -key is `urls`. Other optional options are: +key is `urls` or `url`. Other optional options are: * `debug` - all console logging during page rendering are included in the stdout. Also, any malformed selector that cause errors in `document.querySelector` will be raised as new errors. * `skippable` - function which takes - [request](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-request) + [request](https://pptr.dev/#?product=Puppeteer&show=api-class-httprequest) as an argument and returns boolean. If it returns true then given request will be aborted (skipped). Can be used to block requests to Google Analytics etc. @@ -179,6 +190,7 @@ key is `urls`. Other optional options are: * `timeout` - Maximum navigation time in milliseconds, defaults to 30 seconds, pass 0 to disable timeout. * `ignoreCSSErrors` - By default, any CSS parsing error throws an error in `minimalcss`. If you know it's safe to ignore (for example, third-party CSS resources), set this to `true`. * `ignoreJSErrors` - By default, any JavaScript error encountered by puppeteer +* `ignoreRequestErrors` - When CSS files return 404 or another request error `minimalcss` will ignore this instead of throwing an error. will be thrown by `minimalcss`. If you know it's safe to ignore errors (for example, on third-party webpages), set this to `true`. * `styletags` - If set to `true`, on-page `` tags are parsed along with external stylesheets. By default, only external stylesheets are parsed. @@ -214,7 +226,7 @@ With the API, you can do it like this: ```javascript minimalcss .minimize({ - urls: ['https://example.com'], + url: 'https://example.com', skippable: request => { return !!request.url().match('fonts.googleapis.com'); } @@ -247,9 +259,9 @@ and another URL with...: When combining these, it will optimize the CSS in this order: -1. `base.css` -2. `specific.css` -3. `base.css` +1. `base.css` +2. `specific.css` +3. `base.css` But if `specific.css` was meant to override something in `base.css` in the first URL, that might get undone when `base.css` becomes the last CSS @@ -323,9 +335,18 @@ to the the `.prettierrc` file in the root of the project. To check that all your code conforms, run: - yarn lintcheck +```sh +yarn lintcheck +``` + +## Use without a server + +[This blog post](https://www.peterbe.com/plog/how-to-use-minimalcss-without-a-server) +demonstrates technique to use `minimalcss` when you don't yet have a server. +Using the `http-server` package you can start a server right before you run +and shut down as soon as you're done. ## License -Copyright (c) 2017-2018 [Peter Bengtsson](https://www.peterbe.com). +Copyright (c) 2017-2020 [Peter Bengtsson](https://www.peterbe.com). See the [LICENSE](/LICENSE) file for license rights and limitations (MIT). diff --git a/package.json b/package.json index 68c80b15..42edbdde 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "minimalcss", - "version": "0.9.0", + "version": "0.11.3", "description": "Extract the minimal CSS used in a set of URLs with puppeteer", "main": "./index.js", "author": "Peter Bengtsson", @@ -24,17 +24,17 @@ }, "dependencies": { "cheerio": "1.0.0-rc.3", - "css-tree": "1.0.0-alpha.37", - "csso": "~4.0.2", + "css-tree": "1.0.0-alpha.39", + "csso": "4.0.3", "filesize": "^6.0.0", "minimist": "^1.2.0", "puppeteer": "^2.0.0" }, "devDependencies": { - "fastify": "2.12.0", - "fastify-static": "2.6.0", - "jest": "25.2.3", - "prettier": "2.0.2" + "fastify": "3.4.1", + "fastify-static": "3.1.0", + "jest": "26.1.0", + "prettier": "2.1.2" }, "scripts": { "tsc": "tsc -p .", diff --git a/renovate.json b/renovate.json deleted file mode 100644 index f45d8f11..00000000 --- a/renovate.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": [ - "config:base" - ] -} diff --git a/scripts/e2e.js b/scripts/e2e.js index c8fe1f26..ec4d7176 100755 --- a/scripts/e2e.js +++ b/scripts/e2e.js @@ -40,7 +40,7 @@ function openUrl(url, ...options) { } // Simplest form of opening -openUrl('https://minimalcss.app/').then(spawned => { +openUrl('https://minimalcss.app/').then((spawned) => { const css = spawned.stdout.toString(); assert( css.length > 7000 && css.length < 10000, @@ -50,7 +50,7 @@ openUrl('https://minimalcss.app/').then(spawned => { // Open with -o openUrl('https://developer.mozilla.org/', '-o', '/tmp/mdn.css').then( - spawned => { + (spawned) => { const stdout = spawned.stdout.toString(); assert(!stdout.trim(), 'Output should be empty'); const css = fs.readFileSync('/tmp/mdn.css').toString(); @@ -62,7 +62,7 @@ openUrl('https://developer.mozilla.org/', '-o', '/tmp/mdn.css').then( ); // With verbose output -openUrl('https://developer.mozilla.org/', '--verbose').then(spawned => { +openUrl('https://developer.mozilla.org/', '--verbose').then((spawned) => { const css = spawned.stdout.toString(); assert(/\/\*\nGenerated /.test(css), 'Expected verbose leading comment'); assert( diff --git a/src/run.js b/src/run.js index 196a098a..59b02581 100644 --- a/src/run.js +++ b/src/run.js @@ -244,9 +244,13 @@ const processPage = ({ const responseUrl = response.url(); const resourceType = response.request().resourceType(); if (response.status() >= 400) { - return safeReject( - new Error(`${response.status()} on ${responseUrl}`) - ); + if (options.ignoreRequestErrors) { + skippedUrls.add(responseUrl); + } else { + return safeReject( + new Error(`${response.status()} on ${responseUrl}`) + ); + } } else if (response.status() >= 300 && response.status() !== 304) { // If the 'Location' header points to a relative URL, // convert it to an absolute URL. @@ -405,11 +409,19 @@ const processPage = ({ /** * - * @param {{ urls: Array, debug: boolean, loadimages: boolean, skippable: function, browser: any, userAgent: string, withoutjavascript: boolean, viewport: any, puppeteerArgs: Array, cssoOptions: Object, ignoreCSSErrors?: boolean, ignoreJSErrors?: boolean, styletags?: boolean, enableServiceWorkers?: boolean, disableJavaScript?: boolean, whitelist?: Array }} options + * @param {{ urls: Array, url: string, debug: boolean, loadimages: boolean, skippable: function, browser: any, userAgent: string, withoutjavascript: boolean, viewport: any, puppeteerArgs: Array, cssoOptions: Object, ignoreCSSErrors?: boolean, ignoreJSErrors?: boolean, styletags?: boolean, enableServiceWorkers?: boolean, disableJavaScript?: boolean, whitelist?: Array, ignoreRequestErrors?: boolean }} options * @return Promise<{ finalCss: string, stylesheetContents: { [key: string]: string }, doms: Array