Has anyone found a solution for these style ordering issues?
We have been upgrading our AtlasKit packages from fairly old versions. Loading the compiled styles works out of the box with our existing webpack config, but we see style ordering issues (font related it appears) where styles from some AtlasKit components mess up the styles in others.
What’s confusing me about this post or the adoption of compiled more broadly: In this post, it says:
If your bundler supports CSS imports (import 'styles.css'; ), packages using Compiled should continue to work out of the box.
But then, further down, there are instructions to update our bundler configs.
without @compiled/parcel-config or @compiled/webpack-loader, we cannot guarantee those styles will be ordered correctly
I am not clear what the expectation should be. Is it supposed to work without those plugins?
I have tried installing @compiled/webpack-loader, but it didn’t resolve the ordering issues. Below is our webpack rules config.
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{loader: "babel-loader"},
{
loader: "@compiled/webpack-loader",
options: {
extract: false,
importReact: false,
},
},
],
},
{
test: /\.css$/,
use: [{loader: "style-loader"}, {loader: "css-loader"}],
},
{
test: /\.(jpe?g|png|gif|svg)$/,
type: "asset/inline",
},
]
This screenshot shows the font issues we are seeing. In this particular case, the font weight of the Link button is overriden by
webpack://./node_modules/@atlaskit/tag/dist/esm/tag/internal/shared/content.compiled.css and webpack://./node_modules/@atlaskit/menu/dist/esm/internal/components/menu-item-primitive.compiled.css
I did some testing with style extraction since it was recommended, to see if that might help but that lead to a bunch of compile errors and warnings so I backtracked from that. I’d prefer a simple solution over a higher performing one to start.
I honestly do not fully understand yet how these styles work yet, but I’d expect that it should work without too many changes and be compatible with any toolchains/other styling solutions (we use emotion). Appreciate any hints on how we might be able to fix this.
).