Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

In dev mode, bypass 11ty and watch the css file ourself and reference… #108

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

In dev mode, bypass 11ty and watch the css file ourself and reference… #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c6dab29
in dev mode, bypass 11ty and watch the css file ourself and reference…
theor Sep 30, 2021
9df116f
faulty stash
theor Sep 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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);
Expand Down
35 changes: 34 additions & 1 deletion _11ty/optimize-html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -28,6 +30,7 @@ const ampOptimizer = AmpOptimizer.create({
});
const PurgeCSS = require("purgecss").PurgeCSS;
const csso = require("csso");
const { join } = require("path");

/**
* Inlines the CSS.
Expand Down Expand Up @@ -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("</head>", `<style>${after}</style></head>`);
// 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) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm confused by this. Don't you want to do this at the start of this function and then short-circuit the minification?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I still wrote the minified css back, but that could be short-circuited too yes .I'll do that

content = content.replace("</head>", `<link rel="stylesheet" href="/css/main.css"></head>`);
await require('util').promisify(require('fs').writeFile)("_site/css/main.css", after, {
encoding: "utf-8",
});
} else {
content = content.replace("</head>", `<style>${after}</style></head>`);
}
}
return content;
};
Expand Down Expand Up @@ -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);
Expand Down
8 changes: 6 additions & 2 deletions _data/csp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:"],

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down