Browse Source

feat: Global LESS variables

Owen Diffey 3 years ago
parent
commit
8e8b4e6e05
4 changed files with 80 additions and 17 deletions
  1. 39 0
      frontend/package-lock.json
  2. 2 1
      frontend/package.json
  3. 0 0
      frontend/src/styles/variables.less
  4. 39 16
      frontend/webpack.common.js

+ 39 - 0
frontend/package-lock.json

@@ -5718,6 +5718,45 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "style-resources-loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/style-resources-loader/-/style-resources-loader-1.5.0.tgz",
+      "integrity": "sha512-fIfyvQ+uvXaCBGGAgfh+9v46ARQB1AWdaop2RpQw0PBVuROsTBqGvx8dj0kxwjGOAyq3vepe4AOK3M6+Q/q2jw==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.2.0",
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.7.0",
+        "tslib": "^2.3.1"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+          "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

+ 2 - 1
frontend/package.json

@@ -36,6 +36,7 @@
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
     "prettier": "^2.4.1",
+    "style-resources-loader": "^1.5.0",
     "vue-style-loader": "^4.1.3",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4"
@@ -63,4 +64,4 @@
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-merge": "^5.8.0"
   }
-}
+}

+ 0 - 0
frontend/src/styles/variables.less


+ 39 - 16
frontend/webpack.common.js

@@ -19,7 +19,9 @@ const fetchVersionAndGitInfo = cb => {
 	};
 
 	try {
-		const packageJson = JSON.parse(fs.readFileSync("./package.json").toString());
+		const packageJson = JSON.parse(
+			fs.readFileSync("./package.json").toString()
+		);
 		const headContents = fs
 			.readFileSync(".parent_git/HEAD")
 			.toString()
@@ -62,27 +64,37 @@ const fetchVersionAndGitInfo = cb => {
 	}
 
 	cb(debug);
-}
+};
 
 fetchVersionAndGitInfo(() => {});
 
 class InsertDebugInfoPlugin {
 	apply(compiler) {
-		compiler.hooks.compilation.tap("InsertDebugInfoPlugin", (compilation) => {
-			HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync("InsertDebugInfoPlugin", (data, cb) => {
-				fetchVersionAndGitInfo(debug => {
-					data.plugin.userOptions.debug.version = debug.version;
-					data.plugin.userOptions.debug.git.remote = debug.git.remote;
-					data.plugin.userOptions.debug.git.remoteUrl = debug.git.remoteUrl;
-					data.plugin.userOptions.debug.git.branch = debug.git.branch;
-					data.plugin.userOptions.debug.git.latestCommit = debug.git.latestCommit;
-					data.plugin.userOptions.debug.git.latestCommitShort = debug.git.latestCommitShort;
-					cb(null, data);
-				});
-			})
+		compiler.hooks.compilation.tap("InsertDebugInfoPlugin", compilation => {
+			HtmlWebpackPlugin.getHooks(
+				compilation
+			).beforeAssetTagGeneration.tapAsync(
+				"InsertDebugInfoPlugin",
+				(data, cb) => {
+					fetchVersionAndGitInfo(debug => {
+						data.plugin.userOptions.debug.version = debug.version;
+						data.plugin.userOptions.debug.git.remote =
+							debug.git.remote;
+						data.plugin.userOptions.debug.git.remoteUrl =
+							debug.git.remoteUrl;
+						data.plugin.userOptions.debug.git.branch =
+							debug.git.branch;
+						data.plugin.userOptions.debug.git.latestCommit =
+							debug.git.latestCommit;
+						data.plugin.userOptions.debug.git.latestCommitShort =
+							debug.git.latestCommitShort;
+						cb(null, data);
+					});
+				}
+			);
 		});
 	}
-  }
+}
 
 module.exports = {
 	entry: "./src/main.js",
@@ -140,7 +152,18 @@ module.exports = {
 							url: false
 						}
 					},
-					"less-loader"
+					"less-loader",
+					{
+						loader: "style-resources-loader",
+						options: {
+							patterns: [
+								path.resolve(
+									__dirname,
+									"./src/styles/variables.less"
+								)
+							]
+						}
+					}
 				]
 			}
 		]