Skip to content

minifyCSS

Jump to bottom
Reuben L. Lillie edited this page Jul 22, 2019 · 4 revisions

Summary

The minifyCSS() filter optimizes and loads a CSS file inline.

Code resides in filters/minify-css.js where there is more technical inline documentation.

Use

To use minifyCSS(), make sure you install Jakub Pawlowicz’s clean-css module.

~$ npm install --save-dev clean-css

Call this.minifyCSS() wherever you can load an inline stylesheet.

// layout.11ty.js
module.exports = function (data) {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          ${this.minifyCSS(this.fileToString('/includes/assets/css/inline.css'))}
        </style>
      </head>
      <body>
      …
      </body>
  </html>
  `
}

Copyright © 2019 by Pittsburgh District Church of the Nazarene

  1. Welcome
  2. Setup
  3. Coding Standards
    • HTML (in /pghnaz.org/wiki)
    • CSS (in /pghnaz.org/wiki)
    • JavaScript (in /pghnaz.org/wiki)
  4. Color Scheme
  5. Style Guide
  6. Layouts
    • 404.11ty.js
    • base.11ty.js
    • calendar.11ty.js
    • contact.11ty.js
    • content.11ty.js
    • collection.11ty.js
    • eventList.11ty.js
    • map.11ty.js
    • search.11ty.js
  7. Filters
  8. Shortcodes
  9. Client-Side JavaScript
    • search.js
  10. Other static assets
    • Badges
    • Branding
    • Fonts
Clone this wiki locally