Migrate from Rollup to Gulp and add Buble

gulpfile.js

@@ -0,0 +1,81 @@
+const path = require('path');
+
+const gulp = require('gulp');
+const postcss = require('gulp-postcss');
+const rename = require('gulp-rename');
+
+const autoprefixer = require('autoprefixer');
+const banner = require('postcss-banner');
+const calc = require('postcss-calc');
+const cssnano = require('cssnano');
+const cssVariables = require('postcss-css-variables');
+const mixins = require('postcss-mixins');
+
+const rollup = require('rollup');
+const loadConfigFile = require('rollup/dist/loadConfigFile');
+
+const pkg = require('./package.json');
+const networks = require('./src/networksMixin');
+
+const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
+const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
+
+async function js() {
+  const { options, warnings } = await loadConfigFile(
+    path.resolve(__dirname, 'rollup.config.js'),
+  );
+
+  if (warnings.count > 0) {
+    // eslint-disable-next-line no-console
+    console.warn(`${warnings.count} warnings`);
+    warnings.flush();
+  }
+
+  const allOutputs = [];
+
+  options.forEach((optionObj) => {
+    optionObj.output.forEach((outputObj) => {
+      allOutputs.push([rollup.rollup(optionObj), outputObj]);
+    });
+  });
+
+  await Promise.all(allOutputs.map(
+    ([bundlePromise, outputObj]) => bundlePromise.then((bundle) => bundle.write(outputObj)),
+  ));
+}
+
+async function css() {
+  gulp.src(path.resolve(__dirname, 'src', 'style.css'))
+    .pipe(postcss({
+      plugins: [
+        mixins({
+          mixins: {
+            networks,
+          },
+        }),
+        cssVariables,
+        calc,
+        (!isDev) && cssnano({
+          preset: 'default',
+        }),
+        autoprefixer,
+        banner({
+          banner: bannerText,
+          important: true,
+        }),
+      ],
+    }))
+    .pipe(rename({
+      basename: pkg.name,
+      extname: isDev ? '.css' : '.min.css',
+    }))
+    .pipe(gulp.dest(path.resolve(__dirname, isDev ? 'dev' : 'dist')));
+}
+
+exports.default = gulp.parallel(js, css);
+exports.dev = function dev() {
+  gulp.watch('src/networks*.js', gulp.parallel(js, css));
+  gulp.watch('src/shareon.js', js);
+  gulp.watch('src/autoinit.js', js);
+  gulp.watch('src/style.css', css);
+};

package.json

@@ -32,8 +32,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -w -c",
+    "build": "gulp",
+    "dev": "cross-env NODE_ENV=development gulp dev",
     "pretest": "run-s build",
     "test:lint": "eslint --ext .js,.ts ./src/",
     "test:size": "size-limit",
@@ -42,13 +42,20 @@
   },
   "devDependencies": {
     "@nickkaramoff/rollup-plugin-consts": "^1.1.0",
+    "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-strip": "^2.0.0",
     "@rollup/plugin-typescript": "^5.0.2",
     "@size-limit/preset-small-lib": "^4.5.5",
+    "autoprefixer": "^10.0.0",
+    "browserslist": "^4.14.3",
+    "cross-env": "^7.0.2",
     "cssnano": "^4.1.10",
     "eslint": "^7.5.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-plugin-import": "^2.22.0",
+    "gulp": "^4.0.2",
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^2.0.0",
     "np": "^6.3.2",
     "npm-run-all": "^4.1.5",
     "postcss-banner": "^3.0.2",
@@ -57,7 +64,6 @@
     "postcss-mixins": "^6.2.3",
     "rollup": "^2.23.0",
     "rollup-plugin-license": "^2.1.0",
-    "rollup-plugin-postcss": "^3.1.3",
     "rollup-plugin-terser": "^6.1.0",
     "size-limit": "^4.5.5"
   },

postcss.config.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/order */
+/* eslint-disable global-require */
+
+const pkg = require('./package.json');
+
+const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
+const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
+
+const plugins = [
+  require('postcss-mixins')({
+    mixins: {
+      networks: require('./src/networksMixin'),
+    },
+  }),
+  require('postcss-css-variables'),
+  require('postcss-calc'),
+];
+
+if (!isDev) {
+  plugins.push(
+    require('cssnano')({
+      preset: 'default',
+    }),
+    require('autoprefixer'),
+    require('postcss-banner')({
+      banner: bannerText,
+      important: true,
+    }),
+  );
+}
+
+module.exports = {
+  plugins,
+};

rollup.config.js

@@ -1,16 +1,10 @@
+import buble from '@rollup/plugin-buble';
 import consts from '@nickkaramoff/rollup-plugin-consts';
 import license from 'rollup-plugin-license';
