Merge pull request #1115 from Patternslib/separate-modernizr

thet · web-flow · commit 16ca0ad62cfc · 2022-12-20T00:53:30.000+01:00
Separate modernizr
diff --git a/.modernizrrc.js b/.modernizrrc.js
@@ -1,167 +1,99 @@
 module.exports = {
-  "classPrefix": "",
-  "options": [
-    "addTest",
-    "atRule",
-    "domPrefixes",
-    "hasEvent",
-    "html5shiv",
-    "html5printshiv",
-    "load",
-    "mq",
-    "prefixed",
-    "prefixes",
-    "prefixedCSS",
-    "setClasses",
-    "testAllProps",
-    "testProp",
-    "testStyles"
-  ],
-  "feature-detects": [
-    "a/download",
-    "applicationcache",
-    "blob",
-    "canvas",
-    "canvas/blending",
-    "canvas/todataurl",
-    "canvas/winding",
-    "canvastext",
-    "contenteditable",
-    "contextmenu",
-    "cookies",
-    "cors",
-    "custom-elements",
-    "css/all",
-    "css/animations",
-    "css/appearance",
-    "css/backdropfilter",
-    "css/backgroundblendmode",
-    "css/backgroundcliptext",
-    "css/backgroundposition-shorthand",
-    "css/backgroundposition-xy",
-    "css/backgroundrepeat",
-    "css/backgroundsize",
-    "css/backgroundsizecover",
-    "css/borderimage",
-    "css/borderradius",
-    "css/boxshadow",
-    "css/boxsizing",
-    "css/calc",
-    "css/checked",
-    "css/chunit",
-    "css/columns",
-    "css/cssgrid",
-    "css/cubicbezierrange",
-    "css/displayrunin",
-    "css/displaytable",
-    "css/ellipsis",
-    "css/escape",
-    "css/exunit",
-    "css/filters",
-    "css/flexbox",
-    "css/flexboxlegacy",
-    "css/flexboxtweener",
-    "css/flexwrap",
-    "css/fontface",
-    "css/generatedcontent",
-    "css/gradients",
-    "css/hairline",
-    "css/hsla",
-    "css/invalid",
-    "css/lastchild",
-    "css/mask",
-    "css/mediaqueries",
-    "css/multiplebgs",
-    "css/nthchild",
-    "css/objectfit",
-    "css/opacity",
-    "css/overflow-scrolling",
-    "css/pointerevents",
-    "css/positionsticky",
-    "css/pseudoanimations",
-    "css/pseudotransitions",
-    "css/reflections",
-    "css/regions",
-    "css/remunit",
-    "css/resize",
-    "css/rgba",
-    "css/scrollbars",
-    "css/scrollsnappoints",
-    "css/shapes",
-    "css/siblinggeneral",
-    "css/subpixelfont",
-    "css/supports",
-    "css/target",
-    "css/textalignlast",
-    "css/textshadow",
-    "css/transforms",
-    "css/transformslevel2",
-    "css/transforms3d",
-    "css/transformstylepreserve3d",
-    "css/transitions",
-    "css/userselect",
-    "css/valid",
-    "css/vhunit",
-    "css/vmaxunit",
-    "css/vminunit",
-    "css/vwunit",
-    "css/will-change",
-    "css/wrapflow",
-    "dom/classlist",
-    "dom/createElement-attrs",
-    "dom/dataset",
-    "dom/documentfragment",
-    "dom/hidden",
-    "dom/microdata",
-    "dom/mutationObserver",
-    "dom/passiveeventlisteners",
-    "event/deviceorientation-motion",
-    "event/oninput",
-    "eventlistener",
-    "exif-orientation",
-    "forms/capture",
-    "forms/fileinput",
-    "forms/fileinputdirectory",
-    "forms/formattribute",
-    "forms/placeholder",
-    "forms/requestautocomplete",
-    "forms/validation",
-    "inputtypes",
-    "fullscreen-api",
-    "hashchange",
-    "hiddenscroll",
-    "history",
-    "htmlimports",
-    "iframe/sandbox",
-    "iframe/seamless",
-    "iframe/srcdoc",
-    "json",
-    "mediaquery/hovermq",
-    "mediaquery/pointermq",
-    "notification",
-    "pagevisibility-api",
-    "performance",
-    "postmessage",
-    "proximity",
-    "queryselector",
-    "requestanimationframe",
-    "storage/localstorage",
-    "storage/sessionstorage",
-    "storage/websqldatabase",
-    "touchevents",
-    "unicode",
-    "unicode-range",
-    "url/bloburls",
-    "url/data-uri",
-    "url/parser",
-    "url/urlsearchparams",
-    "userdata",
-    "vibration",
-    "video",
-    "video/autoplay",
-    "video/crossorigin",
-    "video/loop",
-    "video/preload",
-    "xdomainrequest"
-  ]
+    "classPrefix": "",
+    "enableClasses": true,
+    "enableJSClass": true,
+    "options": ["setClasses"],
+    "feature-detects": [
+        "a/download",
+        "css/all",
+        "css/animations",
+        "css/appearance",
+        "css/backdropfilter",
+        "css/backgroundblendmode",
+        "css/backgroundcliptext",
+        "css/backgroundposition-shorthand",
+        "css/backgroundposition-xy",
+        "css/backgroundrepeat",
+        "css/backgroundsize",
+        "css/backgroundsizecover",
+        "css/borderimage",
+        "css/borderradius",
+        "css/boxshadow",
+        "css/boxsizing",
+        "css/calc",
+        "css/checked",
+        "css/chunit",
+        "css/columns",
+        "css/cssgrid",
+        "css/cubicbezierrange",
+        "css/displayrunin",
+        "css/displaytable",
+        "css/ellipsis",
+        "css/escape",
+        "css/exunit",
+        "css/filters",
+        "css/flexbox",
+        "css/flexboxlegacy",
+        "css/flexboxtweener",
+        "css/flexwrap",
+        "css/fontface",
+        "css/generatedcontent",
+        "css/gradients",
+        "css/hairline",
+        "css/hsla",
+        "css/invalid",
+        "css/lastchild",
+        "css/mask",
+        "css/mediaqueries",
+        "css/multiplebgs",
+        "css/nthchild",
+        "css/objectfit",
+        "css/opacity",
+        "css/overflow-scrolling",
+        "css/pointerevents",
+        "css/positionsticky",
+        "css/pseudoanimations",
+        "css/pseudotransitions",
+        "css/reflections",
+        "css/regions",
+        "css/remunit",
+        "css/resize",
+        "css/rgba",
+        "css/scrollbars",
+        "css/scrollsnappoints",
+        "css/shapes",
+        "css/siblinggeneral",
+        "css/subpixelfont",
+        "css/supports",
+        "css/target",
+        "css/textalignlast",
+        "css/textshadow",
+        "css/transforms",
+        "css/transformslevel2",
+        "css/transforms3d",
+        "css/transformstylepreserve3d",
+        "css/transitions",
+        "css/userselect",
+        "css/valid",
+        "css/vhunit",
+        "css/vmaxunit",
+        "css/vminunit",
+        "css/vwunit",
+        "css/will-change",
+        "css/wrapflow",
+        "event/deviceorientation-motion",
+        "exif-orientation",
+        "forms/capture",
+        "forms/fileinput",
+        "forms/validation",
+        "inputtypes",
+        "fullscreen-api",
+        "hiddenscroll",
+        "mediaquery/hovermq",
+        "mediaquery/pointermq",
+        "touchevents",
+        "vibration",
+        "video/autoplay",
+        "video/loop",
+    ],
 };
