diff --git a/CHANGELOG.md b/CHANGELOG.md index fe7edec..80490c5 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/lib/internals.js b/lib/internals.js index a6446df..a61de26 100644 --- a/lib/internals.js +++ b/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} + */ + 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. diff --git a/lib/vite-postcss-config.js b/lib/vite-postcss-config.js new file mode 100644 index 0000000..3d41350 --- /dev/null +++ b/lib/vite-postcss-config.js @@ -0,0 +1,9 @@ +module.exports = async ({ plugins }) => { + return { + css: { + postcss: { + plugins + } + } + }; +}; diff --git a/package.json b/package.json index 78ec5a0..624ea7b 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +}