Move all build config to Rollup

gulpfile.js

@@ -1,86 +0,0 @@
-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() {
-  const plugins = [
-    mixins({
-      mixins: {
-        networks,
-      },
-    }),
-    cssVariables,
-    calc,
-  ];
-
-  if (!isDev) {
-    plugins.push(
-      cssnano({
-        preset: 'default',
-      }),
-      autoprefixer(),
-      banner({
-        banner: bannerText,
-        important: true,
-      }),
-    );
-  }
-
-  gulp.src(path.resolve(__dirname, 'src', 'style.css'))
-    .pipe(postcss(plugins))
-    .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,9 +32,9 @@
     "dist"
   ],
   "scripts": {
-    "build": "gulp",
+    "build": "rollup --config",
-    "build:dev": "cross-env NODE_ENV=development gulp",
+    "build:dev": "cross-env NODE_ENV=development rollup --config",
-    "dev": "cross-env NODE_ENV=development gulp dev",
+    "dev": "cross-env NODE_ENV=development rollup --config --watch",
     "lint": "eslint src/*.js",
     "size": "size-limit",
     "test": "yarn lint && yarn build && yarn size",
@@ -45,22 +45,21 @@
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-strip": "^2.0.0",
     "@size-limit/preset-small-lib": "^4.5.5",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.2.1",
     "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",
-    "postcss-banner": "^3.0.2",
+    "postcss": "^8.2.4",
-    "postcss-calc": "^7.0.2",
+    "postcss-banner": "^4.0.0",
+    "postcss-calc": "^8.0.0",
     "postcss-css-variables": "^0.17.0",
-    "postcss-mixins": "^6.2.3",
+    "postcss-mixins": "^7.0.2",
     "rollup": "^2.36.2",
+    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "size-limit": "^4.5.5"
   },

rollup.config.js

@@ -1,24 +1,58 @@
-import { join } from 'path';
+import { join, resolve } from 'path';
 
 import buble from '@rollup/plugin-buble';
 import consts from '@nickkaramoff/rollup-plugin-consts';
 import strip from '@rollup/plugin-strip';
+import postcss from 'rollup-plugin-postcss';
 import { terser } from 'rollup-plugin-terser';
 
+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 networks = require('./src/networksMixin');
 const { urlBuilderMap } = require('./src/networks');
-
-const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
-
 const pkg = require('./package.json');
 
-const outputDir = join(__dirname, 'dist');
+const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
+const outputDir = resolve('.', 'dist');
+const bannerText = `${pkg.name} v${pkg.version}`;
 
-const banner = `/*! ${pkg.name} v${pkg.version} */`;
+const postcssPlugins = [
+  mixins({
+    mixins: {
+      networks,
+    },
+  }),
+  cssVariables,
+  calc,
+];
 
-const plugins = [
+if (!isDev) {
+  postcssPlugins.push(
+    cssnano({
+      preset: 'default',
+    }),
+    autoprefixer(),
+    banner({
+      banner: bannerText,
+      important: true,
+      inline: true,
+    }),
+  );
+}
+
+const getPlugins = (css) => [
   consts({
     urlBuilderMap,
   }),
+  css && postcss({
+    extract: resolve(join(outputDir, 'shareon.min.css')),
+    plugins: postcssPlugins,
+  }),
   (!isDev) && strip({
     debugger: true,
     include: ['**/*.js'],
@@ -44,19 +78,19 @@ const getOutput = (baseDir) => {
       format: 'iife',
       file: join(baseDir, `${pkg.name}${isDev ? '' : '.min'}.js`),
       plugins: isDev ? [] : [terser({ output: { comments: /^!/ } })],
-      banner,
+      banner: `/*! ${bannerText} */`,
     },
     (!isDev) && {
       ...defaultParameters,
       format: 'cjs',
       file: join(baseDir, `${pkg.name}.cjs`),
-      banner,
+      banner: `/*! ${bannerText} */`,
     },
     (!isDev) && {
       ...defaultParameters,
       format: 'esm',
       file: join(baseDir, `${pkg.name}.mjs`),
-      banner,
+      banner: `/*! ${bannerText} */`,
     },
   ];
 };
@@ -65,11 +99,11 @@ export default [
   {
     input: join(__dirname, 'src', 'autoinit.js'),
     output: getOutput(outputDir),
-    plugins,
+    plugins: getPlugins(true),
   },
   {
-    input: join(__dirname, 'src', 'autoinit.js'),
+    input: join(__dirname, 'src', 'shareon.js'),
     output: getOutput(join(outputDir, 'noinit')),
-    plugins,
+    plugins: getPlugins(false),
   },
 ];

src/autoinit.js

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