yarn add --dev gulp gulp-postcss autoprefixer cssnano postcss-modules gulp-concat gulp-remember

// gulpfile.js

const fs = require("fs");
const path = require("path");
const { src, dest, task, watch, lastRun, parallel } = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const modules = require("postcss-modules");
const concat = require("gulp-concat");
const remember = require("gulp-remember");

function css() {
  return src(["**.css"], { sourcemaps: true, since: lastRun(css) })
    .pipe(postcss([modules(), autoprefixer()]))
    .pipe(remember("css"))
    .pipe(concat("styles.css"))
    .pipe(postcss([cssnano()]))
    .pipe(dest("src/static", { sourcemaps: true }));
}

function watchCss() {
  const watcher = watch("**.css", css);
  watcher.on("change", file => {
    remember.forget("css", path.join(process.cwd(), file));
  });
  watcher.on("unlink", file => {
    fs.unlink(`${file}.json`, err => {});
  });
}

exports.build = css;
exports.default = parallel(css, watchCss);

# To build and watch rebuild CSS
gulp

# To just build CSS
gulp build

{
  "scripts": {
    "build-production": "gulp build && fusion build --production"
  }
}

yarn add concurrently --dev

{
  "scripts": {
    "dev": "concurrently gulp 'fusion dev'"
  }
}

src/
├── components/
│   ├── foo.js
│   ├── foo.css
│   └── foo.css.json (generated)
└── static/
    └── styles.css (generated)

// foo.css

.bar {
  color: red;
}

.baz {
  color: green;
}

// foo.js

import styles from "./foo.css.json";

export const Foo = () => {
  return (
    <div className={styles.bar}>
      <div className={styles.baz} />
    </div>
  );
};

// In root component

import { assetUrl } from "fusion-core";
import { Helmet } from "fusion-plugin-react-helmet-async";

const css = assetUrl("../static/styles.css");

const app = (
  <App>
    <Helmet>
      <link rel="stylesheet" href={css} />
    </Helmet>
  </App>
);