Giters

11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.

Home Page:https://www.11ty.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hot reloading of inlined CSS not working

cgwrench opened this issue · comments

commented

Operating system

Debian 11, running under WSL 2 on Windows 11 Pro (22H2)

Eleventy

2.0.0

Describe the bug

I'm struggling to get hot reloading of inlined CSS to work. I've got a minimal reproduction of the issue I'm seeing below. In this setup, I can see that changes to CSS files trigger a rebuild, but I don't see my CSS changes taking effect in the browser following the rebuild.

Reproduction steps

These steps are a remix of the getting started guide and Inline Minified CSS quick tip.

  1. mkdir hot-reload-repro

  2. cd hot-reload-repro

  3. npm init -y

  4. npm install --save-dev @11ty/eleventy clean-css

  5. Add the following layout as _includes/base.njk:

    <!doctype html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <title>Eleventy hot reload repo</title>

    {% set css %}
    {% include "assets/css/inline.css" %}
    {% endset %}
    <style>
    {{ css | cssmin | safe }}
    </style>
</head>
<body>
    {{ content | safe }}
</body>
</html>

  6. Add the following, gorgeous, CSS as assets/css/inline.css:

    body {
    background: red;
}

  7. Add the following content as index.md:

    ---
layout: base.njk
title: Eleventy hot reload repo
---
# {{ title }}

  8. Add the following eleventy configuration as eleventy.config.js:

    const CleanCSS = require("clean-css");

module.exports = function(eleventyConfig) {
    eleventyConfig.addFilter("cssmin", function(code) {
        return new CleanCSS({}).minify(code).styles;
    });

    eleventyConfig.addWatchTarget("**/*.css");

    return {
        templateFormats: ["md", "njk"],
        markdownTemplateEngine: "njk"
    };
};

  9. Run Eleventy and watch for changes: npx @11ty/eleventy --serve

Expected behavior

I would expect that making changes to CSS files would trigger a reload, and the updated stlyes to be visible in the browser without needing to refresh the browser.

Following the reproduction steps, above, making a change to the CSS file, e.g. changing the background-color, doesn't apply the updated styles. I don't think this is expected, as I've told Eleventy to watch for changes to CSS files using eleventyConfig.addWatchTarget("**/*.css").

I do see a message like:

[11ty][09:14:44.183 UTC] CSS updated without page reload.

in the browser console, but the page CSS doesn't actually update1.

It's worth nothing that everything seems to work fine if my CSS files live under the _includes directory. I think because changes to includes and layouts cause a full reload.

Reproduction URL

No response

Screenshots

No response

Footnotes

  1. It looks like the eleventy-dev-server script has special handling of changed CSS files. I assume that because my CSS changes are inlined, and in the head of the document, the reload client isn't applying the change. However, this is just a guess and might be wildly off the mark. ↩