carbon-components-svelte/scripts/build-css.js

const fs = require("fs");
const sass = require("node-sass");
const autoprefixer = require("autoprefixer");
const postcss = require("postcss");
const cssnano = require("cssnano");
const path = require("path");
const { promisify } = require("util");

const writeFile = promisify(fs.writeFile);
const sassRender = promisify(sass.render);

const shared = {
  globals: `
    $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 "node_modules/carbon-components-10.19/scss/globals/scss/_css--reset.scss";
    @import "node_modules/carbon-components-10.19/scss/globals/scss/_css--font-face.scss";
    @import "node_modules/carbon-components-10.19/scss/globals/scss/_css--helpers.scss";
    @import "node_modules/carbon-components-10.19/scss/globals/scss/_css--body.scss";
    @import "node_modules/carbon-components-10.19/scss/globals/grid/_grid.scss";
  `,
  components: `
    @import "node_modules/carbon-components-10.19/scss/components/accordion/accordion";
    @import "node_modules/carbon-components-10.19/scss/components/breadcrumb/breadcrumb";
    @import "node_modules/carbon-components-10.19/scss/components/button/button";
    @import "node_modules/carbon-components-10.19/scss/components/checkbox/checkbox";
    @import "node_modules/carbon-components-10.19/scss/components/code-snippet/code-snippet";
    @import "node_modules/carbon-components-10.19/scss/components/combo-box/combo-box";
    @import "node_modules/carbon-components-10.19/scss/components/content-switcher/content-switcher";
    @import "node_modules/carbon-components-10.19/scss/components/copy-button/copy-button";
    @import "node_modules/carbon-components-10.19/scss/components/data-table/data-table";
    @import "node_modules/carbon-components-10.19/scss/components/date-picker/date-picker";
    @import "node_modules/carbon-components-10.19/scss/components/dropdown/dropdown";
    @import "node_modules/carbon-components-10.19/scss/components/file-uploader/file-uploader";
    @import "node_modules/carbon-components-10.19/scss/components/form/form";
    @import "node_modules/carbon-components-10.19/scss/components/inline-loading/inline-loading";
    @import "node_modules/carbon-components-10.19/scss/components/link/link";
    @import "node_modules/carbon-components-10.19/scss/components/list/list";
    @import "node_modules/carbon-components-10.19/scss/components/list-box/list-box";
    @import "node_modules/carbon-components-10.19/scss/components/loading/loading";
    @import "node_modules/carbon-components-10.19/scss/components/modal/modal";
    @import "node_modules/carbon-components-10.19/scss/components/multi-select/multi-select";
    @import "node_modules/carbon-components-10.19/scss/components/notification/inline-notification";
    @import "node_modules/carbon-components-10.19/scss/components/notification/toast-notification";
    @import "node_modules/carbon-components-10.19/scss/components/number-input/number-input";
    @import "node_modules/carbon-components-10.19/scss/components/overflow-menu/overflow-menu";
    @import "node_modules/carbon-components-10.19/scss/components/pagination/pagination";
    @import "node_modules/carbon-components-10.19/scss/components/pagination-nav/pagination-nav";
    @import "node_modules/carbon-components-10.19/scss/components/progress-indicator/progress-indicator";
    @import "node_modules/carbon-components-10.19/scss/components/radio-button/radio-button";
    @import "node_modules/carbon-components-10.19/scss/components/search/search";
    @import "node_modules/carbon-components-10.19/scss/components/select/select";
    @import "node_modules/carbon-components-10.19/scss/components/skeleton/skeleton";
    @import "node_modules/carbon-components-10.19/scss/components/slider/slider";
    @import "node_modules/carbon-components-10.19/scss/components/structured-list/structured-list";
    @import "node_modules/carbon-components-10.19/scss/components/tag/tag";
    @import "node_modules/carbon-components-10.19/scss/components/text-area/text-area";
    @import "node_modules/carbon-components-10.19/scss/components/text-input/text-input";
    @import "node_modules/carbon-components-10.19/scss/components/tile/tile";
    @import "node_modules/carbon-components-10.19/scss/components/time-picker/time-picker";
    @import "node_modules/carbon-components-10.19/scss/components/toggle/toggle";
    @import "node_modules/carbon-components-10.19/scss/components/toolbar/toolbar";
    @import "node_modules/carbon-components-10.19/scss/components/tooltip/tooltip";
    @import "node_modules/carbon-components-10.19/scss/components/ui-shell/ui-shell";

    @import "node_modules/carbon-components-10.18/scss/components/tabs/tabs";
  `,
};

const themes = {
  white: `
    $carbon--theme: $carbon--theme--white;
    @include carbon--theme();
  `,
  g10: `
    $carbon--theme: $carbon--theme--g10;
    @include carbon--theme();
  `,
  g90: `
    $carbon--theme: $carbon--theme--g90;
    @include carbon--theme();
  `,
  g100: `
    $carbon--theme: $carbon--theme--g100;
    @include carbon--theme();
  `,
  all: `
    :root[theme="white"] {
      @include carbon--theme($carbon--theme--white, true);
    }
    
    :root {
      @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);
    }
  `,
};

/**
 * Generate pre-compiled CSS for each Carbon theme.
 */
async function buildCss() {
  fs.rmdirSync(path.resolve("css"), { recursive: true });
  fs.mkdirSync(path.resolve("css"));

  Object.keys(themes).forEach(async (theme) => {
    try {
      const outFile = path.resolve("css", theme + ".css");
      const { css } = await sassRender({
        data: `
          $feature-flags: (
            enable-css-custom-properties: ${theme === "all"},
            grid-columns-16: true,
          );
          @import "node_modules/@carbon/themes/scss/themes";
          ${themes[theme]}
          ${shared.globals}
          ${shared.components}
        `,
        outFile,
        outputStyle: "compact",
        omitSourceMapUrl: true,
      });

      const prefixed = await postcss([
        autoprefixer({
          overrideBrowserslist: ["last 1 version", "ie >= 11", "Firefox ESR"],
        }),
      ]).process(css, { from: undefined });

      await writeFile(outFile, prefixed.css);
    } catch (e) {
      console.log(e);
    }
  });
}

buildCss();