From c6dab29d403bd1c6cbc8279eed15a392cb9e5b29 Mon Sep 17 00:00:00 2001 From: Theo Richart Date: Thu, 30 Sep 2021 09:34:27 -0400 Subject: [PATCH 1/2] in dev mode, bypass 11ty and watch the css file ourself and reference the stylesheet --- .eleventy.js | 2 -- _11ty/optimize-html.js | 35 ++++++++++++++++++++++++++++++++++- _data/csp.js | 8 ++++++-- package.json | 1 + 4 files changed, 41 insertions(+), 5 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index ec75629..5c50fd3 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -166,7 +166,6 @@ module.exports = function (eleventyConfig) { eleventyConfig.addCollection("tagList", require("./_11ty/getTagList")); eleventyConfig.addPassthroughCopy("img"); - eleventyConfig.addPassthroughCopy("css"); // We need to copy cached.js only if GA is used eleventyConfig.addPassthroughCopy(GA_ID ? "js" : "js/*[!cached].*"); eleventyConfig.addPassthroughCopy("fonts"); @@ -175,7 +174,6 @@ module.exports = function (eleventyConfig) { // We need to rebuild upon JS change to update the CSP. eleventyConfig.addWatchTarget("./js/"); // We need to rebuild on CSS change to inline it. - eleventyConfig.addWatchTarget("./css/"); // Unfortunately this means .eleventyignore needs to be maintained redundantly. // But without this the JS build artefacts doesn't trigger a build. eleventyConfig.setUseGitIgnore(false); diff --git a/_11ty/optimize-html.js b/_11ty/optimize-html.js index 197d18e..2d1b509 100644 --- a/_11ty/optimize-html.js +++ b/_11ty/optimize-html.js @@ -19,6 +19,8 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ +const isDev = require("../_data/isdevelopment"); +const chokidar = require("chokidar"); const minify = require("html-minifier").minify; const AmpOptimizer = require("@ampproject/toolbox-optimizer"); const ampOptimizer = AmpOptimizer.create({ @@ -28,6 +30,7 @@ const ampOptimizer = AmpOptimizer.create({ }); const PurgeCSS = require("purgecss").PurgeCSS; const csso = require("csso"); +const { join } = require("path"); /** * Inlines the CSS. @@ -79,7 +82,16 @@ const purifyCss = async (rawContent, outputPath) => { const after = csso.minify(purged[0].css).css; //console.log("CSS reduction", before.length - after.length); - content = content.replace("", ``); + // in watch/serve mode, reference the stylesheet. As we bypass 11ty rebuild, + // Browsersync will reload only the css file, which is really fast + if (isDev) { + content = content.replace("", ``); + await require('util').promisify(require('fs').writeFile)("_site/css/main.css", after, { + encoding: "utf-8", + }); + } else { + content = content.replace("", ``); + } } return content; }; @@ -110,9 +122,30 @@ const optimizeAmp = async (rawContent, outputPath) => { return content; }; +const initCssWatcher = () => { + console.log(this); + const watcher = chokidar.watch("./css/*", { + persistent: true + }); + const reload = (path) => { + var bs = require("browser-sync"); + require('fs').copyFileSync(path, join("_site", path)); + bs.reload(path); + if(bs.has('eleventyServer')) + bs.get('eleventyServer').reload(); + else if(bs.instances.length > 0) + bs.instances[0].reload([join("_site", path)]); + } + watcher + .on('add', reload) + .on('change', reload); +} + module.exports = { initArguments: {}, configFunction: async (eleventyConfig, pluginOptions = {}) => { + initCssWatcher(); + eleventyConfig.addTransform("purifyCss", purifyCss); eleventyConfig.addTransform("minifyHtml", minifyHtml); eleventyConfig.addTransform("optimizeAmp", optimizeAmp); diff --git a/_data/csp.js b/_data/csp.js index a0a93c9..6cd8cd2 100644 --- a/_data/csp.js +++ b/_data/csp.js @@ -27,8 +27,10 @@ * or the comments at the end of the `CSP` const below. */ -const SELF = quote("self"); +const isDev = require("./isdevelopment"); +const SELF = quote("self"); +const UNSAFE_INLINE = quote("unsafe-inline"); const CSP = { regular: serialize([ // By default only talk to same-origin @@ -38,7 +40,9 @@ const CSP = { // Script from same-origin and inline-hashes. ["script-src", SELF, /* Replaced by csp.js plugin */ "HASHES"], // Inline CSS is allowed. - ["style-src", quote("unsafe-inline")], + ["style-src", UNSAFE_INLINE], + // in serve mode, reference the css file for fast reload + ["style-src-elem", isDev ? SELF : UNSAFE_INLINE], // Images may also come from data-URIs. ["img-src", SELF, "data:"], diff --git a/package.json b/package.json index 66ee89d..ce2fb25 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@11ty/eleventy-navigation": "^0.1.3", "@11ty/eleventy-plugin-rss": "^1.0.7", "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1", + "chokidar": "^3.5.2", "eleventy-plugin-local-images": "^0.4.0", "file-type": "^12.0.1", "fs-extra": "^8.1.0", From 9df116fde4d22905d0f3c0acbbd9f306459d40ba Mon Sep 17 00:00:00 2001 From: Theo Richart Date: Thu, 30 Sep 2021 09:45:55 -0400 Subject: [PATCH 2/2] faulty stash --- _11ty/optimize-html.js | 2 +- _data/csp.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_11ty/optimize-html.js b/_11ty/optimize-html.js index 2d1b509..2107211 100644 --- a/_11ty/optimize-html.js +++ b/_11ty/optimize-html.js @@ -19,7 +19,7 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -const isDev = require("../_data/isdevelopment"); +const isDev = require("../_data/isdevelopment")(); const chokidar = require("chokidar"); const minify = require("html-minifier").minify; const AmpOptimizer = require("@ampproject/toolbox-optimizer"); diff --git a/_data/csp.js b/_data/csp.js index 6cd8cd2..9f25eed 100644 --- a/_data/csp.js +++ b/_data/csp.js @@ -27,7 +27,7 @@ * or the comments at the end of the `CSP` const below. */ -const isDev = require("./isdevelopment"); +const isDev = require("./isdevelopment")(); const SELF = quote("self"); const UNSAFE_INLINE = quote("unsafe-inline");