Linaria: [1.4.0-beta.1] Changes to exported variables are not picked up when using webpack hmr

Created on 18 Jan 2020 · 7Comments · Source: callstack/linaria

Environment

1.4.0-beta.1

Description

When using webpack hmr (or webpack --watch flag), changes to variables exported from an external module are not picked up by linaria.

For example, defining color values in a colors.js module and importing those variables in a linaria styled component, the css output by linaria is not updated when that module is changed. Only after killing the webpack build/devServer and restarting will linaria pick up the style changes.

I checked in .linaria-cache folder and noticed the styles are not updated there.

Reproducible Demo

Here's a github repo to demo the problem: https://github.com/bartels/linaria-1.4.0-beta.1-hmr-bug

Source

bartels

All 7 comments

cc @Anber

thymikee on 18 Jan 2020

@bartels thank you for the report and sample repo! I'll take a look in a couple of days.

Anber on 18 Jan 2020

I found that if you link the linaria package instead of installing it through npm/yarn, it works.

:no_entry_sign: Bug reproduction:

git clone https://github.com/bartels/linaria-1.4.0-beta.1-hmr-bug
npm install
npm run start

Through the Firefox DevTools, I could see the DOM tree flashing briefly; it seemed like _some_ update had been executed, although it had no effect on the style.

I thought it had relation a with https://github.com/callstack/linaria/issues/537, but I've hard-removed the .linaria-cache folder a bunch of times to no avail.

:heavy_check_mark: Workaround

git clone https://github.com/callstack/linaria and enter the cloned path
yarn bootstrap && yarn link
git clone https://github.com/bartels/linaria-1.4.0-beta.1-hmr-bug and enter the cloned path
yarn && yarn link linaria
yarn start

Changes I made to src/colors.js were hot-reloaded; their usage in pseudo-classes worked as well.