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..2107211 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..9f25eed 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",