From 80309acde703b2477ee6e54ef5a97ee367134aa7 Mon Sep 17 00:00:00 2001 From: Saqib Islam Date: Mon, 25 Dec 2023 14:36:35 +0500 Subject: [PATCH 1/2] Updated Vite folder to properly setup PostCSS with PurgeCSS for removing all unused styles on build. --- vite/package-lock.json | 279 +++++++++++++++++++++++++++++++++++++++- vite/package.json | 5 +- vite/postcss.config.cjs | 42 ++++++ vite/vite.config.js | 11 +- 4 files changed, 329 insertions(+), 8 deletions(-) create mode 100644 vite/postcss.config.cjs diff --git a/vite/package-lock.json b/vite/package-lock.json index eb041010..089f3102 100644 --- a/vite/package-lock.json +++ b/vite/package-lock.json @@ -1,18 +1,20 @@ { "name": "vite", - "version": "0.0.0", + "version": "0.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "vite", - "version": "0.0.0", + "version": "0.0.1", "license": "MIT", "dependencies": { "@popperjs/core": "^2.11.8", "bootstrap": "^5.3.2" }, "devDependencies": { + "@fullhuman/postcss-purgecss": "^5.0.0", + "postcss": "^8.4.32", "sass": "^1.69.5", "vite": "^5.0.4" } @@ -369,6 +371,18 @@ "node": ">=12" } }, + "node_modules/@fullhuman/postcss-purgecss": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-5.0.0.tgz", + "integrity": "sha512-onDS/b/2pMRzqSoj4qOs2tYFmOpaspjTAgvACIHMPiicu1ptajiBruTrjBzTKdxWdX0ldaBb7wj8nEaTLyFkJw==", + "dev": true, + "dependencies": { + "purgecss": "^5.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, "node_modules/@popperjs/core": { "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", @@ -547,6 +561,12 @@ "node": ">= 8" } }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true + }, "node_modules/binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -574,6 +594,15 @@ "@popperjs/core": "^2.11.8" } }, + "node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, "node_modules/braces": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", @@ -613,6 +642,27 @@ "fsevents": "~2.3.2" } }, + "node_modules/commander": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", + "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "dev": true, + "engines": { + "node": "^12.20.0 || >=14" + } + }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/esbuild": { "version": "0.19.8", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.8.tgz", @@ -662,6 +712,12 @@ "node": ">=8" } }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -676,6 +732,25 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/glob": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", + "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^5.0.1", + "once": "^1.3.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/glob-parent": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", @@ -694,6 +769,22 @@ "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", "dev": true }, + "node_modules/inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -736,6 +827,18 @@ "node": ">=0.12.0" } }, + "node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -763,6 +866,15 @@ "node": ">=0.10.0" } }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, + "dependencies": { + "wrappy": "1" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -809,6 +921,34 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-selector-parser": { + "version": "6.0.13", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", + "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/purgecss": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-5.0.0.tgz", + "integrity": "sha512-RAnuxrGuVyLLTr8uMbKaxDRGWMgK5CCYDfRyUNNcaz5P3kGgD2b7ymQGYEyo2ST7Tl/ScwFgf5l3slKMxHSbrw==", + "dev": true, + "dependencies": { + "commander": "^9.0.0", + "glob": "^8.0.3", + "postcss": "^8.4.4", + "postcss-selector-parser": "^6.0.7" + }, + "bin": { + "purgecss": "bin/purgecss.js" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -887,6 +1027,12 @@ "node": ">=8.0" } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true + }, "node_modules/vite": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.5.tgz", @@ -941,6 +1087,12 @@ "optional": true } } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true } }, "dependencies": { @@ -1098,6 +1250,15 @@ "dev": true, "optional": true }, + "@fullhuman/postcss-purgecss": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-5.0.0.tgz", + "integrity": "sha512-onDS/b/2pMRzqSoj4qOs2tYFmOpaspjTAgvACIHMPiicu1ptajiBruTrjBzTKdxWdX0ldaBb7wj8nEaTLyFkJw==", + "dev": true, + "requires": { + "purgecss": "^5.0.0" + } + }, "@popperjs/core": { "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", @@ -1197,6 +1358,12 @@ "picomatch": "^2.0.4" } }, + "balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true + }, "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -1209,6 +1376,15 @@ "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", "requires": {} }, + "brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0" + } + }, "braces": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", @@ -1234,6 +1410,18 @@ "readdirp": "~3.6.0" } }, + "commander": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", + "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "dev": true + }, + "cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true + }, "esbuild": { "version": "0.19.8", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.8.tgz", @@ -1273,6 +1461,12 @@ "to-regex-range": "^5.0.1" } }, + "fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true + }, "fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -1280,6 +1474,19 @@ "dev": true, "optional": true }, + "glob": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", + "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^5.0.1", + "once": "^1.3.0" + } + }, "glob-parent": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", @@ -1295,6 +1502,22 @@ "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", "dev": true }, + "inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, + "requires": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, "is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -1325,6 +1548,15 @@ "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "dev": true }, + "minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "requires": { + "brace-expansion": "^2.0.1" + } + }, "nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -1337,6 +1569,15 @@ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true }, + "once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, + "requires": { + "wrappy": "1" + } + }, "picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -1360,6 +1601,28 @@ "source-map-js": "^1.0.2" } }, + "postcss-selector-parser": { + "version": "6.0.13", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", + "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + } + }, + "purgecss": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-5.0.0.tgz", + "integrity": "sha512-RAnuxrGuVyLLTr8uMbKaxDRGWMgK5CCYDfRyUNNcaz5P3kGgD2b7ymQGYEyo2ST7Tl/ScwFgf5l3slKMxHSbrw==", + "dev": true, + "requires": { + "commander": "^9.0.0", + "glob": "^8.0.3", + "postcss": "^8.4.4", + "postcss-selector-parser": "^6.0.7" + } + }, "readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -1416,6 +1679,12 @@ "is-number": "^7.0.0" } }, + "util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true + }, "vite": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.5.tgz", @@ -1427,6 +1696,12 @@ "postcss": "^8.4.32", "rollup": "^4.2.0" } + }, + "wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true } } } diff --git a/vite/package.json b/vite/package.json index 7b195eb6..b4600ffa 100644 --- a/vite/package.json +++ b/vite/package.json @@ -1,9 +1,10 @@ { "name": "vite", "description": "Include Bootstrap's source Sass and individual JavaScript plugins with Vite.", - "version": "0.0.0", + "version": "0.0.1", "private": true, "repository": "twbs/examples", + "type": "module", "license": "MIT", "stackblitz": { "startCommand": "npm start" @@ -18,6 +19,8 @@ "bootstrap": "^5.3.2" }, "devDependencies": { + "@fullhuman/postcss-purgecss": "^5.0.0", + "postcss": "^8.4.32", "sass": "^1.69.5", "vite": "^5.0.4" } diff --git a/vite/postcss.config.cjs b/vite/postcss.config.cjs new file mode 100644 index 00000000..25b1fa61 --- /dev/null +++ b/vite/postcss.config.cjs @@ -0,0 +1,42 @@ +const IN_PRODUCTION = process.env.NODE_ENV === "production"; +const bootstrap = "node_modules/bootstrap" + +module.exports = { + plugins: [ + IN_PRODUCTION && require("@fullhuman/postcss-purgecss")({ + content: [ + "./src/index.html", + "./src/**/*.js", + + // --- Uncomment the required modules to keep the requireds styles. + + // `${bootstrap}/js/dist/alert.js`, + // `${bootstrap}/js/dist/base-component.js`, + // `${bootstrap}/js/dist/button.js`, + // `${bootstrap}/js/dist/carousel.js`, + // `${bootstrap}/js/dist/collapse.js`, + // `${bootstrap}/js/dist/dropdown.js`, + // `${bootstrap}/js/dist/modal.js`, + `${bootstrap}/js/dist/offcanvas.js`, + `${bootstrap}/js/dist/popover.js`, + // `${bootstrap}/js/dist/scrollspy.js`, + // `${bootstrap}/js/sdist/tab.js`, + // `${bootstrap}/js/dist/toast.js`, + // `${bootstrap}/js/dist/tooltip.js`, + ], + defaultExtractor(content) { + const contentWithoutStyleBlocks = content.replace( + //gi, + "" + ); + return ( + contentWithoutStyleBlocks.match( + /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g + ) || [] + ); + }, + keyframes: true, + variables: true + }), + ], +}; diff --git a/vite/vite.config.js b/vite/vite.config.js index 5349ca53..eb44e788 100644 --- a/vite/vite.config.js +++ b/vite/vite.config.js @@ -1,11 +1,12 @@ import { resolve } from 'path' export default { - root: resolve(__dirname, 'src'), + root: resolve(__dirname, "src"), + base: "./", build: { - outDir: '../dist' + outDir: "../dist", }, server: { - port: 8080 - } -} + port: 8080, + }, +}; From 320bd677e27ee311db35141ee428469962698d0a Mon Sep 17 00:00:00 2001 From: Saqib Islam Date: Tue, 26 Dec 2023 11:42:46 +0500 Subject: [PATCH 2/2] Revert version number changes in package.json Reverted the inclusion fo type: module setting made in vite.config.js Additionally, I introduced flexibility for users by allowing them to selectively include individual JS modules or opt for the entire Bootstrap bundle JS. This gives users the option to tailor their build based on their specific module requirements. This approach aims to enhance user experience and provides more control over the project configuration. --- vite/package-lock.json | 4 +- vite/package.json | 3 +- vite/postcss.config.cjs | 91 ++++++++++++++++++++++++++--------------- vite/vite.config.js | 11 +++-- 4 files changed, 65 insertions(+), 44 deletions(-) diff --git a/vite/package-lock.json b/vite/package-lock.json index 089f3102..2401594f 100644 --- a/vite/package-lock.json +++ b/vite/package-lock.json @@ -1,12 +1,12 @@ { "name": "vite", - "version": "0.0.1", + "version": "0.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "vite", - "version": "0.0.1", + "version": "0.0.0", "license": "MIT", "dependencies": { "@popperjs/core": "^2.11.8", diff --git a/vite/package.json b/vite/package.json index b4600ffa..af690769 100644 --- a/vite/package.json +++ b/vite/package.json @@ -1,10 +1,9 @@ { "name": "vite", "description": "Include Bootstrap's source Sass and individual JavaScript plugins with Vite.", - "version": "0.0.1", + "version": "0.0.0", "private": true, "repository": "twbs/examples", - "type": "module", "license": "MIT", "stackblitz": { "startCommand": "npm start" diff --git a/vite/postcss.config.cjs b/vite/postcss.config.cjs index 25b1fa61..34d2322e 100644 --- a/vite/postcss.config.cjs +++ b/vite/postcss.config.cjs @@ -3,40 +3,63 @@ const bootstrap = "node_modules/bootstrap" module.exports = { plugins: [ - IN_PRODUCTION && require("@fullhuman/postcss-purgecss")({ - content: [ - "./src/index.html", - "./src/**/*.js", + IN_PRODUCTION && + require("@fullhuman/postcss-purgecss")({ + content: [ + "./src/index.html", + "./src/**/*.js", - // --- Uncomment the required modules to keep the requireds styles. - - // `${bootstrap}/js/dist/alert.js`, - // `${bootstrap}/js/dist/base-component.js`, - // `${bootstrap}/js/dist/button.js`, - // `${bootstrap}/js/dist/carousel.js`, - // `${bootstrap}/js/dist/collapse.js`, - // `${bootstrap}/js/dist/dropdown.js`, - // `${bootstrap}/js/dist/modal.js`, - `${bootstrap}/js/dist/offcanvas.js`, - `${bootstrap}/js/dist/popover.js`, - // `${bootstrap}/js/dist/scrollspy.js`, - // `${bootstrap}/js/sdist/tab.js`, - // `${bootstrap}/js/dist/toast.js`, - // `${bootstrap}/js/dist/tooltip.js`, - ], - defaultExtractor(content) { - const contentWithoutStyleBlocks = content.replace( - //gi, - "" - ); - return ( - contentWithoutStyleBlocks.match( - /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g - ) || [] - ); - }, - keyframes: true, - variables: true - }), + /* + To optimize your final build size, PurgeCSS is configured to remove all unused styles. + + If you have specific Bootstrap JavaScript modules in your project that need to be included + in the final build, uncomment the corresponding lines below to exclude the styles created + by those specific JS modules from purging. + + Example: + If your project includes a carousel, uncomment the line: + // `${bootstrap}/js/dist/carousel.js`, + + */ + // `${bootstrap}/js/dist/alert.js`, + // `${bootstrap}/js/dist/base-component.js`, + // `${bootstrap}/js/dist/button.js`, + // `${bootstrap}/js/dist/carousel.js`, + // `${bootstrap}/js/dist/collapse.js`, + // `${bootstrap}/js/dist/dropdown.js`, + // `${bootstrap}/js/dist/modal.js`, + `${bootstrap}/js/dist/offcanvas.js`, + `${bootstrap}/js/dist/popover.js`, + // `${bootstrap}/js/dist/scrollspy.js`, + // `${bootstrap}/js/sdist/tab.js`, + // `${bootstrap}/js/dist/toast.js`, + // `${bootstrap}/js/dist/tooltip.js`, + + /* + If you are unsure about which JS modules your project needs, + you can comment out or remove all of the above individual modules + and include the entire Bootstrap JavaScript file. + Just uncomment the line below, and you are good to go. + + Note: Excluding the entire bootstrap bundle javascript may increase + the final build size of the css file by a few kilobytes. + */ + + // `${bootstrap}/dist/js/bootstrap.bundle.min.js`, + ], + defaultExtractor(content) { + const contentWithoutStyleBlocks = content.replace( + //gi, + "" + ); + return ( + contentWithoutStyleBlocks.match( + /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g + ) || [] + ); + }, + keyframes: true, + variables: true, + }), ], }; diff --git a/vite/vite.config.js b/vite/vite.config.js index eb44e788..5349ca53 100644 --- a/vite/vite.config.js +++ b/vite/vite.config.js @@ -1,12 +1,11 @@ import { resolve } from 'path' export default { - root: resolve(__dirname, "src"), - base: "./", + root: resolve(__dirname, 'src'), build: { - outDir: "../dist", + outDir: '../dist' }, server: { - port: 8080, - }, -}; + port: 8080 + } +}