-import postcss from 'rollup-plugin-postcss';
-import postcssPluginBanner from 'postcss-banner';
-import postcssPluginCalc from 'postcss-calc';
-import postcssPluginCssnano from 'cssnano';
-import postcssPluginMixins from 'postcss-mixins';
-import postcssPluginVariables from 'postcss-css-variables';
 import strip from '@rollup/plugin-strip';
 import { terser } from 'rollup-plugin-terser';
 
-import { urlBuilderMap } from './src/networks';
-import networksMixin from './src/networksMixin';
+const { urlBuilderMap } = require('./src/networks');
 
 const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
 
@@ -20,107 +14,61 @@ const outputDir = isDev ? './dev/' : './dist/';
 
 const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
 
-/**
- * Plugins to build the project
- *
- * @type {Plugin[]}
- */
 const plugins = [
   consts({
     urlBuilderMap,
   }),
-];
-
-if (!isDev) {
-  plugins.push(strip({
+  (!isDev) && strip({
     debugger: true,
-    include: ['**/*.js', '**/*.ts'],
+    include: ['**/*.js'],
     functions: ['console.log', 'console.debug', 'assert.*'],
     sourceMap: false,
-  }));
-
-  plugins.push(license({
+  }),
+  (!isDev) && license({
     banner: {
       commentStyle: 'ignored',
       content: bannerText,
     },
-  }));
-}
-
-plugins.push(postcss({
-  extract: `${pkg.name}.min.css`,
-  plugins: [
-    postcssPluginMixins({
-      mixins: {
-        networks: networksMixin,
-      },
   }),
-    postcssPluginVariables(),
-    postcssPluginCalc(),
-    (!isDev) && postcssPluginCssnano({
-      preset: 'default',
-    }),
-    postcssPluginBanner({
-      banner: bannerText,
-      important: true,
-    }),
-  ],
-}));
+  (!isDev) && buble({ transforms: { modules: false } }),
+];
 
-/**
- * @typedef {import('rollup').OutputOptions} OutputOptions
- */
-
-/**
- *
- * @param {string} baseDir base directory for the output files
- * @return {OutputOptions[]} array of outputs
- */
-const getOutputs = (baseDir) => {
+const getOutput = (baseDir) => {
   const defaultParameters = {
     name: pkg.name,
     exports: 'default',
   };
-  const result = [];
 
-  if (isDev) {
-    result.push({
+  return [
+    {
       ...defaultParameters,
       format: 'iife',
-      file: `${baseDir}${pkg.name}.js`,
-    });
-  } else {
-    result.push({
+      file: `${baseDir}${pkg.name}${isDev ? '' : '.min'}.js`,
+      plugins: isDev ? [] : [terser({ output: { comments: false } })],
+    },
+    (!isDev) && {
       ...defaultParameters,
       format: 'cjs',
       file: `${baseDir}${pkg.name}.cjs`,
-    });
-    result.push({
+    },
+    (!isDev) && {
       ...defaultParameters,
       format: 'esm',
       file: `${baseDir}${pkg.name}.mjs`,
-    });
-    result.push({
-      ...defaultParameters,
-      format: 'iife',
-      file: `${baseDir}${pkg.name}.min.js`,
-      plugins: [terser({ output: { comments: false } })],
-    });
-  }
-
-  return result;
+    },
+  ];
 };
 
 const config = [
   {
     input: './src/autoinit.js',
-    output: getOutputs(`${outputDir}`),
+    output: getOutput(`${outputDir}`),
     plugins,
   },
   {
     input: './src/shareon.js',
-    output: getOutputs(`${outputDir}noinit/`),
-    plugins: plugins.slice(0, -1),
+    output: getOutput(`${outputDir}noinit/`),
+    plugins,
   },
 ];
 

src/autoinit.js

@@ -1,5 +1,3 @@
-import './style.css';
-
 import initializeShareon from './shareon';
 
 window.onload = () => {

src/networks.js

@@ -101,7 +101,7 @@ const urlBuilderMap = Object.fromEntries(
     ]),
 );
 
-export {
-  NETWORKS as fullNetworkMap,
+module.exports = {
+  fullNetworkMap: NETWORKS,
   urlBuilderMap,
 };

src/networksMixin.js

@@ -1,6 +1,6 @@
-import { fullNetworkMap } from './networks';
+const { fullNetworkMap } = require('./networks');
 
-export default function networks() {
+module.exports = function networks() {
   const ruleObj = {};
 
   Object.entries(fullNetworkMap).forEach(([name, network]) => {
@@ -20,4 +20,4 @@ export default function networks() {
   });
 
   return ruleObj;
-}
+};