compile react component to both es and commonjs modules, with typescript and less in css modules

gulpfile.js

/**
 * compile react component to both es and commonjs modules,
 * with typescript and less in css modules
 *
 * @type {Gulp}
 */

const gulp = require('gulp')
const babel = require('gulp-babel')
const ts = require('gulp-typescript')
const less = require('gulp-less')
const postcss = require('gulp-postcss')
const sourcemaps = require('gulp-sourcemaps')
const rimraf = require('rimraf')
const merge = require('merge2')


// es modules dir
const ES_OUT = 'es'
// commonjs modules dir
const LIB_OUT = 'lib'

const SCOPED_FORMAT = '[name]-[local]-[hash:base64:5]'


const babelCssModulesPlugins = [
  [
    'transform-rename-import',
    {
      original: '^(\\.+/.+?)\\.less$',
      replacement: '$1.css',
    },
  ],
  [
    'css-modules-transform',
    {
      camelCase: true,
      keepImport: true,
      extensions: ['.css'],
      generateScopedName: SCOPED_FORMAT,
    },
  ],
]

const postcssPlugins = [
  require('postcss-modules')({
    getJSON: () => {},
    generateScopedName: SCOPED_FORMAT,
  }),
]

const babelPipe = (modules = false) => babel({
  presets: [
    [
      '@babel/preset-env',
      { modules },
    ],
  ],
  plugins: babelCssModulesPlugins,
})

const tsProject = ts.createProject('tsconfig.json')

gulp.task('clean', (done) => {
  rimraf.sync(`{${ES_OUT},${LIB_OUT},dist,build}`)
  return done()
})

gulp.task('copyAssets', () => (
  gulp.src('./src/**/*')
    .pipe(gulp.dest(`./${ES_OUT}`))
    .pipe(gulp.dest(`./${LIB_OUT}`))
))

gulp.task('compileLess', () => (
  gulp.src('./src/**/*.less')
    .pipe(less())
    .pipe(gulp.dest(`./${ES_OUT}`))
    .pipe(gulp.dest(`./${LIB_OUT}`))
))

gulp.task('postcss', () =>
  merge([
    gulp.src(`./${ES_OUT}/**/*.css`)
      .pipe(postcss(postcssPlugins))
      .pipe(gulp.dest(`./${ES_OUT}`)),
    gulp.src(`./${LIB_OUT}/**/*.css`)
      .pipe(postcss(postcssPlugins))
      .pipe(gulp.dest(`./${LIB_OUT}`)),
  ]),
)

gulp.task('compileTS', () => {
  const tsResult = gulp.src('./src/**/*.{ts,tsx}')
    .pipe(tsProject())
  return merge([
    tsResult.dts
      .pipe(gulp.dest(`./${ES_OUT}`))
      .pipe(gulp.dest(`./${LIB_OUT}`)),
    tsResult.js
      .pipe(gulp.dest(`./${ES_OUT}`))
      .pipe(gulp.dest(`./${LIB_OUT}`)),
  ])
})

gulp.task('compileES', () => (
  gulp.src(`./${ES_OUT}/**/*.{js,jsx}`)
    .pipe(sourcemaps.init())
    .pipe(babelPipe())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(`./${ES_OUT}`))
))

gulp.task('compileLib', () => (
  gulp.src(`./${LIB_OUT}/**/*.{js,jsx}`)
    .pipe(sourcemaps.init())
    .pipe(babelPipe('commonjs'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(`./${LIB_OUT}`))
))

gulp.task('cleanJSX', (done) => {
  rimraf.sync(`./{${ES_OUT},${LIB_OUT}}/**/*{.jsx,[^.d].ts,.tsx,.less}`)
  return done()
})

gulp.task('default', gulp.series(
  'clean',
  'copyAssets',
  gulp.parallel(
    'compileLess',
    'compileTS',
  ),
  gulp.parallel(
    'compileES',
    'compileLib',
  ),
  gulp.parallel(
    'postcss',
    'cleanJSX',
  ),
))

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist",
    "module": "esnext",
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "sourceMap": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "declaration": true,
    "paths": {
      "src/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "scripts", "dist", "es", "lib", "build", "./*.js"]
}