Closed keehun closed 5 months ago
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.
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 (https://github.com/carbon-design-system/carbon-components-svelte/pull/1940)
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()],
});
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, theHeaderSearch
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.