diff --git a/index.html b/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html class="no-js">
     <head>
         <title>Patterns demo pages</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="/style/common.css" />
+        <script src="/modernizr.min.js"></script>
         <script src="/bundle.min.js"></script>
     </head>
     <body class="component-index">
diff --git a/package.json b/package.json
@@ -44,8 +44,8 @@
         "@patternslib/pat-tiptap": "^4.7.2",
         "@patternslib/pat-upload": "^3.1.1",
         "copy-webpack-plugin": "^11.0.0",
-        "pegjs": "0.11.0-master.b7b87ea",
-        "webpack-modernizr-loader": "^5.0.0"
+        "modernizr": "^3.12.0",
+        "pegjs": "0.11.0-master.b7b87ea"
     },
     "resolutions": {
         "jquery": "3.6.2"
diff --git a/src/pat/clone-code/index.html b/src/pat/clone-code/index.html
@@ -4,9 +4,6 @@
         <title>pat-clone demo page</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="/style/common.css" />
-        <script>
-          window.__patternslib_disable_modernizr = true;
-        </script>
         <script src="/bundle.min.js"></script>
     </head>
     <body>
@@ -34,6 +31,5 @@ <h2>Example 2</h2>
           <p>Test paragraph</p>
         </div>
 
-
     </body>
 </html>
diff --git a/src/patterns.js b/src/patterns.js
@@ -74,12 +74,4 @@ import "@patternslib/pat-upload";
 // Set to ``true`` to include core styles via JavaScript
 //window.__patternslib_import_styles = false;
 
-// Include modernizr per default.
-// Most of our styles depend on it.
-// You might want to disable it for your project by setting:
-// window.__patternslib_disable_modernizr = true;
-if (!window.__patternslib_disable_modernizr) {
-    import("modernizr");
-}
-
 registry.init();
diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
@@ -5,6 +5,8 @@ const mf_config = require("@patternslib/dev/webpack/webpack.mf");
 const package_json = require("../package.json");
 const path = require("path");
 const webpack_config = require("@patternslib/dev/webpack/webpack.config").config;
+const modernizr_config = require("../.modernizrrc.js");
+const modernizr = require("modernizr");
 
 module.exports = () => {
     let config = {
@@ -20,15 +22,6 @@ module.exports = () => {
 
     config.output.path = path.resolve(__dirname, "../dist/");
 
-    // Modernizr
-    config.module.rules.push({
-        test: /\.modernizrrc\.js$/,
-        loader: "webpack-modernizr-loader",
-    });
-    config.resolve.alias = {
-        modernizr$: path.resolve(__dirname, "../.modernizrrc.js"),
-    };
-
     // Module federation
     config.plugins.push(
         mf_config({
@@ -49,14 +42,41 @@ module.exports = () => {
         })
     );
 
-    // BBB polyfills not used anymore.
-    // TODO: Remove for next major version.
-    // Polyfills
+    // Copy static files
     config.plugins.push(
-        // Copy polyfills loader to the output path.
         new CopyPlugin({
             patterns: [
-                { from: path.resolve(__dirname, "../src/polyfills-loader.js"), }, // prettier-ignore
+                // Copy polyfills loader to the output path.
+                // TODO: Polyfills not used anymore, remove for next major version.
+                { from: path.resolve(__dirname, "../src/polyfills-loader.js") },
+
+                // Build and copy Modernizr.
+                // We're abusing the CopyPlugin transform method here to build
+                // a Modernizr bundle using the modernizr config. The input
+                // file does not matter and could be anything - we're using the
+                // modernizr config itself.
+                // Why building modernizr here and not in the Makefile?
+                // Because we want webpack-dev-server also to serve it.
+                {
+                    from: path.resolve(__dirname, "../.modernizrrc.js"),
+                    to: "[path]modernizr.min.js",
+                    transform: {
+                        transformer: () => {
+                            return new Promise((resolve) => {
+                                modernizr.build(
+                                    {
+                                        ...modernizr_config,
+                                        minify: process.env.NODE_ENV === "production",
+                                    },
+                                    (result) => {
+                                        resolve(result);
+                                    }
+                                );
+                            });
+                        },
+                        cache: true,
+                    },
+                },
             ],
         })
     );
diff --git a/yarn.lock b/yarn.lock
