https://github.com/mhanberg/jekyll-purgecss

A Jekyll plugin for Purgecss.
https://github.com/mhanberg/jekyll-purgecss

Last synced: 17 days ago
JSON representation

A Jekyll plugin for Purgecss.

• Host: GitHub
• URL: https://github.com/mhanberg/jekyll-purgecss
• Owner: mhanberg
• License: mit
• Created: 2018-11-24T02:13:03.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-10-06T03:12:31.000Z (about 2 years ago)
• Last Synced: 2024-10-13T09:57:31.435Z (about 1 month ago)
• Language: Ruby
• Homepage:
• Size: 18.6 KB
• Stars: 25
• Watchers: 3
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Jekyll Purgecss

[![Build Status](https://travis-ci.com/mhanberg/jekyll-purgecss.svg?branch=master)](https://travis-ci.com/mhanberg/jekyll-purgecss)

[![Gem Version](https://badge.fury.io/rb/jekyll-purgecss.svg)](https://badge.fury.io/rb/jekyll-purgecss)

A Jekyll plugin for Purgecss.

## Installation

Add this line to your application's Gemfile:

```ruby

gem 'jekyll-purgecss'

```

And then add this line to your application's `_config.yml`:

```yml

# _config.yml

plugins:

  - jekyll-purgecss

css_dir: "" # defaults to "css"

```

jekyll-purgecss only runs in production, so make sure that `JEKYLL_ENV=production` on the server where you build your site.

## Usage

Make sure you have [purgecss](https://www.purgecss.com/#cli) installed and has its binary located at `./node_modules/.bin/purgecss`.

Add your Purgecss configuration to a `purgecss.config.js` file in the root of your repository.

```javascript

// purgecss.config.js

module.exports = {

  // These are the files that Purgecss will search through

  content: ["./_site/**/*.html"],

  // These are the stylesheets that will be subjected to the purge

  css: ["./_site/css/site.css"] 

};

```

#### Tailwind CSS

If you are using [Tailwind CSS](https://tailwindcss.com), you'll need to add a custom `extractor`. More can be read on the Tailwind [documentation](https://tailwindcss.com/docs/controlling-file-size#removing-unused-css-with-purgecss).

```javascript

module.exports = {

  content: ["./_site/**/*.html"],

  css: ["./_site/css/site.css"],

  // Tailwind CSS config

  defaultExtractor: content => content.match(/[\w-/:]+(?