Editing CSS files causes whole page to reload

[x8BitRain]

Edit:

Creating a new project and adding the latest ember-auto-import and webpack 5 causes full page reload when editing CSS instead of just hot reloading the CSS without refreshing the page. Is there a way to avoid this? Thanks.

Package.json:

{
  "name": "thing",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for thing goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build --environment=production",
    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:!(fix)'",
    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
    "lint:hbs": "ember-template-lint .",
    "lint:hbs:fix": "ember-template-lint . --fix",
    "lint:js": "eslint . --cache",
    "lint:js:fix": "eslint . --fix",
    "start": "ember serve",
    "test": "npm-run-all lint test:*",
    "test:ember": "ember test"
  },
  "devDependencies": {
    "@ember/optional-features": "^2.0.0",
    "@ember/test-helpers": "^2.2.0",
    "@glimmer/component": "^1.0.3",
    "@glimmer/tracking": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "broccoli-asset-rev": "^3.0.0",
    "ember-auto-import": "^2.0.0",
    "ember-cli": "~3.25.1",
    "ember-cli-app-version": "^4.0.0",
    "ember-cli-babel": "^7.23.1",
    "ember-cli-dependency-checker": "^3.2.0",
    "ember-cli-htmlbars": "^5.3.2",
    "ember-cli-inject-live-reload": "^2.0.2",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-terser": "^4.0.1",
    "ember-data": "~3.25.0",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^8.0.4",
    "ember-load-initializers": "^2.1.2",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-page-title": "^6.2.1",
    "ember-qunit": "^5.1.2",
    "ember-resolver": "^8.0.2",
    "ember-source": "~3.25.1",
    "ember-template-lint": "^2.18.1",
    "ember-welcome-page": "^4.0.0",
    "eslint": "^7.20.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-ember": "^10.2.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "loader.js": "^4.7.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.2.1",
    "qunit": "^2.14.0",
    "qunit-dom": "^1.6.0",
    "webpack": "^5.63.0"
  },
  "engines": {
    "node": "10.* || >= 12"
  },
  "ember": {
    "edition": "octane"
  }
}

[takshch]

Encountered the same issue.

@x8BitRain Did you find any solution for fix?

[gilest]

Yes I can repro this.

Newly generated app from ember-cli v3.28.4 – CSS hot reloads.

Update ember-auto-import to v2 – CSS changes cause full page reload.

Reproduction app repo here compare main and v2 branch.

Websocket messages

Example livereload websocket messages received when making a CSS file change.

Under v2 messages are sent to reload both index files as well as the CSS.

ember-auto-import v1

ember-auto-import v2

[gilest]

@takshch I'm using a temporary workaround with the hooks provided by ember-ast-hot-reload. Gist here in case it's useful to you 🤷🏻

[kategengler]

Also seeing this on a newly upgraded app. Any ideas @ef4? In #429 you said that ember-auto-import doesn't do any watching, but @gilest has a repro with only upgrading ember-auto-import compare view.

[ef4]

It must be because we touch the HTML now.

[kategengler]

Yeah, as in the screenshots above, I see it get LR messages for index.html and tests/index.html right after the styles. The requests also go out to live reload just the styles before the full page reload happens /assets/my-app.css?livereload=123435254, so if it weren't triggering a full reload from the update of the html, it would work, it seems.

[gilest]

I can no longer repro this issue with 2.4.1. Thank you @ef4