fix global styles

Bug: 236369779
Test: cd development/tools/winscope-ng && npm run build:all && npm run test:all
Change-Id: I551889207862cfd698ccf634275c5c84d1b976d1

tools/winscope-ng/package-lock.json

@@ -26,6 +26,7 @@
         "loader-utils": "^2.0.0",
         "protobufjs": "^6.11.3",
         "rxjs": "~7.5.0",
+        "style-loader": "^3.3.1",
         "ts-loader": "^9.3.0",
         "tslib": "^2.3.0",
         "typescript": "~4.7.2",
@@ -12637,6 +12638,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
     "node_modules/stylus": {
       "version": "0.57.0",
       "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.57.0.tgz",
@@ -23424,6 +23440,12 @@
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true
     },
+    "style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "requires": {}
+    },
     "stylus": {
       "version": "0.57.0",
       "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.57.0.tgz",

tools/winscope-ng/package.json

@@ -33,6 +33,7 @@
     "loader-utils": "^2.0.0",
     "protobufjs": "^6.11.3",
     "rxjs": "~7.5.0",
+    "style-loader": "^3.3.1",
     "ts-loader": "^9.3.0",
     "tslib": "^2.3.0",
     "typescript": "~4.7.2",

tools/winscope-ng/src/styles.css

@@ -1 +1,18 @@
-/* You can add global styles to this file, and also import other style files */
+/*
+ * Copyright (C) 2022 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+#title {
+  color: aqua;
+}

tools/winscope-ng/webpack.config.common.js

@@ -18,7 +18,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   resolve: {
-    extensions: [".ts", ".js"],
+    extensions: [".ts", ".js", ".css"],
     modules: [
       "node_modules",
       "src",
@@ -34,13 +34,17 @@ module.exports = {
   module: {
     rules:[
       {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader"]
+        test: /\.ts$/,
+        use: ["ts-loader", "angular2-template-loader"]
       },
       {
         test: /\.html$/,
         use: ["html-loader"]
       },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      },
       {
         test: /\.proto$/,
         loader: 'proto-loader',
@@ -51,10 +55,6 @@ module.exports = {
           ]
         }
       },
-      {
-        test: /\.ts$/,
-        use: ["ts-loader", "angular2-template-loader"]
-      },
     ]
   },
 

tools/winscope-ng/webpack.config.dev.js

@@ -20,6 +20,7 @@ const configDev = {
   mode: 'development',
   entry: {
     polyfills: "./src/polyfills.ts",
+    styles: "./src/styles.css",
     app: "./src/main.dev.ts"
   },
   devtool: "source-map",

tools/winscope-ng/webpack.config.prod.js

@@ -23,6 +23,7 @@ const configProd = {
   mode: 'production',
   entry: {
     polyfills: "./src/polyfills.ts",
+    styles: "./src/styles.css",
     app: "./src/main.prod.ts"
   },
   output: {