Pro 6694 breakpoint preview vite ready (#4789)

* Uses new postcss plugin for breakpoint preview
apostrophecms · Nov 11, 2024 · a39c14c · a39c14c
1 parent bf9ef04
commit a39c14c
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 237 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,10 @@
 * Adds asset module option `options.modulePreloadPolyfill` (default `true`) to allow disabling the polyfill preload for e.g. external front-ends. 
 * Adds `bundleMarkup` to the data sent to the external front-end, containing all markup for injecting Apostrophe UI in the front-end.
 
+### Changes
+
+* Removes postcss plugin and webpack loader used for breakpoint preview mode. Uses instead the new `postcss-viewport-to-container-toggle` plugin in the webpack config.
+
 ## 4.9.0 (2024-10-31)
 
 ### Adds

diff --git a/modules/@apostrophecms/asset/index.js b/modules/@apostrophecms/asset/index.js
@@ -485,6 +485,7 @@ module.exports = {
       // - `types`: optional array, if present it represents the only entrypoint types (entrypoint.type)
       //   that should be built.
       // - `sourcemaps`: if `true`, the source maps are generated in production.
+      // - `postcssViewportToContainerToggle`: the configuration for the breakpoint preview plugin.
       //
       // Note that this getter depends on the current build task arguments. You shouldn't
       // use that directly.
@@ -500,7 +501,13 @@ module.exports = {
           hmr: self.hasHMR(),
           hmrPort: self.options.hmrPort,
           modulePreloadPolyfill: self.options.modulePreloadPolyfill,
-          sourcemaps: self.options.productionSourceMaps
+          sourcemaps: self.options.productionSourceMaps,
+          postcssViewportToContainerToggle: {
+            enable: self.options.breakpointPreviewMode?.enable === true,
+            debug: self.options.breakpointPreviewMode?.debug === true,
+            modifierAttr: 'data-breakpoint-preview-mode',
+            transform: self.options.breakpointPreviewMode?.transform
+          }
         };
         options.devServer = !options.isTask && self.hasDevServer()
           ? self.options.hmr
@@ -633,7 +640,7 @@ module.exports = {
           return;
         }
 
-        // Hidrate the entrypoints with the saved manifest data and
+        // Hydrate the entrypoints with the saved manifest data and
         // set the current build manifest data.
         const buildOptions = self.getBuildOptions();
         const entrypoints = await self.getBuildModule().entrypoints(buildOptions);

diff --git a/modules/@apostrophecms/asset/lib/webpack/apos/webpack.scss.js b/modules/@apostrophecms/asset/lib/webpack/apos/webpack.scss.js
@@ -1,25 +1,17 @@
-const path = require('path');
-const postcssReplaceViewportUnitsPlugin = require('../postcss-replace-viewport-units-plugin');
+const postcssViewportToContainerToggle = require('postcss-viewport-to-container-toggle');
 
 module.exports = (options, apos) => {
   const postcssPlugins = [
+    ...apos.asset.options.breakpointPreviewMode?.enable === true ? [
+      postcssViewportToContainerToggle({
+        modifierAttr: 'data-breakpoint-preview-mode',
+        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
+        transform: apos.asset.options.breakpointPreviewMode?.transform || null
+      })
+    ] : [],
     'autoprefixer',
     {}
   ];
-  let mediaToContainerQueriesLoader = '';
-
-  if (apos.asset.options.breakpointPreviewMode?.enable === true) {
-    postcssPlugins.unshift(
-      postcssReplaceViewportUnitsPlugin()
-    );
-    mediaToContainerQueriesLoader = {
-      loader: path.resolve(__dirname, '../media-to-container-queries-loader.js'),
-      options: {
-        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
-        transform: apos.asset.options.breakpointPreviewMode?.transform || null
-      }
-    };
-  }
 
   return {
     module: {
@@ -28,15 +20,22 @@ module.exports = (options, apos) => {
           test: /\.css$/,
           use: [
             'vue-style-loader',
-            mediaToContainerQueriesLoader,
-            'css-loader'
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                sourceMap: true,
+                postcssOptions: {
+                  plugins: [ postcssPlugins ]
+                }
+              }
+            }
           ]
         },
         {
           test: /\.s[ac]ss$/,
           use: [
             'vue-style-loader',
-            mediaToContainerQueriesLoader,
             'css-loader',
             {
               loader: 'postcss-loader',

diff --git a/modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js b/modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js
diff --git a/modules/@apostrophecms/asset/lib/webpack/postcss-replace-viewport-units-plugin.js b/modules/@apostrophecms/asset/lib/webpack/postcss-replace-viewport-units-plugin.js
diff --git a/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js b/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js
@@ -1,26 +1,18 @@
-const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const postcssReplaceViewportUnitsPlugin = require('../postcss-replace-viewport-units-plugin');
+const postcssViewportToContainerToggle = require('postcss-viewport-to-container-toggle');
 
 module.exports = (options, apos, srcBuildNames) => {
   const postcssPlugins = [
+    ...apos.asset.options.breakpointPreviewMode?.enable === true ? [
+      postcssViewportToContainerToggle({
+        modifierAttr: 'data-breakpoint-preview-mode',
+        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
+        transform: apos.asset.options.breakpointPreviewMode?.transform || null
+      })
+    ] : [],
     'autoprefixer',
     {}
   ];
-  let mediaToContainerQueriesLoader = '';
-
-  if (apos.asset.options.breakpointPreviewMode?.enable === true) {
-    postcssPlugins.unshift(
-      postcssReplaceViewportUnitsPlugin()
-    );
-    mediaToContainerQueriesLoader = {
-      loader: path.resolve(__dirname, '../media-to-container-queries-loader.js'),
-      options: {
-        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
-        transform: apos.asset.options.breakpointPreviewMode?.transform || null
-      }
-    };
-  }
 
   return {
     module: {
@@ -30,8 +22,8 @@ module.exports = (options, apos, srcBuildNames) => {
           use: [
             // Instead of style-loader, to avoid FOUC
             MiniCssExtractPlugin.loader,
-            mediaToContainerQueriesLoader,
-            // Parses CSS imports and make css-loader ignore urls. Urls will still be handled by webpack
+            // Parses CSS imports and make css-loader ignore urls.
+            // Urls will still be handled by webpack
             {
               loader: 'css-loader',
               options: { url: false }

diff --git a/package.json b/package.json
@@ -105,6 +105,7 @@
     "postcss-html": "^1.3.0",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.3",
+    "postcss-viewport-to-container-toggle": "^1.0.0",
     "prompts": "^2.4.1",
     "qs": "^6.10.1",
     "regexp-quote": "0.0.0",

diff --git a/test/postcss.js b/test/postcss.js