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

[Firefox] domdiff doesn't apply new CSS classes to edited templates #18

Closed
mattrossman opened this issue Mar 23, 2022 · 4 comments
Closed

[Firefox] domdiff doesn't apply new CSS classes to edited templates #18

mattrossman opened this issue Mar 23, 2022 · 4 comments
Labels
bug Something isn't working
Milestone
v1.0.0

Comments

@mattrossman
Copy link

Description

Currently, reload-client.js can listen for changes to underlying CSS files and reload styles accordingly when domdiff is enabled.

This works when editing the CSS file directly (e.g. when editing an existing class), however styles do not reload when updating a template file to use a newly created CSS class.

Minimal Reproduction:

Given a project using @11ty/eleventy@2.0.0-canary.4 with the following files:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p class="foo">Hello world</p>
  </body>
</html>

style.css:

.foo {
  color: red;
}

.eleventy.js:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("style.css")
}

Run eleventy --serve and open the webpage.

Add the following to style.css:

.bar {
  color: blue;
}

Save the file.

Change class="foo" to class="bar" in index.html and save.

The text turns black, as though unstyled.

Expected Behavior

The text should turn blue after the class is updated.

Additional Info:

If style.css is re-saved with the same contents after the HTML is updated, then the new style is applied.

This issue is particularly problematic for users of Tailwind CSS which relies on generating many new utility classes during development.
@mattrossman
Copy link
Author

This issue occurs in Firefox (98.0.1). I cannot reproduce it in Chrome-based Edge.

@mattrossman mattrossman changed the title domdiff doesn't apply new CSS classes to edited templates [Firefox] domdiff doesn't apply new CSS classes to edited templates Mar 23, 2022
@zachleat
Copy link
Member

Successfully reproduced this one! looks like the CSS update request is returning content with only one class inside

image

@zachleat zachleat added the bug Something isn't working label Mar 23, 2022
@mattrossman mattrossman mentioned this issue Mar 23, 2022
Closed
@zachleat
Copy link
Member

A ha, got it.

  1. style.css updates to style.css?_11ty=1649877712089 to apply the CSS-only style update.
  2. the dom differ then swaps this back to style.css because that’s what it got from the rendered template

@zachleat
Copy link
Member

zachleat commented Apr 13, 2022 •
edited

Shipping with @11ty/eleventy-dev-server@1.0.0-canary.8 (via @11ty/eleventy@2.0.0-canary.5)

@zachleat zachleat added this to the v1.0.0 milestone Apr 13, 2022
zachleat added a commit that referenced this issue Apr 13, 2022
@zachleat
A bit of code cleanup for #18
3153b57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
v1.0.0
Development

No branches or pull requests
2 participants
@zachleat @mattrossman