New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: Charts displaying wrong with Svelte in production #1778
Comments
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)
|
@theiliad - ok to close this issue - problem was purgeCss. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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';
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
The text was updated successfully, but these errors were encountered: