Modifying values outside of a module doesn't update the component styles

Describe the bug

When developing (using Parcel) in a component and modifying some properties outside of the module that are imported - don’t end up recompiling the component - thus they don’t get updated.

// colors.tsx
export const heroBackground = 'linear-gradient(120deg,blue 0%, #8fd3f4 100%)';

// hero.tsx
import React from 'react';
import '@compiled/core';
import { heroBackground } from '../utils/colors';

export const Hero = ({ children }: { children: React.ReactNode }) => {
  return (
    <div
      css={{
        background: heroBackground,
      }}>
      {children}
    </div>
  );
};

What’s worse - sometimes you get into a state where it just won’t update. In this case is it our caching behaviour, or is it the bundler? Both?

To Reproduce Steps to reproduce the behavior:

1. Use code above
2. Run with your favourite bundler
3. Update hero background
4. Notice that the component doesn’t have the updated color
5. Now modify hero component
6. Notice that is now is updated as expected

Expected behavior

It should update the component color without needing the modify the component file.

Additional context

Not sure what we can do here. Is it possible to fix this if we create a bundler plugin to make sure any depending module gets re-transformed if something changes?

Questions

• Does this also affect Webpack
• How can we force a bundler to recompile a consuming module (so it runs the Babel plugin over it, again)

[itsdouges]

Hi all the webpack loader for Compiled is nearing completion, see: https://github.com/atlassian-labs/compiled/pull/530

If I cut a nightly would anyone want to have a play? Or alternatively grab the branch and play locally?

[itsdouges]

Confirmed addIncludedFile is what we’re interested in https://github.com/parcel-bundler/parcel/discussions/5677