Vue-loader: PostCSS 8 Support

[naquiroz]

What problem does this feature solve?

This feature solves compatibility issues with multiple frameworks such as Tailwind v2.0 (https://tailwindcss.com/docs/installation#post-css-7-compatibility-build). Currently, the lock file shows that postcss7 is required, which generates issues when trying to build with webpack using tailwind css framework.

What does the proposed API look like?

upgrade in yarn.lock:

"@vue/component-compiler-utils@^3.1.0":
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.1.1.tgz#d4ef8f80292674044ad6211e336a302e4d2a6575"
  integrity sha512- lN3nsfJJDGMNz7fCpcoYIORrXo0K3OTsdr8jCM7FuqdI4 70TY6gxY6viJ2Xi1clqyPg7LpeOWwjF31vSMmUw==
  dependencies:
    consolidate "^0.15.1"
    hash-sum "^1.0.2"
    lru-cache "^4.1.2"
    merge-source-map "^1.1.0"
    postcss "^7.0.14"
    postcss-selector-parser "^6.0.2"
    prettier "^1.18.2"
    source-map "~0.6.1"
    vue-template-es2015-compiler "^1.9.0"

To support PostCSS 8.

[sodatea]

which generates issues when trying to build with webpack using tailwind css framework.

What issues? Could you elaborate?
Because the postcss 7 listed here is only used for scoped styles, and tailwind is expected to be executed in another pipeline, they shall not interfere with each other.

[naquiroz]

which generates issues when trying to build with webpack using tailwind css framework.

What issues? Could you elaborate?
Because the postcss 7 listed here is only used for scoped styles, and tailwind is expected to be executed in another pipeline, they shall not interfere with each other.

When compiling with webpack, using vue-loader, while listing postcss 8 as a dependency, errors arise, such as:

webpack_1  | Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
webpack_1  | TypeError: this.getOptions is not a function

This is because when using tailwind, one must add tailwindcss as a plugin of postcss, and so, this causes the error to pop.

[sodatea]

Do you have a reproduction? I think it might caused by other issues than the vue-loader dependencies

[naquiroz]

Sure, if you make a project with vue and tailwind css v2.0, compile it with webpack, the error will show.

[sodatea]

Could you give me a git repo as the reproduction?

[joshje]

I'd like to add that the version of postcss in this repo has two known vulnerabilities:

• https://snyk.io/vuln/SNYK-JS-POSTCSS-1255640 - Affecting postcss package, versions <8.2.13
• https://snyk.io/vuln/SNYK-JS-POSTCSS-1090595 - Affecting postcss package, versions >=7.0.0 <8.2.10

Any chance of upgrading it to 8?

[Aex12]

Same error here, I tried to install Tailwind 2 on a Vue2 project and the following error arises:
Error: PostCSS plugin tailwindcss requires PostCSS 8.

[toudi]

luckily for me, I had simple enough setup that allowed me to use the compatibilty layer within tailwind:

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

for me, the way to reproduce this was to simply generate a new project with vue-cli, then generate tailwindss config and then the error would appear when I'd try to either serve it via npm run serve or build via npm run build