[Bug]: Charts displaying wrong with Svelte in production

[lion-artiste]

Application/Team

Independent

What happened?

Hello ! I don't write bug reports often, but I'm trying carbon-charts for the administration of my SvelteKit project, and while the charts in dev look like this :

They look completely off in preview and production :

I've tried clearing cache, disabling ssr for this page, checking if css is loaded in the browser, checking that I have the last version of the plugin... Nothing seems wrong !

Here is my code for this exact page, without the buttons on top and the div wrappers (I removed them to check, and the problem is still present) :

`<script lang="ts">
import { Cog, Headphones, Radio, ScrollText, Target, User } from 'lucide-svelte';
import type { PageData } from './$types';
import '@carbon/charts-svelte/styles.css';
import { ScaleTypes, AreaChart, DonutChart } from '@carbon/charts-svelte';

export let data: PageData;

</script>

    <AreaChart data={data.gamesStartedByDay} options = {{
        axes: {
            bottom: {
                mapsTo: "date",
                scaleType: ScaleTypes.TIME,
            },
            left: {
                title: "",
                mapsTo: "count"
            }
        },
        height: "300px",
        theme: "white",
        toolbar: {
            enabled: false
        },
        legend: {
            enabled: false
        }
        /*zoomBar: {
            top: {
                enabled: true
            }
        }*/
    }}/>
    <DonutChart data={[
        {
            group: "Anonymous",
            value: data.gamesStartedAnonymous
        },
        {
            group: "Users",
            value: data.gamesStartedUsers
        },
    ]} options={{
        donut : {
            center : {
                label : `Games played last ${data.daysAnalysis} days`
            }
        },
        height: "300px",
        legend: {
            position: "right",
        },
        toolbar: {
            enabled: false
        },
    }}/>`

I hope I'm not doing something stupid ! My vite.config.ts looks like this :

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
//import { defineConfig } from 'vite';
import { purgeCss } from 'vite-plugin-tailwind-purgecss';

export default defineConfig({
plugins: [sveltekit(), purgeCss()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
},
ssr: {
noExternal: process.env.NODE_ENV === 'production' ? ['@carbon/charts'] : []
}
});

Thank you for your help !

Version

@carbon/charts-svelte v1.15.1

Data & options used

No response

Relevant log output

No response

StackBlitz example

No response

What priority level would this be in your opinion?

P0

[obelisk-services]

Hi,

The problem is that you are using purgueCSS and it is skipping some classes while making the build. If you add the styles.css classes to the safelist, it will do the trick. I send you my vite.config.ts (I used "cds-" as pattern in the safelist, but maybe there is a better one, i'm not an expert in this library)

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { purgeCss } from 'vite-plugin-tailwind-purgecss';

export default defineConfig({
	plugins: [
		sveltekit(),
		purgeCss({
		safelist: {
			greedy: [/^cds-/],
		},
	})]
});

[nstuyvesant]

@theiliad - ok to close this issue - problem was purgeCss.