Stale styles: Multiple <style> are injected on <head> on save, for the same component - Monorepo structure
#1305
Labels
bug report 🦗
Issue is probably a bug, but it needs to be checked
cat: monorepo 🔱
Issues related to usage of linaria in monorepo
needs: complete repro 🖥️
Issue need to have complete repro provided
Comments
JoaoFGuiomar
added
bug report 🦗
github-actions
bot
added
cat: monorepo 🔱
JoaoFGuiomar
changed the title
<styled> are injected on <head> on save, for the same component - Monorepo structure<style> are injected on <head> on save, for the same component - Monorepo structure
|
It seems that there is a way to workaround it, using so the plugin would be as simple as: {
name: "inject-hmr-for-linaria",
transform(code: string, id: string) {
if ([".js", ".ts", ".tsx"].some((x) => id.endsWith(x))) {
return `${code}
import.meta.hot;
`;
}
},
}Full vite.config.ts example:import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import linaria from "@linaria/vite";
const jsExtension = [".js", ".ts", ".tsx"]
export default ({ command, mode, ssrBuild }) => {
const isDev = mode === "development";
return defineConfig({
build: {
outDir: "build",
},
plugins: [
linaria(),
react({
jsxRuntime: "classic",
}),
isDev && {
name: "inject-hmr-for-linaria",
transform(code: string, id: string) {
if (jsExtension.some((x) => id.endsWith(x))) {
return `${code}
import.meta.hot;
`;
}
},
},
].filter((x) => !!x),
});
};However, I would love that I wouldn't have to do such "workaround" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Environment
This particular case is happening in a Monorepo configure with
rushDescription
Best way to describe this is to check the video below.
Quick TLDR:
When changing styles on a component, the
<head>element is injected with multiple<style>elements for the same component. Previous styles for the same component don't seem to be cleared.This makes it look like the page doesn't react to style changes on save.
A hard refresh (refresh the browser manually) clears all old styles and the page looks good.
This only happens when we change to previously used styles
Example
font-sizeis in the beginning3remfont-sizeto4remfont-sizeto3rem(previous value)<style>elements for the same componentThe "Dotted" styled component in the "App.tsx" file updates fine if we change its values.
Reproducible Demo
I created a minimal reproducible repository:
https://github.com/JoaoFGuiomar/minimal-repo
Instructions are on the README. Will also drop a quick video below
Bug.Video.mov
Thanks 👍
The text was updated successfully, but these errors were encountered: