CSS and Performance Improvement

[carbon-design-system]

CSS and Performance Improvement

[metonym]

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

[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.

[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.

[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 sveltejs/svelte-preprocess#44).

You need postcss installed.

[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

[uribalb]

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

[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 ?

[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.