├── .babelrc ├── .gitignore ├── .npmignore ├── README.md ├── example ├── .gitignore ├── gatsby-config.js ├── package.json ├── plugins │ └── develop-plugin │ │ ├── gatsby-node.js │ │ └── package.json └── src │ ├── components │ ├── Footer.js │ └── Header.js │ ├── html.js │ ├── layouts │ └── index.js │ ├── pages │ ├── about.js │ └── index.js │ └── styles │ └── index.scss ├── index.js ├── package.json ├── src ├── fsAsync.js ├── getPathsWithExt.js ├── index.js ├── prepareStyles.js └── selectAndReplaceInFileFactory.js ├── webpack.config.babel.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"], 3 | "plugins": [ 4 | "transform-object-rest-spread", 5 | "transform-async-to-generator" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.gitignore.io/api/node 2 | 3 | ### Node ### 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (http://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # Typescript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | .DS_Store 64 | gatsby-node.js 65 | !example/plugins/develop-purify-css/gatsby-node.js 66 | 67 | # End of https://www.gitignore.io/api/node 68 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | *.un~ 29 | yarn.lock 30 | src 31 | example 32 | flow-typed 33 | coverage 34 | decls 35 | examples 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gatsby Plugin PurifyCSS 2 | [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 3 | [![npm version](https://badge.fury.io/js/gatsby-plugin-purify-css.svg)](https://badge.fury.io/js/gatsby-plugin-purify-css) [![dependencies Status](https://david-dm.org/rongierlach/gatsby-plugin-purify-css/status.svg)](https://david-dm.org/rongierlach/gatsby-plugin-purify-css) [![devDependencies Status](https://david-dm.org/rongierlach/gatsby-plugin-purify-css/dev-status.svg)](https://david-dm.org/rongierlach/gatsby-plugin-purify-css?type=dev) 4 | As featured in Gatsby's [community plugins](https://www.gatsbyjs.org/docs/plugins/#community-plugins). 5 | A [Gatsby](https://github.com/gatsbyjs/gatsby) post-build plugin that implements [PurifyCSS](https://github.com/purifycss/purifycss). 6 | Never worry about the size of your css framework again! 7 | Updates your html files directly, removing any unused inline styles. 8 | 9 | ## Gatsby 2 10 | 11 | This plugin does not (currently) work with Gatsby 2. The 12 | [purgecss](https://www.gatsbyjs.org/packages/gatsby-plugin-purgecss/) plugin 13 | does and might be a suitable alternative. 14 | 15 | ## Install 16 | `$ npm install gatsby-plugin-purify-css` 17 | 18 | ## Usage 19 | In your `gatsby-config.js` file: 20 | ```javascript 21 | module.exports = { 22 | plugins: [ 23 | { 24 | resolve: 'gatsby-plugin-purify-css', 25 | options: { 26 | /* Defaults */ 27 | styleId: 'gatsby-inlined-css', 28 | purifyOptions: { 29 | info: true, 30 | minify: true 31 | } 32 | } 33 | } 34 | ] 35 | } 36 | ``` 37 | 38 | ## Options 39 | PurifyCSS options are documented [here](https://github.com/purifycss/purifycss#the-optional-options-argument). 40 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 3 | node_modules 4 | .cache/ 5 | # Build directory 6 | public/ 7 | .DS_Store 8 | yarn-error.log 9 | yarn.lock 10 | -------------------------------------------------------------------------------- /example/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | // 'develop-plugin', 4 | 'gatsby-plugin-purify-css', 5 | { 6 | resolve: 'gatsby-plugin-postcss-sass', 7 | options: { 8 | postCssPlugins: [ 9 | require('postcss-import')(), 10 | require('autoprefixer')() 11 | ] 12 | } 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "plugin-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "n/a", 6 | "scripts": { 7 | "build": "gatsby build", 8 | "develop": "gatsby develop", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "autoprefixer": "^7.1.4", 15 | "gatsby": "^1.9.38", 16 | "gatsby-link": "^1.6.16", 17 | "gatsby-plugin-postcss-sass": "^1.0.12", 18 | "gatsby-plugin-purify-css": "^2.1.0", 19 | "postcss-import": "^11.0.0", 20 | "react-perfect-scrollbar": "^0.2.2", 21 | "tachyons": "^4.8.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /example/plugins/develop-plugin/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const { onPostBuild } = require('../../../gatsby-node') 2 | 3 | exports.onPostBuild = onPostBuild 4 | -------------------------------------------------------------------------------- /example/plugins/develop-plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "develop-plugin", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC" 11 | } 12 | -------------------------------------------------------------------------------- /example/src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Footer = () => ( 4 | 7 | ) 8 | 9 | export default Footer 10 | -------------------------------------------------------------------------------- /example/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Header = ({pathname}) => ( 4 |
5 | My Header 6 |
7 | ) 8 | 9 | export default Header 10 | -------------------------------------------------------------------------------- /example/src/html.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | let styles 4 | if (process.env.NODE_ENV === 'production') { 5 | try { 6 | styles = require(`!raw-loader!../public/styles.css`) 7 | } catch (e) { 8 | console.log(e) 9 | } 10 | } 11 | 12 | const Html = ({ headComponents, body, postBodyComponents }) => ( 13 | 14 | 15 | { headComponents } 16 | { process.env.NODE_ENV === 'production' 17 | ?