Merge pull request #3449 from thelounge/xpaw/postcss

Use postcss to optimize css

.browserslistrc

@@ -0,0 +1 @@
+last 2 year, firefox esr

.npmignore

@@ -19,4 +19,5 @@ scripts/
 test/
 appveyor.yml
 webpack.config*.js
+postcss.config.js
 renovate.json

.stylelintrc.yml

@@ -9,3 +9,10 @@ rules:
   font-family-no-missing-generic-family-keyword:
   # needs a lot of refactoring to be enabled
   no-descending-specificity:
+
+  # we have autoprefixer
+  at-rule-no-vendor-prefix: true
+  media-feature-name-no-vendor-prefix: true
+  property-no-vendor-prefix: true
+  selector-no-vendor-prefix: true
+  value-no-vendor-prefix: true

client/css/style.css

@@ -38,11 +38,6 @@
 	--upload-progressbar-color: var(--button-color);
 }
 
-/* Samsung Internet <7.0 and Microsoft Edge support (yes, both of them use webkit prefix) */
-::-webkit-input-placeholder {
-	color: rgba(0, 0, 0, 0.35);
-}
-
 ::placeholder {
 	color: rgba(0, 0, 0, 0.35);
 	opacity: 1; /* fix opacity in Firefox */
@@ -59,9 +54,6 @@ body {
 	color: var(--body-color);
 	font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 	margin: 0;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 	cursor: default;
 	touch-action: none;
@@ -109,7 +101,6 @@ button {
 	margin: 0;
 	outline: none;
 	padding: 0;
-	-moz-user-select: inherit; /* Firefox makes buttons unselectable by default which breaks copying */
 	user-select: inherit;
 }
 
@@ -224,9 +215,6 @@ kbd {
 #windows .header .title,
 #windows .header .topic,
 #chat .messages {
-	-webkit-user-select: text;
-	-moz-user-select: text;
-	-ms-user-select: text;
 	user-select: text;
 	cursor: text;
 }
@@ -723,7 +711,6 @@ background on hover (unless active) */
 
 #windows .header .topic,
 #sidebar .chan .name {
-	-webkit-mask-image: linear-gradient(to left, transparent, black 20px);
 	mask-image: linear-gradient(to left, transparent, black 20px);
 }
 
@@ -1058,9 +1045,6 @@ background on hover (unless active) */
 #chat .condensed-summary .content {
 	display: block;
 	cursor: pointer;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 }
 
@@ -1915,21 +1899,17 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 }
 
 .whois {
-	display: -ms-grid; /* Edge 15- */
 	display: grid;
-	-ms-grid-template-columns: max-content auto;
 	grid-template-columns: max-content auto;
 	margin: 0;
 }
 
 .whois dt {
-	-ms-grid-column-start: 1;
 	grid-column-start: 1;
 	margin-right: 20px;
 }
 
 .whois dd {
-	-ms-grid-column-start: 2;
 	grid-column-start: 2;
 }
 
@@ -2423,7 +2403,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	/* Fade out for long usernames */
 	#chat .from {
 		padding-left: 10px;
-		-webkit-mask-image: linear-gradient(to left, transparent, black 10px);
 		mask-image: linear-gradient(to left, transparent, black 10px);
 	}
 }

client/themes/morning.css

@@ -154,6 +154,7 @@ kbd {
 }
 
 /* Form elements */
+/* stylelint-disable selector-no-vendor-prefix */
 
 #chat-container ::-moz-placeholder {
 	color: #b7c5d1;
@@ -170,4 +171,6 @@ kbd {
 	opacity: 0.75;
 }
 
+/* stylelint-enable selector-no-vendor-prefix */
+
 /* End form elements */

package.json

@@ -81,8 +81,9 @@
     "babel-plugin-istanbul": "5.2.0",
     "chai": "4.2.0",
     "copy-webpack-plugin": "5.0.4",
-    "css-loader": "0.28.11",
+    "css-loader": "3.2.0",
     "css.escape": "1.5.1",
+    "cssnano": "4.1.10",
     "emoji-regex": "8.0.0",
     "eslint": "6.6.0",
     "eslint-config-prettier": "6.5.0",
@@ -103,6 +104,9 @@
     "mousetrap": "1.6.3",
     "npm-run-all": "4.1.5",
     "nyc": "14.1.1",
+    "postcss-import": "12.0.1",
+    "postcss-loader": "3.0.0",
+    "postcss-preset-env": "6.7.0",
     "prettier": "1.18.2",
     "pretty-quick": "2.0.0",
     "primer-tooltips": "2.0.0",

postcss.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+	plugins: [
+		require("postcss-import")(),
+		require("postcss-preset-env")(),
+		require("cssnano")({
+			preset: [
+				"default",
+				{
+					mergeRules: false,
+					discardComments: {
+						removeAll: true,
+					},
+				},
+			],
+		}),
+	],
+};

webpack.config.js

@@ -41,7 +41,14 @@ const config = {
 						loader: "css-loader",
 						options: {
 							url: false,
-							minimize: process.env.NODE_ENV === "production",
+							importLoaders: 1,
+							sourceMap: true,
+						},
+					},
+					{
+						loader: "postcss-loader",
+						options: {
+							sourceMap: true,
 						},
 					},
 				],
@@ -52,16 +59,7 @@ const config = {
 				use: {
 					loader: "babel-loader",
 					options: {
-						presets: [
-							[
-								"@babel/env",
-								{
-									targets: {
-										browsers: ["last 1 year", "firefox esr"],
-									},
-								},
-							],
-						],
+						presets: [["@babel/env"]],
 					},
 				},
 			},