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

Hot reloading of inlined CSS not working #2807

Open
cgwrench opened this issue Feb 15, 2023 · 7 comments
Open

Hot reloading of inlined CSS not working #2807

cgwrench opened this issue Feb 15, 2023 · 7 comments
Labels
bug: --serve restart Changes to projects shouldn’t need to restart dev server bug duplicate

Comments

@cgwrench
Copy link

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. ↩
@zachleat zachleat added this to the Eleventy 2.0.1 milestone Mar 21, 2023
@zachleat
Copy link
Member

I think this may be related to #2867 or #2869. Can you test with 2.0.1-alpha.2? (or alternatively 2.0.1 when it is released)

@zachleat
Copy link
Member

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and we will reopen the issue. Thanks!

@cgwrench
Copy link
Author

Hi @zachleat. Thanks for taking the time to look into this.

Unfortunately, this isn't solved with 2.0.1-alpha.2 (I've also tested 2.0.1-alpha.3 and 2.0.1-beta.1), so I don't think this is a duplicate of #2867 or #2869.

Looking into this again, I've found that the following do work:

  1. including my CSS files under the _includes directory (I think because changes to includes and layouts cause a full build or page reload).
  2. linking to my CSS files using <link href="/assets/css/inline.css" rel="stylesheet">, rather than inlining the CSS (and adding a eleventyConfig.addPassthroughCopy("assets/css"); to my eleventy.config.js file).
  3. including some other type of file in my layout (e.g. {% include "some-text-file.txt" %} anywhere in my template, and adding eleventyConfig.addWatchTarget("**/*.txt") to my eleventy.config.js file).

So it looks like this issue is specific to CSS being inlined.

I observed in my first comment that:

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.

Could this be the cause of what I'm seeing? If not, please let me know if there's anything more I can share to help get to the bottom of this.

Thanks again for looking into this, and thanks for all your hard work on this excellent project!

@zachleat zachleat removed this from the Eleventy 2.0.1 milestone Mar 28, 2023
@zachleat zachleat reopened this Mar 28, 2023
@zachleat
Copy link
Member

zachleat commented Apr 19, 2023 •
edited

I do think 2.0.1 had a genuine bug with updating layouts. File and fixed #2903, which is shipping with 2.0.2.

If you want to test it, you can use npm install github:11ty/eleventy

@zachleat zachleat added this to the Eleventy v2.0.2 milestone Apr 19, 2023
@zachleat zachleat added bug bug: --serve restart Changes to projects shouldn’t need to restart dev server duplicate and removed needs-triage labels Apr 19, 2023
@zachleat
Copy link
Member

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and we will reopen the issue. Thanks!

@cgwrench
Copy link
Author

Thanks for taking another look at this. Unfortunately when using github:11ty/eleventy I still see the same issue, so this doesn't look fixed to me.

@zachleat zachleat reopened this Apr 19, 2023
@zachleat zachleat removed this from the Eleventy v2.0.2 milestone Apr 19, 2023
@timmywil
Copy link

I have this issue on Windows, but it's not just inlined CSS. The only thing that fixed it for me was bypassing the bundle plugin plugin and including CSS from the public folder with a <link>. Also tried 2.0.2-alpha.2. Reproducible with eleventy-base-blog & public/css/index.css.

@cgwrench cgwrench mentioned this issue Feb 20, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug: --serve restart Changes to projects shouldn’t need to restart dev server bug duplicate
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@zachleat @timmywil @cgwrench