Large Push with renamed branch

A LOT of changes here. I've added CSS nesting to almost all the files. Switched the minifier to LightningCSS. Redid how the font links get renamed and moved the `fonts.css` file to sit with the other css files.
Nu-SCPTheme · Feb 8, 2023 · 2bc05b6 · 2bc05b6
1 parent 0e5ef7e
commit 2bc05b6
Show file tree

Hide file tree

Showing 24 changed files with 13,106 additions and 11,311 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,13 +1,17 @@
 # See https://editorconfig.org/
-
 root = true
 
 [*]
-end_of_line = lf
 charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+trim_trailing_whitespace = true
 
 [*.{js,json,css}]
+max_line_length = 120
 printWidth = 120
 indent_style = tab
 indent_size = 2
-end_of_line = auto
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.eslintrc b/.eslintrc
@@ -21,6 +21,7 @@
     "quotes": ["error", "double"],
     "semi": ["error", "always"],
     "prettier/prettier": "error",
-    "no-console": "off"
+    "no-console": "off",
+    "endOfLine": "off"
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -5,10 +5,6 @@ dist/
 # NPM
 node_modules/
 package-lock.json
-yarn.lock
-
-# yarn
-yarn.lock
 
 # Misc
 .DS_Store

diff --git a/.prettierignore b/.prettierignore
@@ -1,25 +1,18 @@
 # Build Files
 Makefile
 build
-dist/
 *.map
 
-# CSS min files
-*.min.css
+# dist files
+dist/
 
-# Non-CSS
-*.js
-*.html
+# Non-web
 *.md 
 *.patch
 
 # NPM
 node_modules/
 package-lock.json
-yarn.lock
-
-# yarn
-yarn.lock
 
 # Misc
 .DS_Store

diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,21 @@
+# Build Files
+Makefile
+build
+*.map
+
+# dist files
+dist/
+
+# Non-web
+*.md 
+*.patch
+
+# NPM
+node_modules/
+package-lock.json
+
+# Misc
+.DS_Store
+.*.swp
+*.bak
+.vscode/
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,30 +1,27 @@
 {
-	"extends": [
-		"stylelint-config-property-sort-order-smacss",
-		"stylelint-prettier/recommended"
-	],
-	"rules": {
-		"alpha-value-notation": "number",
-		"color-function-notation": null,
-		"color-no-hex": true,
-		"custom-property-pattern": null,
-		"declaration-block-no-duplicate-custom-properties": null,
-		"declaration-block-no-duplicate-properties": [
-			true,
-			{ "ignore": ["consecutive-duplicates-with-different-values"] }
-		],
-		"declaration-colon-newline-after": null,
-		"indentation": null,
-		"max-line-length": null,
-		"no-descending-specificity": null,		
-		"no-duplicate-selectors": null,
-		"property-no-vendor-prefix": null,
-		"number-max-precision": null,
-		"selector-class-pattern": null,
-		"selector-id-pattern": null,
-		"selector-not-notation": "complex",
-		"unit-disallowed-list": ["px"],
-		"value-list-comma-newline-after": null,
-		"value-keyword-case": null
-	}
+  "formatter": "verbose",
+  "fix": true,
+  "extends": ["stylelint-config-property-sort-order-smacss", "stylelint-prettier/recommended"],
+  "verbose": true,
+  "rules": {
+    "alpha-value-notation": "number",
+    "color-function-notation": null,
+    "color-no-hex": true,
+    "custom-property-pattern": null,
+    "declaration-block-no-duplicate-custom-properties": null,
+    "declaration-block-no-duplicate-properties": [true, { "ignore": ["consecutive-duplicates-with-different-values"] }],
+    "declaration-colon-newline-after": null,
+    "indentation": null,
+    "max-line-length": null,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "property-no-vendor-prefix": null,
+    "number-max-precision": null,
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "selector-not-notation": "complex",
+    "unit-disallowed-list": ["px"],
+    "value-list-comma-newline-after": null,
+    "value-keyword-case": null
+  }
 }
diff --git a/Makefile b/Makefile
@@ -28,3 +28,6 @@ legacy: dist/stable/styles/ $(LEGACY_CSS_OUTPUTS)
 # Utility rules
 clean:
 	rm -rf dist
