New: Add setting to include additional paths for css import path …

Readme.md

@@ -314,6 +314,32 @@ postcssOptions:
   prefix: true
 ```
 
+#### Use postcss resolve() function
+You can use `resolve()` in your css/scss files to load resources (eg images) from `Resources/Public` of the package. The path will be resolved at compile-time.
+
+```
+.my-class {
+  background-image: resolve('Images/my-image.jpg')
+}
+```
+
+resolves to 
+```
+.my-class {
+  background-image: url('/_Resources/Static/Packages/Your.Package/Images/my-image.jpg')
+}
+```
+
+If you choose to order your Packages in DistributionPackages in subfolders, you can add this setting to ensure the paths are correctly rewritten:
+```
+postcssOptions:
+  additionalPackagePathPrefixes:
+    - Sites
+    - Plugins
+```
+
+This ensures that the path that is generated (eg `/_Resources/Static/Packages/(Sites|Plugins)/Your.Package/.../`) will be correctly resolved, removing the subfolder from the path.
+
 #### PostCSS Plugins
 
 <details>

defaults.yaml

@@ -64,6 +64,7 @@ sassOptions: null
 postcssOptions:
   tailwindcss:
     config: './tailwind.config.js'
+  additionalPackagePathPrefixes: []
 
 esbuild:
   # Set Neos Flow settings as FLOW variable. If `true` all the settings are passed.

postcss.mjs

@@ -1,5 +1,6 @@
 import path from "path";
 import { fs, chokidar, readCache, bold, dim, cyan, magenta } from "carbon-pipeline";
+import { config } from './Lib/helper.mjs'
 import postcss from "postcss";
 import {
     styleFiles as files,
@@ -137,6 +138,13 @@ function build() {
 }
 
 function css(css, file, time) {
+    const { postcssOptions: { additionalPackagePathPrefixes } = [] } = config;
+    const combinedPaths = Array.isArray(additionalPackagePathPrefixes) ? additionalPackagePathPrefixes.map(e => {
+        return `${e}/`
+    }).join('|') : '';
+
+    const regexPattern = new RegExp(`(/_Resources/Static/Packages/)(?:${combinedPaths})?([\\w]+.[\\w]+/)Resources/Public/`, 'g');
+
     return rc()
         .then((ctx) => {
             return postcss(ctx.plugins)
@@ -155,10 +163,7 @@ function css(css, file, time) {
                 .then((result) => {
                     const tasks = [];
                     // This fixes url done with resolve()
-                    result.css = result.css.replace(
-                        /(\/_Resources\/Static\/Packages\/[\w]+\.[\w]+\/)Resources\/Public\//g,
-                        "$1"
-                    );
+                    result.css = result.css.replace(regexPattern,"$1$2");
 
                     const cssFilesize = humanFileSize(result.css.length);
                     let mapFilesize = 0;