`optmizeCss` has no effect on build size

[andreavaccari]

Hi @metonym , thank you for your work on Svelte and Carbon.

I would appreciate your help with the following setup:

• vite.config.js

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { optimizeCss } from "carbon-preprocess-svelte";

export default defineConfig({
  plugins: [
    svelte(),
    optimizeCss(),
  ],
  build: {
    lib: {
      name: "Button",
      entry: "src/Main.svelte",
      fileName: "index",
    },
  },
});

• Css.svelte

<style global lang="postcss">
  @import "carbon-components-svelte/css/white";
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";
</style>

• Main.svelte

<script lang="ts">
  import "./Css.svelte";
  export let label: string;
</script>

<button type="button" class="btn">
  {label}
</button>

<style lang="postcss">
  .btn {
    @apply font-bold;
  }
</style>

The Carbon theme is not used at all but ends up included in the final style.css. Tailwind is correctly purged. I believe the plugin is not being triggered but I cannot figure out what I'm doing wrong. Could you point me in the right direction?

[metonym]

@andreavaccari Which Carbon components are you importing?

Try using the optimizeImports preprocessor in conjunction with the Carbon Svelte library.

This is what my vite.config.js looks like:

import { svelte } from "@sveltejs/vite-plugin-svelte";
import { defineConfig } from "vite";
import { optimizeImports, optimizeCss } from "carbon-preprocess-svelte";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      svelte({ preprocess: [optimizeImports()] }),
      mode === 'production' && optimizeCss()
    ],
  };
});

When I run yarn build, the CSS bundle is smaller (514.98kb --> 103.54kb)

[andreavaccari]

Hi @metonym, is the order in which one lists optimizeImports, optimizeCss, and sveltePreprocess important?

[theetrain]

I have a similar issue when using Sveltekit; I'm not sure if the problem is my config, Sveltekit's processing, or optimizeCss().

This is my svelte.config.js:

import adapter from '@sveltejs/adapter-auto'
import { optimizeImports, optimizeCss } from 'carbon-preprocess-svelte'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    vite: {
      plugins: [optimizeCss()]
    }
  },
  preprocess: [optimizeImports()]
}

export default config

/src/routes/index.svelte

<script>
  import { DataTable } from 'carbon-components-svelte'
  import 'carbon-components-svelte/css/white.css'

  export let data
  export let raw
</script>

<h1>Pricing</h1>
<p>
  Raw data: {JSON.stringify(raw)}
</p>
<p>
  Refined data: {JSON.stringify(data)}
</p>

<DataTable headers={data.headers} rows={data.rows} />

After running npm run build one of the files is 633kB:

.svelte-kit/output/server/entries/pages/index.svelte.js        633.33 KiB

How do I ensure optimizeCss() is configured properly?
Docs reference: https://github.com/carbon-design-system/carbon-preprocess-svelte/blob/19785adebad8ae92387b03fd3e32a0dd2ac8248b/README.md#usage-2

Using:

• Node v16.15.1
• npm 8.12.1
• [email protected]
• @sveltejs/[email protected]
• [email protected]

[theetrain]

Following up with some trial and error.

For context, I'm using Sveltekit. Here's a reproduction demo: https://stackblitz.com/edit/carbon-optimize-css-demo?file=src%2Froutes%2Findex.svelte,vite.config.js&terminal=dev

1. Load the link above
2. In the terminal, run npm run build
3. Observe the large CSS output:

   .svelte-kit/output/client/_app/immutable/assets/index-43c78f14.css
   582.15 KiB / gzip: 52.89 KiB
   

I also tried using svelte-preprocess in the vite config:

import { sveltekit } from '@sveltejs/kit/vite'
import preprocess from 'svelte-preprocess'
import { optimizeImports, elements, optimizeCss } from 'carbon-preprocess-svelte'

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit({ preprocess: preprocess([optimizeImports(), elements()]) }), optimizeCss()],
  server: {
    port: 3000
  },
  preview: {
    port: 3000
  }
}

export default config

[ericschmar]

I am also having this issues:

in my main.css:

@import "carbon-components-svelte/css/g10.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

With my vite.config.js:

import {
  defineConfig,
  splitVendorChunkPlugin
} from 'vite'
import {
  svelte
} from '@sveltejs/vite-plugin-svelte'
import path from 'path'
import preprocess from 'svelte-preprocess';
import {
  optimizeCss,
  optimizeImports
} from "carbon-preprocess-svelte";

export default defineConfig(({
  mode
}) => {
  return {
    plugins: [svelte({
        preprocess: [preprocess(), optimizeImports()],
        experimental: {
          prebundleSvelteLibraries: true,
        }
      }),
      mode === 'production' && optimizeCss(),
      splitVendorChunkPlugin(),
    ],
    },
  }
})

And I get a css bundle over 300kb.

Node v16.15.1 npm 8.12.1 [email protected] [email protected] [email protected] [email protected]

[metonym]

This is a very belated reply. A lot has changed since this library was first released (SvelteKit was <v1).

I rewrote the library in v0.11.0 – specifically focusing on the optimizeCss plugin:

• Revamp class pruning strategy to minimize or eliminate false positives
• Redesign it as a plain Vite plugin (meaning it should work with SvelteKit/Astro/Vite, and is also Rollup compatible)

---

• Docs in README
• Full examples