weboptimizer 2.0.1168 → 2.0.1172

package/declarations.d.ts

@@ -25,7 +25,12 @@ declare module 'postcss-fontpath' {
 declare module 'postcss-sprites' {
     export default function(options:Partial<{
         filterBy:() => Promise<void>
-        hooks:{onSaveSpritesheet:(_image:Mapping) => string}
+        hooks:{
+            onSaveSpritesheet:(_image:Mapping<unknown>) => string
+            onUpdateRule:(
+                _rule:PostcssNode, _token:PostcssNode, _image:Mapping<unknown>
+            ) => void
+        }
         spritePath:string
         stylesheetPath:null|string
         verbose:boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weboptimizer",
-  "version": "2.0.1168",
+  "version": "2.0.1172",
   "description": "A generic web optimizer, (module) bundler and development environment.",
   "keywords": [
     "webpack",
@@ -111,7 +111,6 @@
   "devDependencies": {
     "@babel/cli": "*",
     "@babel/eslint-parser": "*",
-    "@types/cssnano": "*",
     "@types/ejs": "*",
     "@types/favicons": "*",
     "@types/html-minifier": "*",
@@ -923,10 +922,17 @@
           },
           "cssnano": {
             "#": "The autoprefixer has to be disabled in this context since it would remove all needed vendor prefixes from the preceding processing (every prefix should be needed here).",
-            "autoprefixer": false,
-            "discardUnused": {
-              "__evaluate__": "!self.library"
-            }
+            "preset": [
+              {
+                "__evaluate__": "optionalRequire('cssnano-preset-default')"
+              },
+              {
+                "autoprefixer": false,
+                "discardUnused": {
+                  "__evaluate__": "!self.library"
+                }
+              }
+            ]
           },
           "data": {
             "exclude": null,

package/readme.md

@@ -99,15 +99,15 @@ Installation
 
 Edit your **package.json** to add **one** dependency:
 
-    #!JSON
-
+```JSON
+...
+"dependencies": {
     ...
-    "dependencies": {
-        ...
-        "weboptimizer": "latest",
-        ...
-    },
+    "weboptimizer": "latest",
     ...
+},
+...
+```
 
 Update your **packages** via npm and have fun:
 
@@ -120,79 +120,79 @@ First you should specify some tasks/use-cases you want to use in you project.
 You can do this in your **package.json**. All supported scripts and some useful
 compositions are listed below:
 
-    #!JSON
-
+```JSON
+...
+"scripts": {
     ...
-    "scripts": {
-        ...
-        "build": "weboptimizer build",
-        "build:stats": "weboptimizer build --profile --json >/tmp/stat.json && echo 'Results successfully written to \"/tmp/stat.json\".'",
-        "check": "yarn check:types; yarn lint",
-        "check:types": "weboptimizer check:types",
-        "clear": "weboptimizer clear",
-        "document": "weboptimizer document",
-        "lint": "weboptimizer lint",
-        "postinstall": "weboptimizer build",
-        "preinstall": "weboptimizer preinstall",
-        "serve": "weboptimizer serve",
-        "start": "npm run serve",
-        "test": "weboptimizer test",
-        "test:browser": "weboptimizer test:browser",
-        "watch": "weboptimizer build --watch",
-        ...
-    },
+    "build": "weboptimizer build",
+    "build:stats": "weboptimizer build --profile --json >/tmp/stat.json && echo 'Results successfully written to \"/tmp/stat.json\".'",
+    "check": "yarn check:types; yarn lint",
+    "check:types": "weboptimizer check:types",
+    "clear": "weboptimizer clear",
+    "document": "weboptimizer document",
+    "lint": "weboptimizer lint",
+    "postinstall": "weboptimizer build",
+    "preinstall": "weboptimizer preinstall",
+    "serve": "weboptimizer serve",
+    "start": "npm run serve",
+    "test": "weboptimizer test",
+    "test:browser": "weboptimizer test:browser",
+    "watch": "weboptimizer build --watch",
     ...
+},
+...
+```
 
 You can easily run any specified script via npm's command lint interface:
 
-    #!bash
-
-    npm run build -debug
-    npm run lint
-    npm run watch -debug
-    npm run serve
-    ...
+```bash
+npm run build -debug
+npm run lint
+npm run watch -debug
+npm run serve
+...
+```
 
 If you want to configure your application to change any of the expected
 default source, target, asset or build paths do it in your **package.json**:
 
-    #!JSON
-
+```JSON
+...
+"webOptimizer": {
     ...
-    "webOptimizer": {
+    "path": {
         ...
-        "path": {
+        "apiDocumentation": "apiDocumentation/",
+        "source": {
             ...
-            "apiDocumentation": "apiDocumentation/",
-            "source": {
-                ...
-                "asset": {
-                    ...
-                    "cascadingStyleSheet": "cascadingStyleSheet/",
-                    "data": "data/",
-                    "favicon": "favicon.png",
-                    "font": "font/",
-                    "image": "image/",
-                    "javaScript": "javaScript/",
-                    "publicTarget": "",
-                    "template": "template/"
-                    ..
-                },
+            "asset": {
                 ...
+                "cascadingStyleSheet": "cascadingStyleSheet/",
+                "data": "data/",
+                "favicon": "favicon.png",
+                "font": "font/",
+                "image": "image/",
+                "javaScript": "javaScript/",
+                "publicTarget": "",
+                "template": "template/"
+                ..
             },
-            "ignore": ["node_modules", ".git"],
-            "manifest": "manifest.appcache",
-            "target": {
-                ...
-                "base": "build/",
-                ...
-            },
-            "tidyUp": ["crap"],
             ...
         },
+        "ignore": ["node_modules", ".git"],
+        "manifest": "manifest.appcache",
+        "target": {
+            ...
+            "base": "build/",
+            ...
+        },
+        "tidyUp": ["crap"],
         ...
     },
     ...
+},
+...
+```
 
 It's recommended to first specify if you're writing a library (preserve
 external dependencies not managed within current project) or an application
@@ -200,75 +200,71 @@ external dependencies not managed within current project) or an application
 preconfigurations are targeting on this two different use cases. Anyway you can
 customize each configuration preset by hand.
 
-    #!JSON
-
+```JSON
+...
+"webOptimizer": {
     ...
-    "webOptimizer": {
-        ...
-        "library": false,
-        ...
-    },
+    "library": false,
     ...
+},
+...
+```
 
 You can even reference any value or evaluate any configuration value
 dynamically though a complete javaScript compatible evaluation mechanism:
 
-
-    #!JSON
-
+```JSON
+...
+"webOptimizer": {
     ...
-    "webOptimizer": {
+    "path": {
         ...
-        "path": {
+        "source": {
             ...
-            "source": {
+            "base": "/",
+            "asset": {
                 ...
-                "base": "/",
-                "asset": {
-                    ...
-                    "cascadingStyleSheet": "cascadingStyleSheet/",
-                    "template": {
-                        "__evaluate__": "self.debug ? '' : self.path.source.base"
-                    },
-                    ...
+                "cascadingStyleSheet": "cascadingStyleSheet/",
+                "template": {
+                    "__evaluate__": "self.debug ? '' : self.path.source.base"
                 },
                 ...
             },
             ...
         },
         ...
-        "offline": {
+    },
+    ...
+    "offline": {
+        ...
+        "externals": [
             ...
-            "externals": [
-                ...
-                {"__evaluate__": "self.path.source.asset.cascadingStyleSheet"},
-                "onlineAvailable.txt",
-                ...
-            ],
+            {"__evaluate__": "self.path.source.asset.cascadingStyleSheet"},
+            "onlineAvailable.txt",
             ...
-        },
+        ],
         ...
     },
     ...
+},
+...
+```
 
 You can even execute scripts to determine a value:
 
-    #!JSON
-
+``JSON
+...
+"webOptimizer": {
     ...
-    "webOptimizer": {
+    "path": {
         ...
-        "path": {
+        "source": {
             ...
-            "source": {
+            "base": "/",
+            "asset": {
                 ...
-                "base": "/",
-                "asset": {
-                    ...
-                    "template": {
-                        "__execute__": "test = self.path.source.base; if (test.endsWith('js')) return 'bar/';return 'foo/'"
-                    },
-                    ...
+                "template": {
+                    "__execute__": "test = self.path.source.base; if (test.endsWith('js')) return 'bar/';return 'foo/'"
                 },
                 ...
             },
@@ -277,6 +273,9 @@ You can even execute scripts to determine a value:
         ...
     },
     ...
+},
+...
+```
 
 For all available configuration possibilities please have a look at the
 **package.json** file in this project since these values will be extended on
@@ -287,16 +286,12 @@ complete generic command line interface: The last argument should evaluate to
 a javaScript object which will be used as source for extending the default
 behavior. Any javaScript will be supported:
 
-    #!JSON
-
     npm run build '{module:{preprocessor:{javaScript:{loader:"babel"}}}}'
 
 If you're using weboptimizer in a toolchain were none printable or none unicode
 compatible symbols should be used (for example content which should replace
 placeholder) you can encode your javaScript expression as base64 code:
 
-    #!bash
-
     npm run build '{module:{preprocessor:{ejs:{locals:{name:'häns'}}}}}'
 
     # is the same as:
@@ -307,15 +302,15 @@ There is a static tool [clientnode](https://torben.website/clientNode) and
 helper instance provided to each evaluation or execution context within the
 package.json (see the API-Documentation, link above, for more details):
 
-    #!JSON
-
+```JSON
+...
+"webOptimizer": {
     ...
-    "webOptimizer": {
-        ...
-        "libraryName": {"__evaluate__": Tools.isPlainObject(self.name) ? helper.stripLoader(self.request) : 'random'},
-        ...
-    },
+    "libraryName": {"__evaluate__": Tools.isPlainObject(self.name) ? helper.stripLoader(self.request) : 'random'},
     ...
+},
+...
+```
 
 <!-- region modline
 vim: set tabstop=4 shiftwidth=4 expandtab:

package/webpackConfigurator.js

@@ -54,7 +54,8 @@ var _helper = _interopRequireDefault(require("./helper"));
 
 var _ejsLoader = _interopRequireDefault(require("./ejsLoader"));
 
-var _this = void 0,
+var _optionalRequire,
+    _this = void 0,
     _configuration$path$c,
     _configuration$cache,
     _configuration$cache2,
@@ -78,6 +79,7 @@ var postcssCSSnano = (0, _clientnode.optionalRequire)('cssnano');
 var postcssFontpath = (0, _clientnode.optionalRequire)('postcss-fontpath');
 var postcssImport = (0, _clientnode.optionalRequire)('postcss-import');
 var postcssSprites = (0, _clientnode.optionalRequire)('postcss-sprites');
+var updateRule = (_optionalRequire = (0, _clientnode.optionalRequire)('postcss-sprites/lib/core')) === null || _optionalRequire === void 0 ? void 0 : _optionalRequire.updateRule;
 var postcssURL = (0, _clientnode.optionalRequire)('postcss-url');
 var pluginNameResourceMapping = {
   HTML: 'html-webpack-plugin',
@@ -897,10 +899,20 @@ var cssUse = _module.preprocessor.cascadingStyleSheet.additional.pre.map(evaluat
           onSaveSpritesheet: function onSaveSpritesheet(image) {
             return (0, _path.join)(image.spritePath, (0, _path.relative)(configuration.path.target.asset.image, configuration.files.compose.image));
           },
-          // TODO
-          onUpdateRule: function onUpdateRule(rule, declaration, output) {
-            console.log('u', declaration.value, declaration.text);
-            return output;
+
+          /*
+              Reset this token due to a
+              sprite bug with
+              "background-image" declaration
+              which do not refer to an image
+              (e.g. linear gradient instead).
+          */
+          onUpdateRule: function onUpdateRule(rule, token, image) {
+            if (token.value.includes(token.text)) updateRule(rule, token, image);else token.cloneAfter({
+              type: 'decl',
+              prop: 'background-image',
+              value: token.value
+            });
           }
         },
         stylesheetPath: configuration.path.source.asset.cascadingStyleSheet,