carbon-preprocess-svelte
carbon-preprocess-svelte copied to clipboard
HeaderSearch has wrong styling when compiled
I am using a HeaderSearch
component to include a search bar in my global header bar on top. When running svelte in local development, everything works properly and looks like this:
![Screen Shot 2021-12-23 at 2 24 53 PM](https://user-images.githubusercontent.com/77378/147288697-172d4aad-bcad-45e4-9383-55914ef66f28.png)
That is the right half of the browser window at the top of the page. Here it is expanded:
When I use npm run build
and host it on Netlify, the HeaderSearch
component is missing quite a few styles and looks like this:
And here it is extended:
I had run into a few, other minor differences between local & prod before, but nothing like this. Maybe something is not configured properly? I would love some pointers to figure out what's causing the differences here.
What type of set-up are you using? What value do you have for the emitCSS
compiler options?
I'm using SvelteKit and optimizeCss()
from carbon-preprocess-svelte
. Using netlify-adapter
for the SvelteKit adapter.
My svelte.config.js
looks like this:
import netlify from '@sveltejs/adapter-netlify';
import * as carbon from 'carbon-preprocess-svelte';
const production = process.env.NODE_ENV != 'development';
// Netlify will inject this for us, so only inject this for local builds.
if (!production) {
process.env['BUILD_ID'] = 'LOCAL';
}
process.env['VITE_BUILD_ID'] = process.env['BUILD_ID'];
export default {
preprocess: carbon.presetCarbon(),
kit: {
target: '#svelte',
adapter: netlify(),
vite: {
optimizeDeps: { include: ['clipboard-copy'] },
plugins: [production && carbon.optimizeCss()]
}
}
};
What happens if you remove the optimizeCss
and re-build it?
That fixes it! Would this be a bug to file against carbon-preprocess-svelte
? Or is it something wrong with HeaderSearch
that's causing optimizeCss
to optimize this out?
Yes – it seems that optimizeCss
removes those incorrectly. Transferring this issue to carbon-preprocess-svelte.