I developed a custom postcss plugin that was working perfectly according to the postcss guidelines until I tried to implement it in a real project.
For reference, here's the plugin on GitHub
My goal is to integrate it into a Vue-cli app using Webpack.
After installing the plugin with npm install, along with postcss and postcss-loader (I've experimented with different versions and reinstallation, but without success), I encountered issues.
This is my current postcss.config.js setup:
module.exports = {
plugins: [
require("postcss-vwh"),
//...
],
};
Update
Upon constructing a basic application (excluding Vue, only utilizing Webpack 5, css-loaders with the latest version of postcss and the plugin), it functioned properly!
It appears the problem lies not within my plugin, but rather with vue-cli. Despite numerous attempts, I am consistently presented with this error message:
Syntax Error: Error: PostCSS plugin postcss-vwh requires PostCSS 8.
Research suggests upgrading postcss-loader could resolve this issue, yet vue-cli restricts me to using version 4, the final iteration compatible with Webpack 4 running my vue-cli application.
Is there any way to modify my plugin to be less restrictive, possibly requiring a lower version of postcss for compatibility with Webpack 4?