TASK: Switch to postcss and esbuild

.editorconfig

@@ -8,12 +8,12 @@ root = true
 charset = utf-8
 end_of_line = lf
 insert_final_newline = true
-trim_trailing-whitespace = true
+trim_trailing_whitespace = true
 indent_style = space
 indent_size = 4
 
 # Exceptions
-[{*.{yaml,yml,sh,jscsrc,scss},package.json,.*rc}]
+[{*.{yaml,yml,sh,jscsrc,scss,pcss},package.json,.*rc}]
 indent_size = 2
 
 [*.{json,scss}]
@@ -23,7 +23,7 @@ max_line_length = 1000
 indent_size = 1
 
 [*.{note,md,edit,read}]
-trim_trailing-whitespace = false
+trim_trailing_whitespace = false
 
 [Makefile]
 indent_style = tab

.eslintrc

@@ -1,20 +1,12 @@
 {
-  "extends": [
-    "prettier"
-  ],
-  "plugins": [
-    "prettier"
-  ],
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
   "parserOptions": {
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
+    "ecmaVersion": 2020,
+    "sourceType": "module"
   },
   "env": {
-    "es6": true
-  },
-  "rules": {
-    "prettier/prettier": "error"
+    "es6": true,
+    "browser": true,
+    "node": true
   }
 }

.nvmrc

@@ -1 +1 @@
-14
+16

.postcssrc.js

@@ -0,0 +1,16 @@
+module.exports = (ctx) => ({
+    map: ctx.options.map,
+    plugins: {
+        'postcss-easy-import': {
+            extensions: ['.pcss', '.css'],
+        },
+        'postcss-sort-media-queries': true,
+        autoprefixer: true,
+        cssnano: {
+            preset: ['default', { discardComments: { removeAll: true } }],
+        },
+        'postcss-reporter': {
+            clearReportedMessages: true,
+        },
+    },
+});

.prettierignore

@@ -1,2 +1,3 @@
 composer.json
 *.noLinter.*
+**/Public/**/*

.stylelintrc

