CSS and Performance Improvement

[ermincelikovic]

At the moment, recommended way of importing styles of this library is by literally linking to the compiled and minified stylesheet file (~400kb). This file, as far as I understand, includes styles of all of the components.

While this is totally fine/usual way to deal with the css in react, it also kinda defeats the purpose of using svelte. It should not be necessary to include 400kb of CSS for a simple component which would take five carbon components and 15kb of JS.

Is there a consideration to allow building a css bundle of the used components (and dependancies) only?

[metonym]

I'm glad you brought this up. Documentation on real (production) set-ups is forthcoming.

The example in the README is a "quick start" method.

For now, please refer to this boilerplate for a full SASS webpack set-up. Note that the SASS import is still not optimized per component.

[NickStarlight]

I'm currently doing this:

<script>
  import { Button } from 'carbon-components-svelte';
</script>

<main>
    <Button>Primary</Button>
</main>

<style lang="scss" global>
  @import 'carbon-components/scss/components/button/button';
</style>

Sadly, this bundles the button CSS globally with the 'global' attribute, without it, Svelte will remove the import in build time because it doesn't know it's being used(See https://github.com/kaisermann/svelte-preprocess/issues/44).

You need postcss installed.

[uribalb]

I've been trying to do the same with rollup and purgecss but it removes all of carbon's css

[metonym]

@uribalb we are working on a custom Carbon class/element extractor for purgecss

[uribalb]

@uribalb we are working on a custom Carbon class/element extractor for purgecss

OK. Little precision: I'm using the routify 2.x template (npx @roxi/routify init --branch 2.x). It uses postcss and rollup to build the project. I do:

<style  global>
  @import "carbon-components-svelte/css/all.css";
</style>

in App.svelte Would you recommend to keep using carbon normally and change the config files when the plugin is ready or is there something that I should start doing with my code to make future config easier ?

[metonym]

@uribalb SCSS is currently the best method for optimizing CSS performance (i.e. minimizing the CSS size). Check out the Carbon guide on optimizing Sass builds.

Essentially, SCSS allows your to import the styles for individual components.

Dependencies:

• node-sass
• carbon-components (version 10.21 or greater)
• @carbon/themes (if using any theme besides the default white theme)

The equivalent SCSS for all.css:

  $feature-flags: (
    enable-css-custom-properties: true,
    grid-columns-16: true
  );

  @import "@carbon/themes/scss/themes";

  :root {
    @include carbon--theme($carbon--theme--white, true);
  }

  :root[theme="g10"] {
    @include carbon--theme($carbon--theme--g10, true);
  }

  :root[theme="g90"] {
    @include carbon--theme($carbon--theme--g90, true);
  }

  :root[theme="g100"] {
    @include carbon--theme($carbon--theme--g100, true);
  }

  $css--font-face: true;
  $css--helpers: true;
  $css--body: true;
  $css--use-layer: true;
  $css--reset: true;
  $css--default-type: true;
  $css--plex: true;

  @import "carbon-components/scss/globals/scss/_css--reset.scss";
  @import "carbon-components/scss/globals/scss/_css--font-face.scss";
  @import "carbon-components/scss/globals/scss/_css--helpers.scss";
  @import "carbon-components/scss/globals/scss/_css--body.scss";
  @import "carbon-components/scss/globals/grid/_grid.scss";

  /* import individual components SCSS */
  @import "carbon-components/scss/components/button/button";

[Taha-Firoz]

@metonym So from what I think you mean, I made a style.scss file in my src folder, pasted all of this stuff you've written and imported that into my App.svelte how large should my exported css be. Because theres still alot of css being generated for a single button. Can you make a "For Dummies" style guide, I'm very new to all of this css stuff and I'm having a hard time following along.

[uribalb]

@metonym Thanks. I think your comment should be in the docs and readme, as the official method for css optimization (for now) since svelte people tend to care a lot about these things

[ion1]

Would it be feasible for the components to import their own CSS directly, so you would only need have things such as the theme and the reset CSS in the global style?

[metonym]

@ion1 I've previously explored generating CSS for individual components from the source SCSS. However, even by taking out the reset styles, there is still a lot of duplicate CSS because many components import the same SCSS mixins/helpers.

Therefore, you'll still need an extra, build-step that removes unused selectors.

Currently, the best approach (recommended by the core Carbon team) is to use SCSS and import individual component styles.