{"id":2128,"date":"2018-09-07T15:01:57","date_gmt":"2018-09-07T14:01:57","guid":{"rendered":"http:\/\/www.jurecuhalev.com\/blog\/?p=2128"},"modified":"2018-09-07T15:01:57","modified_gmt":"2018-09-07T14:01:57","slug":"using-purgecss-with-ember-js","status":"publish","type":"post","link":"https:\/\/www.jurecuhalev.com\/blog\/using-purgecss-with-ember-js\/","title":{"rendered":"Using PurgeCSS with Ember.js"},"content":{"rendered":"\n<p>After watching talks about <a href=\"https:\/\/embermap.com\/topics\/using-functional-css-with-ember\">Functional CSS at Ember Map<\/a>, I started looking into starting to use<code>tailwind<\/code> for my future projects. The way <code>tailwind<\/code>\u00a0works is that it generates <strong>a lot<\/strong> of CSS classes that you then use <code>purgecss<\/code>\u00a0to remove. So I decided to try it on some of my existing Ember.js projects.<\/p>\n\n\n\n<p>I ran it on Open Education Week and Val 202 web site. Both are built on top of Zurb Foundation. Here are results:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.openeducationweek.org\/\"><strong>Open Education Week<\/strong>:<\/a><br \/>Before:\u00a084.3 KB (14.91 KB gzipped)<br \/>After:\u00a031.05 KB (7.04 KB gzipped)<br \/><strong>A 52% reduction in gzipped size!<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/val202.rtvslo.si\/\"><strong>Val 202:<\/strong><\/a><br \/>Before:\u00a0156.48 KB (24.5 KB gzipped) <br \/>After:\u00a0107.68 KB (18.45 KB gzipped)<br \/><strong>A 24% reduction in gzipped size!<\/strong><br \/><\/p>\n\n\n\n<p>Not a bad improvement, since we get it almost for free, just by including it in the build pipeline. The only downsize is probably a few seconds longer production build time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using it in your Ember.js project<\/h2>\n\n\n\n<p>First install dependencies:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ember install ember-cli-postcss<br \/>yarn add --dev @fullhuman\/postcss-purgecss<br \/><\/pre>\n\n\n\n<p>Then add it to your <code>ember-cli-build.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const EmberApp = require('ember-cli\/lib\/broccoli\/ember-app');\nconst purgecss = require('@fullhuman\/postcss-purgecss');\n\nmodule.exports = function (defaults) {\n  const app = new EmberApp(defaults, {\n    postcssOptions: {\n      filter: {\n        enabled: true,\n        plugins: [\n          {\n            module: purgecss,\n            options: {\n              content: ['.\/app\/**\/*.hbs', '.\/app\/**\/.js'],\n            }\n          }\n        ]\n      }\n    }\n  });\n  return app.toTree();\n};<\/code><\/pre>\n\n\n\n<p>Finally, open your <code>styles\/app.scss<\/code> or <code>styles\/app.css<\/code>\u00a0and modify it so purgecss doesn&#8217;t remove any of your custom CSS.\u00a0<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ import framework like Foundation or Bootstrap here\n\n\/*! purgecss start ignore *\/\n\n\/\/ your css and ember-addon @imports go here\n\n\/*! purgecss end ignore *\/<\/code><\/pre>\n\n\n\n<p>That&#8217;s all. If this isn&#8217;t enough, you can also set additional <code>whitelistPatterns<\/code> and <code>whitelistPatternsChildren<\/code>\u00a0to keep additional CSS rules in your final build.<\/p>\n\n\n\n<p>Thanks goes to <a href=\"https:\/\/twitter.com\/samselikoff\">@samselikoff<\/a> for pointing me in the right direction to make this work.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After watching talks about Functional CSS at Ember Map, I started looking into starting to usetailwind for my future projects. The way tailwind\u00a0works is that it generates a lot of CSS classes that you then use purgecss\u00a0to remove. So I decided to try it on some of my existing Ember.js projects. I ran it on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-2128","post","type-post","status-publish","format-standard","hentry","category-ideas"],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/2128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/comments?post=2128"}],"version-history":[{"count":3,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/2128\/revisions"}],"predecessor-version":[{"id":2131,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/2128\/revisions\/2131"}],"wp:attachment":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/media?parent=2128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/categories?post=2128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/tags?post=2128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}