build(tools): build theme with webpack

.github/workflows/node.yml

@@ -3,7 +3,7 @@ name: Node CI
 
 on:
   push:
-    branches: [main, develop, v1-dev]
+    branches: [main, v1-dev]
   pull_request:
     branches: [main]
 

.gitignore

@@ -23,3 +23,4 @@ Thumbs.db
 # Folders to ignore
 /archive/
 /node_modules/
+/build/

.webpack/webpack.common.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const { extractScss } = require('./webpack.parts.js');
+
+const themePath = path.resolve(__dirname, '../themes/boodark');
+
+exports.commonConfig = ({ mode }) => (
+  merge(
+    {
+      mode,
+      devtool: 'source-map',
+      entry: {
+        'theme': themePath + '/scss/theme.scss',
+        'theme-nord': themePath + '/scss/theme-nord.scss',
+        'theme-teal': themePath + '/scss/theme-teal.scss',
+        'theme-orange': themePath + '/scss/theme-orange.scss',
+      },
+      output: {
+        filename: '../../../build/[name].js',
+        path: themePath + '/css',
+      },
+    },
+    extractScss(),
+  )
+);

.webpack/webpack.config.js

@@ -0,0 +1,19 @@
+const { merge } = require('webpack-merge');
+const { commonConfig } = require('./webpack.common.js');
+const { productionConfig } = require('./webpack.production.js');
+const { developmentConfig } = require('./webpack.development.js');
+
+const getConfig = ({ mode }) => {
+  switch (mode) {
+    case 'production':
+      return merge(commonConfig({ mode }), productionConfig());
+    case 'development':
+      return merge(commonConfig({ mode }), developmentConfig());
+    default:
+      throw new Error(`Trying to use an unknown mode, ${mode}`);
+  }
+};
+
+module.exports = (env, options) => getConfig({
+  mode: options.mode ?? 'production',
+});

.webpack/webpack.development.js

@@ -0,0 +1,4 @@
+exports.developmentConfig = () => ({
+  name: 'CSS development',
+  // devtool: 'source-map',
+});

.webpack/webpack.parts.js

@@ -0,0 +1,32 @@
+const autoprefixer = require('autoprefixer');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RtlCssPlugin = require('rtlcss-webpack-plugin');
+
+exports.extractScss = () => ({
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader', options: { url: false } },
+          { loader: 'postcss-loader', options: {
+            postcssOptions: {
+              plugins: [ autoprefixer() ],
+            },
+          }},
+          { loader: 'sass-loader' },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
+    new RtlCssPlugin({
+      filename: '[name].rtl.css',
+    }),
+  ],
+});

.webpack/webpack.production.js

@@ -0,0 +1,22 @@
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
+exports.productionConfig = () => ({
+  name: 'CSS production',
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CssMinimizerPlugin({
+        minify: CssMinimizerPlugin.cssoMinify,
+        minimizerOptions: {
+          forceMediaMerge: true,
+          comments: false,
+        },
+      }),
+    ],
+  },
+  performance: {
+    hints: 'warning',
+    maxAssetSize: 285000,
+    maxEntrypointSize: 570000,
+  },
+});

README.md

@@ -32,7 +32,7 @@ The best way to see **BooDark** in action is to try it on **phpMyAdmin** demo se
 
 ## Installation
 
-1. Download latest [release](https://github.com/adorade/boodark/releases/latest/download/boodark-v1.0.3.zip)
+1. Download latest [release](https://github.com/adorade/boodark/releases/latest/download/boodark-v1.1.0.zip)
 2. Extract the archive files
 3. Go to the phpMyAdmin files (C:\xampp\phpmyadmin for XAMPP) then go to the `themes` folder and add here the `boodark` folder
 4. Select `BooDark` theme on the home page
@@ -67,7 +67,7 @@ To build the theme or customize it with your preferences you must have **Node**,
     # production, minified files
     yarn run build
     # development
-    yarn run css-dev
+    yarn run build:dev
     ```
 
 6. Theme files are in `themes/boodark`.

package.json

@@ -1,32 +1,42 @@
 {
   "name": "boodark",
-  "version": "1.1.0",
+  "version": "1.1.0-dev",
   "description": "Bootstrap Dark theme for phpMyAdmin",
   "repository": "https://github.com/adorade/boodark.git",
   "author": "Adorade",
   "scripts": {
     "postinstall": "yarn run build",
-    "build": "yarn run css-clean && yarn run css-compile && yarn run css-prefix && yarn run css-rtl",
-    "css-clean": "rm -rf themes/boodark/css",
-    "css-compile": "sass themes/boodark/scss:themes/boodark/css --style=compressed",
-    "css-dev": "yarn run css-clean && sass themes/boodark/scss:themes/boodark/css --style=expanded --watch",
-    "css-lint": "stylelint themes/boodark/scss/*.scss",
-    "css-prefix": "postcss themes/boodark/css/*.css --use autoprefixer --replace",
-    "css-rtl": "rtlcss -c .rtlcssrc.json themes/boodark/css/theme.css"
+    "build": "yarn run build:prod",
+    "build:analyze": "webpack --progress --mode=production --analyze",
+    "build:dev": "webpack --progress --mode=development",
+    "build:prod": "webpack --progress --mode=production",
+    "watch": "webpack --progress --watch --mode=development",
+    "css:lint": "stylelint 'public/themes/boodark/scss/*.scss'"
   },
   "dependencies": {
-    "autoprefixer": "10.4.13",
+    "@babel/runtime": "7.21.0",
+    "@popperjs/core": "2.11.6",
+    "autoprefixer": "10.4.14",
     "bootstrap": "5.2.3",
+    "css-loader": "6.7.3",
+    "css-minimizer-webpack-plugin": "4.2.2",
+    "mini-css-extract-plugin": "2.7.3",
     "postcss": "8.4.21",
     "postcss-cli": "10.1.0",
+    "postcss-loader": "7.0.2",
     "rtlcss": "4.0.0",
-    "sass": "1.58.3"
+    "rtlcss-webpack-plugin": "4.0.7",
+    "sass": "1.59.2",
+    "sass-loader": "13.2.0",
+    "webpack": "5.76.1",
+    "webpack-cli": "5.0.1",
+    "webpack-merge": "5.8.0"
   },
   "devDependencies": {
-    "stylelint": "14.12.0",
-    "stylelint-config-recommended-scss": "7.0.0",
-    "stylelint-config-standard-scss": "5.0.0",
-    "stylelint-scss": "4.3.0"
+    "stylelint": "14.16.1",
+    "stylelint-config-recommended-scss": "8.0.0",
+    "stylelint-config-standard-scss": "6.1.0",
+    "stylelint-scss": "4.4.0"
   },
   "engines": {
     "node": ">=14"