DEP Upgrade frontend build stack

.editorconfig

@@ -10,7 +10,7 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{*.yml,package.json,*.js}]
+[{*.yml,package.json,*.js,*.scss}]
 indent_size = 2
 
 # The indent size used in the package.json file cannot be changed:

.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@silverstripe/eslint-config/.eslintrc');

.gitignore

@@ -0,0 +1,2 @@
+/vendor/
+node_modules/

.nvmrc

@@ -0,0 +1 @@
+18

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

client/dist/styles/sitewidecontentreport.css

@@ -0,0 +1 @@
+.gridfieldbasiccontentreport.field{border-bottom:1px solid #d2d5d8;margin:24px 0}.gridfieldbasiccontentreport.field:last-of-type{border-bottom-style:none}

css/sitewidecontentreport.css → client/src/styles/sitewidecontentreport.scss

@@ -1,8 +1,8 @@
 .gridfieldbasiccontentreport.field {
-    border-bottom: 1px solid #D2D5D8;
-    margin: 24px 0;
+  border-bottom: 1px solid #D2D5D8;
+  margin: 24px 0;
 }
 
 .gridfieldbasiccontentreport.field:last-of-type {
-    border-bottom-style: none;
-}
+  border-bottom-style: none;
+}

composer.json

@@ -34,8 +34,7 @@
     ],
     "extra": {
         "expose": [
-            "javascript",
-            "css"
+            "client/dist"
         ]
     },
     "autoload": {

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "silverstripe-sitewidecontent-report",
+  "license": "BSD-3-Clause",
+  "author": "SilverStripe Ltd",
+  "engines": {
+    "node": ">=18.x"
+  },
+  "scripts": {
+    "build": "yarn && yarn lint && rm -rf client/dist/* && NODE_ENV=production webpack --mode production --bail --progress",
+    "dev": "NODE_ENV=development webpack --progress",
+    "watch": "NODE_ENV=development webpack --watch --progress",
+    "lint": "sass-lint client/src/styles"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@silverstripe/eslint-config": "^1.0.0-alpha6",
+    "@silverstripe/webpack-config": "^2.0.0-alpha5",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
+  },
+  "resolutions": {
+    "colors": "1.4.0"
+  },
+  "browserslist": [
+    "defaults"
+  ]
+}

src/SitewideContentReport.php

@@ -174,7 +174,7 @@ public function columns($itemType = 'Pages')
      */
     public function getCMSFields()
     {
-        Requirements::css('silverstripe/sitewidecontent-report: css/sitewidecontentreport.css');
+        Requirements::css('silverstripe/sitewidecontent-report: client/dist/styles/sitewidecontentreport.css');
         $fields = parent::getCMSFields();
 
         $fields->push(HeaderField::create('FilesTitle', _t(__CLASS__ . '.Files', 'Files'), 3));

webpack.config.js

@@ -0,0 +1,19 @@
+const Path = require('path');
+const { CssWebpackConfig } = require('@silverstripe/webpack-config');
+
+const PATHS = {
+  ROOT: Path.resolve(),
+  SRC: Path.resolve('client/src'),
+  DIST: Path.resolve('client/dist'),
+};
+
+const config = [
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
+      sitewidecontentreport: `${PATHS.SRC}/styles/sitewidecontentreport.scss`,
+    })
+    .getConfig(),
+];
+
+module.exports = config;