Further PostCSS Additions

First go at adding CSS Nesting and custom Media Queries

Not entirely sure how I feel about this quite yet...

.editorconfig

@@ -6,10 +6,8 @@ root = true
 end_of_line = lf
 charset = utf-8
 
-[*.{js,json}]
-indent_style = space
-indent_size = 2
-
-[*.css]
+[*.{js,json,css}]
+printWidth = 120
 indent_style = tab
-indent_size = 4
+indent_size = 2
+end_of_line = auto

.eslintrc

@@ -2,14 +2,17 @@
   "env": {
     "browser": true,
     "node": true,
-    "es6": true
+    "es6": true,
+    "jquery": true
   },
   "parserOptions": {
-    "sourceType": "module"
+    "sourceType": "module",
+    "ecmaVersion": 8
   },
   "extends": [
     "eslint:recommended", 
-    "eslint-plugin-prettier"
+    "prettier",
+    "plugin:prettier/recommended"
   ],
   "plugins": [
     "eslint-plugin-prettier"

.stylelintrc.json → .stylelintrc

@@ -1,36 +1,30 @@
 {
 	"extends": [
-		"stylelint-config-standard", 
-		"stylelint-config-property-sort-order-smacss"
+		"stylelint-config-property-sort-order-smacss",
+		"stylelint-prettier/recommended"
 	],
 	"rules": {
 		"alpha-value-notation": "number",
 		"color-function-notation": null,
 		"color-no-hex": true,
-		"comment-empty-line-before": [
-			"always", {
-				"except": ["first-nested"],
-				"ignoreComments": ["=="]
-			}
-		],
 		"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": "always-multi-line",
-		"indentation": "tab",
+		"declaration-colon-newline-after": null,
+		"indentation": null,
 		"max-line-length": null,
-		"no-descending-specificity": null,
-		"declaration-block-no-duplicate-custom-properties": 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": "always-multi-line",
+		"value-list-comma-newline-after": null,
 		"value-keyword-case": null
 	}
 }

build/css.mk

@@ -6,14 +6,14 @@ CSS_OUTPUTS := \
 
 # CSS rules
 dist/css/black-highlighter.css: src/css/black-highlighter.css $(BUILD_SOURCES) $(CSS_SOURCES) node_modules
-	npm run postcss -- --config build -o $@ $<
+	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/normalize.css: src/css/normalize.css $(BUILD_SOURCES)
-	cp -f $< $@
+	cp $< $@
 
 dist/css/min/normalize.min.css: dist/css/normalize.css node_modules
 	npm run postcss -- --no-map --use cssnano -o $@ $<

build/meta.mk

@@ -1,5 +1,6 @@
 # Variables
 BUILD_SOURCES := \
+	$(wildcard build/*) \
 	cssnano.config.js
 
 # Directory creation

build/optimize.mjs

@@ -1,7 +1,7 @@
-import { promises as fs } from 'fs';
-import * as process2 from 'process';
+import { promises as fs } from "fs";
+import * as process2 from "process";
 
-import svgo from 'imagemin-svgo';
+import svgo from "imagemin-svgo";
 
 async function process(minifier, inputPath, outputPath) {
 	const inputBuffer = await fs.readFile(inputPath);
@@ -17,19 +17,19 @@ function main() {
 
 	let minifier;
 	switch (fileType) {
-		case 'svg':
+		case "svg":
 			minifier = svgo({
 				plugins: [
-					{ name: 'removeDoctype',active: false},
-					{ name: 'removeViewBox', active: false },
-					{ name: 'removeXMLProcInst', active: false },
-					{ name: 'collapseGroups' },
-					{ name: 'convertPathData' },
-					{ name: 'removeUselessStrokeAndFill' },
-					{ name: 'cleanupNumericValues', params: { floatPrecision: 2 } },
-					{ name: 'mergePaths' },
-					{ name: 'sortAttrs' },
-					{ name: 'convertShapeToPath' },
+					{ name: "removeDoctype",active: false},
+					{ name: "removeViewBox", active: false },
+					{ name: "removeXMLProcInst", active: false },
+					{ name: "collapseGroups" },
+					{ name: "convertPathData" },
+					{ name: "removeUselessStrokeAndFill" },
+					{ name: "cleanupNumericValues", params: { floatPrecision: 2 } },
+					{ name: "mergePaths" },
+					{ name: "sortAttrs" },
+					{ name: "convertShapeToPath" },
 				],
 			});
 			break;

build/postcss.config.js

@@ -1,11 +1,30 @@
 module.exports = {
-	plugins: [
-		require('stylelint'),
-		require('postcss-reporter')({ clearReportedMessages: true }),
-		require('postcss-import'),
-		require('postcss-url')({ url: 'copy' }),
-		require('autoprefixer'),
-		require('postcss-preset-env')({stage: 1}),
-		require('@hail2u/css-mqpacker'),
+	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,
+					}
+				]
+			}
+		}),		
+		require("postcss-reporter")({
+			throwError: false,
+			clearReportedMessages: true,
+			clearAllMessages: true,
+			plugins: ["stylelint"],
+		}),
+		require("@hail2u/css-mqpacker"),		
+		require("autoprefixer"),
 	],
 };

cssnano.config.js

@@ -4,13 +4,12 @@ const defaultPreset =
     autoprefixer: true,
     calc: false,
     colormin: false,
-    cssDeclarationSorter: false,
+    cssDeclarationSorter: true,
     discardComments: {
       removeAll: true,
     },
-    normalizeWhitespace: false,
+    normalizeWhitespace: true,
     mergeRules: false,
-    reduceIdents: true,
   });
 
 module.exports = defaultPreset;

package.json

@@ -21,21 +21,25 @@
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "postcss-preset-env": "^7.8.3",
+    "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",
+    "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-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"
+    "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": [
-    "Chrome >= 58,  ChromeAndroid >= 58,  Android >= 58,  Firefox >= 54,  FirefoxAndroid >= 54, Safari >= 10.1,  iOS >= 10.3,  Opera >= 44,  OperaMobile >= 59,  UCAndroid >= 12.12,  Samsung >= 6.2,  QQAndroid >= 10.4,  Kaios >= 2.5, Edge >= 16"
+    "defaults and not op_mini all"
   ]
 }