perf: tree shaking Bootstrap CSS (#1736)

Author: cotes2020

.gitignore

@@ -17,6 +17,10 @@ package-lock.json
 
 # IDE configurations
 .idea
+.vscode
+!.vscode/settings.json
+!.vscode/extensions.json
 
 # Misc
+_sass/dist
 assets/js/dist

_config.yml

@@ -214,7 +214,7 @@ exclude:
   - tools
   - README.md
   - LICENSE
-  - rollup.config.js
+  - "*.config.js"
   - package*.json
 
 jekyll-archives:

_data/origin/basic.yml

@@ -4,9 +4,6 @@ webfonts: /assets/lib/fonts/main.css
 
 # Libraries
 
-bootstrap:
-  css: /assets/lib/bootstrap/bootstrap.min.css
-
 toc:
   css: /assets/lib/tocbot/tocbot.min.css
   js: /assets/lib/tocbot/tocbot.min.js

_data/origin/cors.yml

@@ -19,9 +19,6 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
 
 # Libraries
 
-bootstrap:
-  css: https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
-
 toc:
   css: https://cdn.jsdelivr.net/npm/[email protected]/dist/tocbot.min.css
   js: https://cdn.jsdelivr.net/npm/[email protected]/dist/tocbot.min.js

_includes/head.html

@@ -69,7 +69,9 @@
   {% endunless %}
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url }}">
+  {% unless jekyll.environment == 'production' %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+  {% endunless %}
 
   <!-- Theme style -->
   <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">

_posts/2019-08-09-getting-started.md

@@ -21,8 +21,8 @@ Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installat
 
 There are two ways to create a new repository for this theme:
 
-- [**Using the Chirpy Starter**](#option-1-using-the-chirpy-starter) - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
-- [**GitHub Fork**](#option-2-github-fork) - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
+- [**Using the Chirpy Starter**](#option-1-using-the-chirpy-starter) — Easy to upgrade, isolates irrelevant project files so you can focus on writing.
+- [**GitHub Fork**](#option-2-github-fork) — Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
 
 #### Option 1. Using the Chirpy Starter
 
@@ -32,7 +32,7 @@ Sign in to GitHub and browse to [**Chirpy Starter**][starter], click the button
 
 Sign in to GitHub to [fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), and then rename it to `USERNAME.github.io` (`USERNAME` means your username).
 
-Next, clone your site to local machine. In order to build JavaScript files later, we need to install [Node.js][nodejs], and then run the tool:
+Next, clone the repository to your local machine, make sure it has [Node.js][nodejs] installed, then go to the root directory of the repo and run the following command:
 
 ```console
 $ bash tools/init
@@ -45,7 +45,7 @@ The above command will:
 
 1. Check out the code to the [latest tag][latest-tag] (to ensure the stability of your site: as the code for the default branch is under development).
 2. Remove non-essential sample files and take care of GitHub-related files.
-3. Build JavaScript files and export to `assets/js/dist/`{: .filepath }, then make them tracked by Git.
+3. Build CSS/JS assets files and then make them tracked by Git.
 4. Automatically create a new commit to save the changes above.
 
 ### Installing Dependencies

_sass/main.bundle.scss

@@ -0,0 +1,2 @@
+@import 'dist/bootstrap';
+@import 'main';

assets/css/jekyll-theme-chirpy.scss

@@ -1,6 +1,10 @@
 ---
 ---
 
-@import 'main';
+@import 'main
+{%- if jekyll.environment == 'production' -%}
+  .bundle
+{%- endif -%}
+';
 
 /* append your custom style below */

assets/lib

@@ -13,11 +13,12 @@
   },
   "homepage": "https://github.com/cotes2020/jekyll-theme-chirpy/",
   "scripts": {
-    "build": "npm run build:js",
+    "build": "concurrently npm:build:*",
+    "build:css": "purgecss -c purgecss.config.js",
     "build:js": "rollup -c --bundleConfigAsCjs --environment BUILD:production",
     "watch:js": "rollup -c --bundleConfigAsCjs -w",
-    "lint:style": "stylelint _sass/**/*.scss",
-    "lint:fix:style": "npm run lint:style -- --fix",
+    "lint:scss": "stylelint _sass/**/*.scss",
+    "lint:fix:scss": "npm run lint:style -- --fix",
     "test": "npm run lint:scss"
   },
   "dependencies": {
@@ -37,8 +38,10 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "concurrently": "^8.2.2",
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "husky": "^9.0.11",
+    "purgecss": "^6.0.0",
     "rollup": "^4.15.0",
     "rollup-plugin-license": "^3.3.1",
     "semantic-release": "^23.0.8",

package.json

@@ -0,0 +1,23 @@
+const fs = require('fs');
+const DIST_PATH = '_sass/dist';
+
+fs.rm(DIST_PATH, { recursive: true, force: true }, (err) => {
+  if (err) {
+    throw err;
+  }
+
+  fs.mkdirSync(DIST_PATH);
+});
+
+module.exports = {
+  content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'],
+  css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'],
+  keyframes: true,
+  variables: true,
+  output: `${DIST_PATH}/bootstrap.css`,
+  // The `safelist` should be changed appropriately for future development
+  safelist: {
+    standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'],
+    greedy: [/^col-/, /tooltip/]
+  }
+};

purgecss.config.js

@@ -82,7 +82,7 @@ init_files() {
     rm -rf "$temp"
 
     ## Cleanup image settings in site config
-    _sedi "s/(^.*cdn:).*/\1/;s/(^avatar:).*/\1/" _config.yml
+    _sedi "s/(^timezone:).*/\1/;s/(^.*cdn:).*/\1/;s/(^avatar:).*/\1/" _config.yml
   fi
 
   # remove the other files
@@ -91,8 +91,8 @@ init_files() {
   # build assets
   npm i && npm run build
 
-  # track the js output
-  _sedi "/^assets.*\/dist/d" .gitignore
+  # track the CSS/JS output
+  _sedi "/.*\/dist$/d" .gitignore
 }
 
 commit() {

tools/init

@@ -15,6 +15,7 @@ NODE_SPEC="package.json"
 CHANGELOG="docs/CHANGELOG.md"
 CONFIG="_config.yml"
 
+CSS_DIST="_sass/dist"
 JS_DIST="assets/js/dist"
 
 FILES=(
@@ -79,17 +80,12 @@ _check_src() {
   done
 }
 
-_check_node_packages() {
-  if [[ ! -d node_modules || "$(du node_modules | awk '{print $1}')" == "0" ]]; then
-    npm i
-  fi
-}
-
-check() {
+init() {
   _check_cli
   _check_git
   _check_src
-  _check_node_packages
+  echo -e "> npm install\n"
+  npm i
 }
 
 ## Bump new version to gem-spec file
@@ -115,24 +111,31 @@ prepare() {
 build_gem() {
   if $opt_pkg; then
     BACKUP_PATH="$(mktemp -d)"
-    cp "$JS_DIST"/* "$BACKUP_PATH"
+    mkdir -p "$BACKUP_PATH"/css "$BACKUP_PATH"/js
+    [[ -d $CSS_DIST ]] && cp "$CSS_DIST"/* "$BACKUP_PATH"/css
+    [[ -d $JS_DIST ]] && cp "$JS_DIST"/* "$BACKUP_PATH"/js
   fi
 
   # Remove unnecessary theme settings
-  sed -i "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" $CONFIG
+  sed -i -E "s/(^timezone:).*/\1/;s/(^cdn:).*/\1/;s/(^avatar:).*/\1/" $CONFIG
   rm -f ./*.gem
 
   npm run build
-  git add "$JS_DIST" -f # add JS distribution files to gem
+  # add CSS/JS distribution files to gem package
+  git add "$CSS_DIST" "$JS_DIST" -f
+
+  echo -e "\n> gem build $GEM_SPEC\n"
   gem build "$GEM_SPEC"
 
-  # resume the settings
+  echo -e "\n> Resume file changes ...\n"
   git reset
   git checkout .
 
   if $opt_pkg; then
     # restore the dist files for future development
-    mkdir -p "$JS_DIST" && cp "$BACKUP_PATH"/* "$JS_DIST"
+    mkdir -p "$CSS_DIST" "$JS_DIST"
+    cp "$BACKUP_PATH"/css/* "$CSS_DIST"
+    cp "$BACKUP_PATH"/js/* "$JS_DIST"
     rm -rf "$BACKUP_PATH"
   fi
 }
@@ -157,7 +160,7 @@ merge() {
 }
 
 main() {
-  check
+  init
 
   if $opt_pre; then
     prepare