@@ -1,39 +1,36 @@
 {
-  "extends": "stylelint-config-recommended-scss",
+  "extends": "stylelint-config-standard",
   "ignoreFiles": [
     "**/Public/**",
     "**/Private/Templates/**",
     "node_modules/**",
     "**/*.noLinter.*"
   ],
   "rules": {
-    "property-no-unknown": [
-      true,
+    "selector-class-pattern": "[a-z-]+",
+    "value-keyword-case": [
+      "lower",
       {
-        "ignoreProperties": [
-          "font-range",
-          "min-font-size",
-          "max-font-size",
-          "lower-font-range",
-          "upper-font-range",
-          "font-awesome",
-          "tap-highlight-color",
-          "touch-callout"
-        ]
+        "camelCaseSvgKeywords": true
       }
     ],
-    "selector-pseudo-class-no-unknown": [
+    "function-no-unknown": [
       true,
       {
-        "ignorePseudoClasses": ["at-least", "at-most", "between", "exactly"]
+        "ignoreFunctions": [
+          "theme"
+        ]
       }
     ],
-    "selector-pseudo-element-no-unknown": [
+    "at-rule-no-unknown": [
       true,
       {
-        "ignorePseudoElements": ["track", "thumb"]
+        "ignoreAtRules": [
+          "tailwind",
+          "apply",
+          "layer"
+        ]
       }
-    ],
-    "selector-type-no-unknown": null
+    ]
   }
 }

.yarnclean

@@ -11,7 +11,6 @@ powered-test
 
 # asset directories
 docs
-doc
 website
 */**/assets
 

Readme.md

@@ -0,0 +1,69 @@
+# The Neos Demo Package
+
+This is the default site package installed with the Neos base distribution. With this package, you can quickly have
+a look into how easy content can be generated and changed.
+It also shows the basic concepts of how to build a site package with custom node types and plugins.
+
+## About the frontend build stack
+
+We included a frontend build stack based on [Node.js], [NVM], [esbuild], [PostCSS] and [Yarn].
+
+### Installation
+
+Make sure that [Node.js] and [Yarn] are installed. It is recommended to use [NVM] to manage versions of the [Node.js] versions.
+
+```bash
+ # Enable the correct nvm
+ nvm use
+ # Install the package dependencies
+ yarn
+```
+
+### Commands
+
+| Command         | Description                                       |
+| --------------- | ------------------------------------------------- |
+| `yarn build`    | Builds all assets                                 |
+| `yarn pipeline` | Runs install and then build all assets            |
+| `yarn start`    | Watches the sources and rebuilds assets on change |
+
+### Package management
+
+The dependencies are stored in the [`package.json`] file, so if you edit any config, or need new packages, you have to add them to this file. You can read more about this [here](https://nodejs.dev/the-package-json-guide).
+
+### Explanation of the config files
+
+| Filename            | Explantion                                                                                 |
+| ------------------- | ------------------------------------------------------------------------------------------ |
+| [`.editorconfig`]   | Helps maintain consistent coding styles                                                    |
+| [`.eslintignore`]   | These files get ignored from [ESLint]                                                      |
+| [`.eslintrc`]       | The configuration file for [ESLint], a pluggable Javascript linter                         |
+| [`.nvmrc`]          | This file contains the required [Node.js] version and is used by [NVM]                     |
+| [`.postcssrc.js`]   | The configuration for [PostCSS]                                                            |
+| [`.prettierignore`] | These files gets excluded from the [Prettier] code formatting                              |
+| [`.prettierrc`]     | This is the configuration file for [Prettier]                                              |
+| [`.stylelintrc`]    | This is the configuration file for [Stylelint]                                             |
+| [`.yarnclean`]      | Cleans and removes unnecessary files from package dependencies                             |
+| [`esbuild.mjs`]     | Configuration for [esbuild]                                                                |
+| [`yarn.lock`]       | This is the lockfile for [Yarn]. This is needed to get consistent installs across machines |
+
+[node.js]: https://nodejs.org
+[nvm]: https://github.com/nvm-sh/nvm#readme
+[esbuild]: https://esbuild.github.io
+[yarn]: https://yarnpkg.com
+[postcss]: https://postcss.org
+[eslint]: https://eslint.org
+[prettier]: https://prettier.io
+[stylelint]: https://stylelint.io
+[`package.json`]: package.json
+[`.editorconfig`]: .editorconfig
+[`.eslintignore`]: .eslintignore
+[`.eslintrc`]: .eslintrc
+[`.nvmrc`]: .nvmrc
+[`.postcssrc.js`]: .postcssrc.js
+[`.prettierignore`]: .prettierignore
+[`.prettierrc`]: .prettierrc
+[`.stylelintrc`]: .stylelintrc
+[`.yarnclean`]: .yarnclean
+[`esbuild.mjs`]: esbuild.mjs
+[`yarn.lock`]: yarn.lock

esbuild.mjs

@@ -0,0 +1,44 @@
+import ESBUILD from 'esbuild';
+import glob from 'glob';
+import path from 'path';
+
+const fileExtensions = 'js,jsx,ts,tsx';
+const outputFolder = argv('outputFolder');
+const entryFolder = argv('entryFolder');
+const watch = argv('watch') === true;
+
+process.env.NODE_ENV = argv('production') === true ? 'production' : 'development';
+
+const files = glob
+    .sync(`${entryFolder}/*.{${fileExtensions}}`)
+    .map((entry) => path.basename(entry))
+    .filter((name) => !name.startsWith('_'));
+
+files.forEach((file) => {
+    ESBUILD.build({
+        entryPoints: [`${entryFolder}/${file}`],
+        watch,
+        outdir: outputFolder,
+        sourcemap: true,
+        bundle: true,
+        minify: true,
+        platform: 'browser',
+        logLevel: 'info',
+        legalComments: 'linked',
+    });
+});
+
+function argv(key) {
+    // Return true if the key exists and a value is defined
+    if (process.argv.includes(`--${key}`)) {
+        return true;
+    }
+    const value = process.argv.find((element) => element.startsWith(`--${key}=`));
+
+    // Return null if the key does not exist and a value is not defined
+    if (!value) {
+        return null;
+    }
+
+    return value.replace(`--${key}=`, '');
+}

package.json

@@ -1,49 +1,36 @@
 {
   "license": "GPL-3.0-or-later",
   "private": true,
-  "browserslist": [
-    "> 0.5%",
-    "last 2 versions",
-    "Firefox ESR",
-    "not ie <= 10",
-    "not ie_mob <= 10",
-    "not bb <= 10",
-    "not op_mob <= 12.1"
-  ],
+  "config": {
+    "entryFolder": "Resources/Private/Fusion",
+    "outputFolder": "Resources/Public"
+  },
   "scripts": {
-    "start": "webpack --watch",
-    "build": "webpack --mode production",
+    "watch": "concurrently -r yarn:watch:*",
+    "watch:js": "node esbuild.mjs --entryFolder=$npm_package_config_entryFolder --outputFolder=$npm_package_config_outputFolder/Scripts --watch",
+    "watch:css": "postcss $npm_package_config_entryFolder/*.pcss --map --ext css --dir $npm_package_config_outputFolder/Styles --watch",
+    "build": "concurrently -r yarn:build:*",
+    "build:js": "node esbuild.mjs --entryFolder=$npm_package_config_entryFolder --outputFolder=$npm_package_config_outputFolder/Scripts --production",
+    "build:css": "postcss $npm_package_config_entryFolder/*.pcss --map --ext css --dir $npm_package_config_outputFolder/Styles",
+    "start": "yarn watch",
     "pipeline": "yarn install;yarn build"
   },
-  "dependencies": {
-    "compass-mixins": "^0.12.10"
-  },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/preset-env": "^7.15.0",
-    "autoprefixer": "^10.3.1",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^6.2.0",
-    "cssnano": "^5.0.7",
-    "mini-css-extract-plugin": "^2.2.0",
-    "node-sass": "^6.0.1",
-    "node-sass-glob-importer": "^5.3.2",
-    "postcss": "^8.3.6",
-    "postcss-focus": "^5.0.1",
-    "postcss-loader": "^6.1.1",
-    "postcss-pxtorem": "^6.0.0",
-    "postcss-reporter": "^7.0.2",
-    "postcss-sort-media-queries": "^3.11.12",
-    "prettier": "^2.3.2",
-    "prettier-loader": "^3.3.0",
-    "sass-loader": "^12.1.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-recommended-scss": "^4.3.0",
-    "stylelint-scss": "^3.20.1",
-    "terser-webpack-plugin": "^5.1.4",
-    "webpack": "^5.50.0",
-    "webpack-cli": "^4.8.0"
+    "autoprefixer": "^10.4.7",
+    "concurrently": "^7.2.2",
+    "cssnano": "^5.1.12",
+    "esbuild": "^0.14.49",
+    "eslint": "^8.20.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "glob": "^8.0.3",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^10.0.0",
+    "postcss-easy-import": "^4.0.0",
+    "postcss-reporter": "^7.0.5",
+    "postcss-sort-media-queries": "^4.2.1",
+    "prettier": "^2.7.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard": "^26.0.0"
   }
 }