Panel plugin development: Parcel error, requires PostCSS 8

Kirby 3 Questions šŸ¤”
1

Iā€™m having trouble with Parcel lately. When I try to run npm run build in the plugin directory, the following error occurs:

šŸšØ Kontext.vue:undefined:undefined: PostCSS plugin postcss-purgecss requires PostCSS 8.

Along with the error comes a link to the ā€œMigration guideā€ that suggest updating to Parcel 2 nightly pre-release. But I donā€™t think thatā€™s an option.

Thereā€™s no error using npm run dev.

When I remove the <style> parts from the single file component, build runs smoothly without errors.

Itā€™s strange because the setup did work before on my machine without errors. I recently updated MacOS Big Sur to Version 11.3.1 but not sure if thatā€™s connected to the error.

Iā€™m really no expert on Parcel. For the plugin-setup I followed the instructions from the Cookbook. What I tried so far is removing the folders node_modules and .cache as well as the file package-lock.json. I also re-installed Node, npm and Parcel globally without effect.

Hereā€™s the package.json file:

{
  "scripts": {
    "dev": "parcel watch src/index.js --no-source-maps -d ./",
    "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
  },
  "posthtml": {
    "recognizeSelfClosing": true
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.2.0",
    "vue-template-compiler": "^2.6.13"
  },
  "dependencies": {
    "vue": "^2.6.13",
    "vue-hot-reload-api": "^2.3.4"
  }
}

(The dependencies are actually being added by npm run dev)

Test fresh pluginkit

I also downloaded a fresh pluginkit ZIP-File from Plugin setup for Panel plugins | Kirby CMS and made a dry run with npm run build.

Parcel fetches the dependencies and changes the package.json to this:

{
  "scripts": {
    "dev": "parcel watch src/index.js --no-source-maps -d ./",
    "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
  },
  "posthtml": {
    "recognizeSelfClosing": true
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.2.0",
    "cssnano": "^5.0.5",
    "postcss": "^8.3.0",
    "sass": "^1.34.1",
    "vue-template-compiler": "^2.6.13"
  }
}

Now thereā€™s a slightly different but closely related error:

šŸšØ PostCSS plugin postcss-discard-comments requires PostCSS 8.

Again, when I remove the (still empty) <style> part from the single file component, thereā€™s no error on build. And of course npm run dev just works anyhow.

1 Like
2

What works for me (but I donā€™t know where the error comes from or how to fix it):

{
  "scripts": {
    "dev": "parcel watch src/index.js --no-source-maps -d ./",
    "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
  },
  "posthtml": {
    "recognizeSelfClosing": true
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.2.0",
    "cssnano": "^4.1.11",
    "sass": "^1.34.1",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "vue": "^2.6.12",
    "vue-hot-reload-api": "^2.3.4"
  }
}

As you can see, this uses older versions of the dependencies:

Before you run npm run build:

  • remove the node-modules folder
  • remove package-lock.json
  • clear cache folder if present
3

Thank you. So you can reproduce the error?

Your package.json does the trick. But without it ā€“ starting from scratch and let Parcel fetch the dependencies ā€“ the error occurs again. So maybe the build script needs to be fixed?

By the way, when I first used your package.json, it only worked with the pluginkit, not with my actual setup. I tried all possible combinations for debugging until I found out that there was a conflict with another node_moduels and .cache folder at root level (the build process of the website). Somehow they got in each otherā€™s way. Only after I also removed and re-built those with the older versions of the dependencies, the other build process within the plugin folder finally worked.

Anyway, thank you for the workaround.