+
+rebuildCSS:
+	rm -rf dist/css | make css
diff --git a/build/css.mk b/build/css.mk
@@ -1,19 +1,20 @@
 # Variables
 CSS_SOURCES := $(wildcard src/css/*.css)
 CSS_OUTPUTS := \
+	dist/css/black-highlighter.css \
+	dist/css/normalize.css \
 	dist/css/min/black-highlighter.min.css \
 	dist/css/min/normalize.min.css
 
 # CSS rules
-dist/css/black-highlighter.css: src/css/black-highlighter.css $(BUILD_SOURCES) $(CSS_SOURCES) node_modules
-	npm run postcss -- --config build -o $@ $<	
+dist/css/black-highlighter.css: src/css/black-highlighter.css $(BUILD_SOURCES) $(CSS_SOURCES) node_modules	
+	NODE_ENV=development npm run postcss -- $< --config build -o $@
 
-dist/css/min/black-highlighter.min.css: dist/css/black-highlighter.css node_modules
-	npm run postcss -- --no-map --use cssnano -o $@ $<
-	build/sed.sh 's|\.\./fonts|../../fonts|g' $@
+dist/css/min/black-highlighter.min.css: dist/css/black-highlighter.css $(BUILD_SOURCES) $(CSS_SOURCES) node_modules
+	NODE_ENV=production npm run postcss -- $< --config build -o $@
 
 dist/css/normalize.css: src/css/normalize.css $(BUILD_SOURCES)
-	cp $< $@
+	NODE_ENV=development npm run postcss -- $< --config build -o $@
 
 dist/css/min/normalize.min.css: dist/css/normalize.css node_modules
-	npm run postcss -- --no-map --use cssnano -o $@ $<
+	NODE_ENV=production npm run postcss -- $< --config build -o $@
diff --git a/build/meta.mk b/build/meta.mk
@@ -1,7 +1,6 @@
 # Variables
 BUILD_SOURCES := \
-	$(wildcard build/*) \
-	cssnano.config.js
+	$(wildcard build/*)
 
 # Directory creation
 DIRECTORIES := \

diff --git a/build/postcss.config.js b/build/postcss.config.js
@@ -1,30 +1,66 @@
-module.exports = {
-	plugins: [		
-		require("stylelint")({
-			ignoreDisables: true,
-		}),	
-		require("postcss-import"),		
-		require("postcss-url")({ url: "copy" }),		
-		require("postcss-preset-env")({
-			stage: 1,
-			features: {
-				"is-pseudo-class": false,
-				"not-pseudo-class": false,
-				"nesting-rules": [
-					true,
-					{
-						noIsPseudoSelector: false,
-					}
-				]
+"use strict";
+
+module.exports = (ctx) => {
+
+	const path = require("path");
+	const stylelint = require("stylelint");
+	const postcssImport = require("postcss-import");
+	//const postcssURL = require("postcss-url");
+	const reporter = require("postcss-reporter");
+	const mqPacker = require("@hail2u/css-mqpacker");
+	const lightningcss = require("postcss-lightningcss");
+	const browserslist = require("../package.json").browserslist;
+
+	const stylelintOptions = {
+		configFile: path.join(__dirname, "../.stylelintrc"),
+		fix: process.env.NODE_ENV === "production" ? false : true
+	};
+
+	const lightningcssOptions = ({
+		filename: path.join(ctx.file.dirname, "/", ctx.file.basename),
+		browsers: browserslist,
+		lightningcssOptions: {
+			projectRoot: ctx.file.dirname,
+			inputSourceMap: path.join(ctx.file.dirname, process.env.NODE_ENV === "production" ? "/black-highlighter.css.map" : "/min/black-highlighter.min.css.map"),
+			minify: process.env.NODE_ENV === "production" ? true : false,
+			sourceMap: false,
+			errorRecovery: false,
+			drafts: {
+				nesting: true,
+				customMedia: true
+			},
+			visitor: {
+				Url(url) {
+					process.env.NODE_ENV === "production" ? [url.url = "../" + url.url] : [url.url];
+					return url;
+				}
 			}
-		}),		
-		require("postcss-reporter")({
-			throwError: false,
-			clearReportedMessages: true,
-			clearAllMessages: true,
-			plugins: ["stylelint"],
-		}),
-		require("@hail2u/css-mqpacker"),		
-		require("autoprefixer"),
-	],
+		}
+	});
+
+	const reporterOptions = {
+		formatter: input => {
+			return input.source + " produced " + input.messages.length + " messages \n";
+		},
+		clearMessages: true
+	};
+
+	return {
+		map: { inline: false },
+		plugins:
+			process.env.NODE_ENV === "production" ? [
+				postcssImport,
+				lightningcss(lightningcssOptions),
+				//postcssURL(postcssURLOptions),
+				//mqPacker,
+				reporter(reporterOptions)
+			] : [
+				postcssImport,
+				lightningcss(lightningcssOptions),
+				stylelint(stylelintOptions),
+				//postcssURL(postcssURLOptions),
+				//mqPacker,
+				reporter(reporterOptions)
+			]
+	};
 };
diff --git a/cssnano.config.js b/cssnano.config.js
diff --git a/package.json b/package.json
@@ -1,45 +1,39 @@
 {
-  "name": "black-highlighter",
-  "description": "Modern base theme for the SCP Wiki (build process)",
-  "version": "1.0.0",
-  "authors": "Woedenaz, Croquembouche",
-  "license": "CC-BY-SA-3.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Nu-SCPTheme/Black-Highlighter"
-  },
-  "devDependencies": {
-    "@hail2u/css-mqpacker": "github:hail2u/node-css-mqpacker#v9.0.1",
-    "autoprefixer": "^10.4.13",
-    "cssnano": "^5.1.14",
-    "cssnano-preset-default": "^5.2.13",
-    "cssnano-preset-lite": "^2.1.3",
-    "eslint-config-prettier": "^8.6.0",
-    "imagemin": "^8.0.1",
-    "imagemin-svgo": "^10.0.1",
-    "node": "^19.3.0",
-    "postcss": "^8.4.21",
-    "postcss-cli": "^10.1.0",
-    "postcss-import": "^15.1.0",
-    "postcss-preset-env": "^8.0.0",
-    "postcss-reporter": "^7.0.5",
-    "postcss-safe-parser": "^6.0.0",
-    "postcss-url": "^10.1.3",
-    "prettier": "^2.8.3",
-    "stylelint": "^14.16.1",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-property-sort-order-smacss": "^9.0.0",
-    "stylelint-config-standard": "^29.0.0",
-    "stylelint-prettier": "^2.0.0"
-  },
-  "scripts": {
-    "build": "make",
-    "postcss": "node node_modules/postcss-cli/index.js",
-    "optimize": "node build/optimize.mjs",
-    "watch": "postcss --config build/postcss.config.js src/css/black-highlighter.css -o dist/css/black-highlighter.css --watch | postcss --config buildpostcss.config.js src/css/normalize.css -o dist/css/normalize.css --watch",
-    "stylelint-check": "stylelint-config-prettier-check"
-  },
-  "browserslist": [
-    "defaults and not op_mini all"
-  ]
+	"name": "black-highlighter",
+	"description": "Modern base theme for the SCP Wiki (build process)",
+	"version": "1.0.0",
+	"authors": "Woedenaz, Croquembouche",
+	"license": "CC-BY-SA-3.0",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Nu-SCPTheme/Black-Highlighter"
+	},
+	"devDependencies": {
+		"@hail2u/css-mqpacker": "github:hail2u/node-css-mqpacker#v9.0.1",
+		"eslint-config-prettier": "^8.6.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"imagemin": "^8.0.1",
+		"imagemin-svgo": "^10.0.1",
+		"node": "^19.6.0",
+		"postcss": "^8.4.21",
+		"postcss-cli": "^10.1.0",
+		"postcss-import": "^15.1.0",
+		"postcss-lightningcss": "^0.6.0",
+		"postcss-reporter": "^7.0.5",
+		"postcss-url": "^10.1.3",
+		"prettier": "^2.8.4",
+		"stylelint": "^14.16.1",
+		"stylelint-config-prettier": "^9.0.4",
+		"stylelint-config-property-sort-order-smacss": "^9.0.0",
+		"stylelint-config-standard": "^29.0.0",
+		"stylelint-prettier": "^2.0.0"
+	},
+	"scripts": {
+		"build": "make",
+		"postcss": "node node_modules/postcss-cli/index.js",
+		"optimize": "node build/optimize.mjs",
+		"watch": "NODE_ENV=production postcss --config build/postcss.config.js src/css/black-highlighter.css -o dist/css/min/black-highlighter.min.css -w | NODE_ENV=production postcss --config build/postcss.config.js src/css/normalize.css -o dist/css/min/normalize.min.css -w | NODE_ENV=development postcss --config build/postcss.config.js src/css/black-highlighter.css -o dist/css/black-highlighter.css -w | NODE_ENV=development postcss --config build/postcss.config.js src/css/normalize.css -o dist/css/normalize.css -w",
+		"stylelint-check": "stylelint-config-prettier-check"
+	},
+	"browserslist": "defaults and not op_mini all"
 }
diff --git a/src/css/black-highlighter.css b/src/css/black-highlighter.css
@@ -1,6 +1,6 @@
 @charset "utf-8";
 
-@import url("../fonts/fonts.css");
+@import url("./fonts.css");
 @import url("./root.css");
 @import url("./int/root.int.css");
 @import url("./encoded-svgs.css");