HeaderSearch has wrong styling when compiled

[keehun]

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:

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.

[metonym]

What type of set-up are you using? What value do you have for the emitCSS compiler options?

[keehun]

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()]
		}
	}
};

[metonym]

What happens if you remove the optimizeCss and re-build it?

[keehun]

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?

[metonym]

Yes – it seems that optimizeCss removes those incorrectly. Transferring this issue to carbon-preprocess-svelte.

[metonym]

I rewrote this library from scratch in v0.11.0, specifically focusing on getting the optimizeCss plugin to a good state.

optimizeCss is now a plain Vite plugin, meaning it should work with SvelteKit/Astro/Vite. Additionally, it's compatible with Rollup. The library also ships a plugin for Webpack users.

I specifically tested the plugin with the UI Shell examples – this required some additional legwork (carbon-design-system/carbon-components-svelte#1940)

• README docs
• Full example

Essentially, a SvelteKit config might look like:

// vite.config.js
import { sveltekit } from "@sveltejs/kit/vite";
import { optimizeCss } from "carbon-preprocess-svelte";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [sveltekit(), optimizeCss()],
});