Pro 6694 breakpoint preview vite ready (#9)

* Uses postcss-loader to get user project level postcss config
* Loads project level postcss config only for public build
* Loads new postcss plugin when breakpoint preview is enabled
* Loads autoprefixer by default for apos build only

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## UNRELEASED
+
+### Adds
+
+* Adds postcss supports for the new `postcss-viewport-to-container-toggle` that allows the breakpoint preview feature to work.
+* Loads postcss config file from project only for public builds.
+* Adds `autoprefixer` plugin only for apos builds.
+
 ## 1.0.0-beta.1 (2024-10-31)
 
-Initial beta release.
+* Initial beta release.

lib/internals.js

@@ -1,9 +1,12 @@
 const path = require('node:path');
 const fs = require('fs-extra');
+const postcssrc = require('postcss-load-config');
+const postcssViewportToContainerToggle = require('postcss-viewport-to-container-toggle');
 const viteBaseConfig = require('./vite-base-config');
 const viteAposConfig = require('./vite-apos-config');
 const vitePublicConfig = require('./vite-public-config');
 const viteServeConfig = require('./vite-serve-config');
+const vitePostcssConfig = require('./vite-postcss-config');
 
 module.exports = (self) => {
   return {
@@ -821,7 +824,8 @@ module.exports = (self) => {
         root: self.buildRoot,
         cacheDir: path.join(self.cacheDirBase, id),
         manifestRelPath: self.buildManifestPath[`${id}Rel`],
-        sourceMaps: options.sourcemaps
+        sourceMaps: options.sourcemaps,
+        assetOptions: self.apos.asset.options
       });
     },
 
@@ -837,10 +841,12 @@ module.exports = (self) => {
      */
     async getAposViteConfig(baseConfig) {
       const vite = await import('vite');
-      const aposConfig = await viteAposConfig({
+      const config = await viteAposConfig({
         sourceRoot: self.buildRootSource,
         input: self.getBuildInputs('apos')
       });
+      const postcssConfig = await self.getPostcssConfig(self.buildOptions, 'apos');
+      const aposConfig = vite.mergeConfig(config, postcssConfig);
 
       const mergeConfigs = vite.defineConfig((configEnv) => {
         return vite.mergeConfig(baseConfig, aposConfig, true);
@@ -864,13 +870,13 @@ module.exports = (self) => {
      */
     async getPublicViteConfig(baseConfig) {
       const vite = await import('vite');
-
+      // The base public config
+      const config = await vitePublicConfig({
+        input: self.getBuildInputs('public')
+      });
+      const postcssConfig = await self.getPostcssConfig(self.buildOptions, 'public');
+      const publicConfig = vite.mergeConfig(config, postcssConfig);
       const mergeConfigs = vite.defineConfig(async (configEnv) => {
-        // The base public config
-        const publicConfig = await vitePublicConfig({
-          input: self.getBuildInputs('public')
-        });
-
         // Module configurations
         let merged = vite.mergeConfig(baseConfig, publicConfig);
         for (const { extensions, name } of self.getBuildEntrypointsFor('public')) {
@@ -902,6 +908,42 @@ module.exports = (self) => {
       return mergeConfigs;
     },
 
+    /**
+     * Gets postcss config for the current environment *
+     *
+     * @param {object} buildOptions: build options
+     * @param {string} id: apos / public
+     *
+     * @returns {Promise<import('vite').UserConfig>}
+     */
+    async getPostcssConfig(buildOptions, id) {
+      const {
+        enable: enablePostcssViewport, ...postcssViewportOptions
+      } = buildOptions?.postcssViewportToContainerToggle || {};
+
+      const postcssPlugins = [];
+      if (id === 'public') {
+        try {
+          const {
+            plugins
+          } = await postcssrc({}, self.apos.rootDir);
+          postcssPlugins.push(...plugins);
+        } catch (err) { /* Project has no postcss config file */ }
+      }
+
+      if (enablePostcssViewport) {
+        postcssPlugins.push(postcssViewportToContainerToggle(postcssViewportOptions));
+      }
+
+      if (id === 'apos') {
+        postcssPlugins.push(
+          require('autoprefixer')()
+        );
+      }
+
+      return vitePostcssConfig({ plugins: postcssPlugins });
+    },
+
     /**
      * Accepts merged vite User configuration and produces
      * the final Vite Inline configuration.

lib/vite-postcss-config.js

@@ -0,0 +1,9 @@
+module.exports = async ({ plugins }) => {
+  return {
+    css: {
+      postcss: {
+        plugins
+      }
+    }
+  };
+};

package.json

@@ -34,7 +34,10 @@
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
     "fs-extra": "^7.0.1",
+    "postcss-load-config": "^6.0.1",
+    "postcss-viewport-to-container-toggle": "^1.0.0",
     "vite": "^5.4.9"
   }
-}
+}