diff --git a/package.json b/package.json index 0705f33..391e7b2 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,8 @@ "@types/react": "^18.2.12", "@types/react-dom": "^18.2.5", "argparse": "^2.0.1", - "css-loader": "^5.2.6", "chrome-remote-interface": "^0.32.1", + "css-loader": "^5.2.6", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.3", "htmlparser": "^1.7.7", @@ -22,11 +22,12 @@ "mini-css-extract-plugin": "^1.6.0", "po2json": "^1.0.0-alpha", "qunit": "^2.9.3", - "sass": "^1.61.0", + "sass": "^1.63.6", + "sass-loader": "^13.3.2", "sizzle": "^2.3.3", "ts-loader": "^9.4.3", "typescript": "^4.8.4", - "webpack": "^5.87.0", + "webpack": "^5.88.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" }, diff --git a/src/app.tsx b/src/app.tsx index f5f6001..678dec0 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -25,7 +25,9 @@ export class Application extends React.Component Tailscale + 
 		        { this.state.response }
+
); diff --git a/src/index.tsx b/src/index.tsx index e3d0cdc..578b966 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,12 @@ import "cockpit-dark-theme"; -//import "patternfly/patternfly-5-cockpit.scss"; - +//import "@patternfly/patternfly/patternfly-base.scss"; import '@patternfly/react-core/dist/styles/base.css'; + import React from 'react'; import ReactDOM from 'react-dom'; import { Application } from './app'; +import "patternfly/patternfly-5-overrides.scss"; document.addEventListener("DOMContentLoaded", function () { ReactDOM.render( diff --git a/webpack.config.js b/webpack.config.js index 3008ae8..f161b52 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -13,84 +13,91 @@ module.exports = { use: [ { loader: 'ts-loader', - options: { + options: { transpileOnly: true, experimentalWatchApi: true, }, } ] }, + { + test: /\.s[ac]ss$/i, + use: [ + "css-loader", + "sass-loader", + ], + }, { test: /\.css$/, include: [...stylePaths], use: [MiniCssExtractPlugin.loader, 'css-loader'], - }, { - test: /\.(svg|ttf|eot|woff|woff2)$/, - // only process modules with this loader - // if they live under a 'fonts' or 'pficon' directory - include: [ - path.resolve(__dirname, 'node_modules/patternfly/dist/fonts'), - path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'), - path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'), - path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/fonts'), - path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/pficon'), - ], - use: { - loader: 'file-loader', + }, { + test: /\.(svg|ttf|eot|woff|woff2)$/, + // only process modules with this loader + // if they live under a 'fonts' or 'pficon' directory + include: [ + path.resolve(__dirname, 'node_modules/patternfly/dist/fonts'), + path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'), + path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'), + path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/fonts'), + path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/pficon'), + ], + use: { + loader: 'file-loader', + options: { + // Limit at 50k. larger files emited into separate files + limit: 5000, + outputPath: 'fonts', + name: '[name].[ext]', + }, + }, + }, + { + test: /\.svg$/, + include: (input) => input.indexOf('background-filter.svg') > 1, + use: [ + { + loader: 'url-loader', options: { - // Limit at 50k. larger files emited into separate files limit: 5000, - outputPath: 'fonts', + outputPath: 'svgs', name: '[name].[ext]', }, }, - }, - { - test: /\.svg$/, - include: (input) => input.indexOf('background-filter.svg') > 1, - use: [ - { - loader: 'url-loader', - options: { - limit: 5000, - outputPath: 'svgs', - name: '[name].[ext]', - }, + ], + }, + { + test: /\.(jpg|jpeg|png|gif)$/i, + include: [ + path.resolve(__dirname, 'src'), + path.resolve(__dirname, 'node_modules/patternfly'), + path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/images'), + path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images'), + path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/images'), + path.resolve( + __dirname, + 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images' + ), + path.resolve( + __dirname, + 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images' + ), + path.resolve( + __dirname, + 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images' + ), + ], + use: [ + { + loader: 'url-loader', + options: { + limit: 5000, + outputPath: 'images', + name: '[name].[ext]', }, - ], - }, - { - test: /\.(jpg|jpeg|png|gif)$/i, - include: [ - path.resolve(__dirname, 'src'), - path.resolve(__dirname, 'node_modules/patternfly'), - path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/images'), - path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images'), - path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/images'), - path.resolve( - __dirname, - 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images' - ), - path.resolve( - __dirname, - 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images' - ), - path.resolve( - __dirname, - 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images' - ), - ], - use: [ - { - loader: 'url-loader', - options: { - limit: 5000, - outputPath: 'images', - name: '[name].[ext]', - }, - }, - ], - }, + }, + ], + }, ], }, resolve: { diff --git a/yarn.lock b/yarn.lock index a1102fe..c5dde7e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2230,10 +2230,17 @@ safe-buffer@5.1.2: resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== -sass@^1.61.0: - version "1.63.4" - resolved "https://registry.npmjs.org/sass/-/sass-1.63.4.tgz" - integrity sha512-Sx/+weUmK+oiIlI+9sdD0wZHsqpbgQg8wSwSnGBjwb5GwqFhYNwwnI+UWZtLjKvKyFlKkatRK235qQ3mokyPoQ== +sass-loader@^13.3.2: + version "13.3.2" + resolved "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz" + integrity sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg== + dependencies: + neo-async "^2.6.2" + +sass@^1.3.0, sass@^1.63.6: + version "1.63.6" + resolved "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz" + integrity sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" @@ -2466,6 +2473,14 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" +string-replace-loader@^3.0.0: + version "3.1.0" + resolved "https://registry.npmjs.org/string-replace-loader/-/string-replace-loader-3.1.0.tgz" + integrity sha512-5AOMUZeX5HE/ylKDnEa/KKBqvlnFmRZudSOjVJHxhoJg9QYTwl1rECx7SLR8BBH7tfxb4Rp7EM2XVfQFxIhsbQ== + dependencies: + loader-utils "^2.0.0" + schema-utils "^3.0.0" + strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" @@ -2728,10 +2743,10 @@ webpack-sources@^3.2.3: resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz" integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== -"webpack@^4.0.0 || ^5.0.0", "webpack@^4.27.0 || ^5.0.0", "webpack@^4.37.0 || ^5.0.0", "webpack@^4.4.0 || ^5.0.0", webpack@^5.0.0, webpack@^5.1.0, webpack@^5.20.0, webpack@^5.87.0, webpack@5.x.x: - version "5.87.0" - resolved "https://registry.npmjs.org/webpack/-/webpack-5.87.0.tgz" - integrity sha512-GOu1tNbQ7p1bDEoFRs2YPcfyGs8xq52yyPBZ3m2VGnXGtV9MxjrkABHm4V9Ia280OefsSLzvbVoXcfLxjKY/Iw== +"webpack@^4.0.0 || ^5.0.0", "webpack@^4.27.0 || ^5.0.0", "webpack@^4.37.0 || ^5.0.0", "webpack@^4.4.0 || ^5.0.0", webpack@^5, webpack@^5.0.0, webpack@^5.1.0, webpack@^5.20.0, webpack@^5.88.0, webpack@5.x.x: + version "5.88.0" + resolved "https://registry.npmjs.org/webpack/-/webpack-5.88.0.tgz" + integrity sha512-O3jDhG5e44qIBSi/P6KpcCcH7HD+nYIHVBhdWFxcLOcIGN8zGo5nqF3BjyNCxIh4p1vFdNnreZv2h2KkoAw3lw== dependencies: "@types/eslint-scope" "^3.7.3" "@types/estree" "^1.0.0"