[object Object] is not a PostCSS plugin after upgrade to 5.0.0

AndrewBogdanovTSS commented 3 years ago

I'm using postcss-nested inside Nuxt, my config that I was using before the upgrade with v.4.2.3 was working just fine nuxt.config.js

export default {
    build: {
        postcss: {
    // Allows the use of single line comments
    // in .pscss and .vue files
    parser: 'postcss-comment',
    // Add plugin names as key and arguments as value
    // Install them before as dependencies with npm or yarn
    plugins: {
      'postcss-import': {},
      tailwindcss: {},
      'postcss-nested': {},
      'postcss-hexrgba': {},
      'postcss-custom-properties': {
        importFrom: [{customProperties}]
      },
      autoprefixer: {}
    }
    }
}

but after the upgrade I started to get an error which fails the build

 ERROR  in ./fomos/droplet.vue?vue&type=style&index=0&lang=postcss&

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (H:\Projects\Kare\frontend\node_modules\postcss\lib\proc
essor.js:168:15)
    at new Processor (H:\Projects\Kare\frontend\node_modules\postcss\lib\processor.
js:52:25)
    at postcss (H:\Projects\Kare\frontend\node_modules\postcss\lib\postcss.js:55:10
)
    at H:\Projects\Kare\frontend\node_modules\postcss-loader\src\index.js:140:12
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

ai commented 3 years ago

Nust.js is still using PostCSS 7. You can’t update to PostCSS 8 based plugins.

janswist commented 3 years ago

Using version 4.2.3 worked for me in Nuxt as well, thanks!

One question @ai : how can I check it PostCSS really added vendor prefixes? I looked into sources, but they still seem unprefixed. Probably I don't know how to check it. Thanks in advance!

ai commented 3 years ago

@janswist call npx autoprefixer --info to get what prefixed is required for your Browserslist. Then put it in CSS.

janswist commented 3 years ago

I got something like this. I'm supposed to put it in something like main.css? Not really understood what put it in CSS means.

➜  app git:(master) npx autoprefixer --info
Browsers:
  Chrome for Android: 85
  Firefox for Android: 79
  And_qq: 10.4
  UC for Android: 12.12
  Android: 81
  Baidu: 7.12
  Chrome: 86, 85, 84
  Edge: 86, 85
  Firefox: 81, 80, 78, 68
  IE: 11
  iOS: 14, 13.4-13.7, 13.3, 12.2-12.4
  Kaios: 2.5
  Opera Mini: all
  Opera Mobile: 59
  Opera: 71, 70
  Safari: 14, 13.1
  Samsung: 12.0, 11.1-11.2

These browsers account for 90.39% of all users globally

At-Rules:
  @keyframes: webkit
  @resolution: webkit
  @viewport: ms, o

Selectors:
  ::backdrop: webkit
  ::placeholder: moz, -ms- old
  ::selection: moz
  :any-link: webkit, moz
  :fullscreen: webkit, ms
  :placeholder-shown: moz, ms
  :read-only: moz
  :read-write: moz

Properties:
  animation-delay: webkit
  animation-direction: webkit
  animation-duration: webkit
  animation-fill-mode: webkit
  animation-iteration-count: webkit
  animation-name: webkit
  animation-play-state: webkit
  animation-timing-function: webkit
  animation: webkit
  appearance: webkit, moz
  backdrop-filter: webkit
  backface-visibility: webkit
  background-clip: webkit
  border-block-end: webkit
  border-block-start: webkit
  border-image: o
  border-inline-end: webkit
  border-inline-start: webkit
  box-decoration-break: webkit
  break-after: moz
  break-before: moz
  break-inside: moz
  clip-path: webkit
  color-adjust: webkit
  column-count: moz
  column-fill: moz
  column-gap: moz
  column-rule-color: moz
  column-rule-style: moz
  column-rule-width: moz
  column-rule: moz
  column-span: moz
  column-width: moz
  columns: moz
  flow-from: ms
  flow-into: ms
  font-kerning: webkit
  grid-area *: ms
  grid-column *: ms
  grid-column-align *: ms
  grid-column-end *: ms
  grid-column-start *: ms
  grid-row *: ms
  grid-row-align *: ms
  grid-row-end *: ms
  grid-row-start *: ms
  grid-template *: ms
  grid-template-areas *: ms
  grid-template-columns *: ms
  grid-template-rows *: ms
  hyphens: webkit, ms
  image-rendering: ms
  margin-block-end: webkit
  margin-block-start: webkit
  margin-inline-end: webkit
  margin-inline-start: webkit
  mask-border-outset: webkit
  mask-border-repeat: webkit
  mask-border-slice: webkit
  mask-border-source: webkit
  mask-border-width: webkit
  mask-border: webkit
  mask-clip: webkit
  mask-composite: webkit
  mask-image: webkit
  mask-origin: webkit
  mask-position: webkit
  mask-repeat: webkit
  mask-size: webkit
  mask: webkit
  object-fit: o
  object-position: o
  overscroll-behavior: ms
  padding-block-end: webkit
  padding-block-start: webkit
  padding-inline-end: webkit
  padding-inline-start: webkit
  place-self: ms
  region-fragment: ms
  scroll-snap-coordinate: ms
  scroll-snap-destination: ms
  scroll-snap-points-x: ms
  scroll-snap-points-y: ms
  scroll-snap-type: ms
  tab-size: moz, o
  text-align-last: moz
  text-decoration-color: webkit
  text-decoration-line: webkit
  text-decoration-skip-ink: webkit
  text-decoration-skip: webkit
  text-decoration-style: webkit
  text-decoration: webkit
  text-emphasis-color: webkit
  text-emphasis-position: webkit
  text-emphasis-style: webkit
  text-emphasis: webkit
  text-orientation: webkit
  text-size-adjust: webkit, moz
  text-spacing: ms
  user-select: webkit, moz, ms
  writing-mode: ms

Values:
  cross-fade: webkit
  element: moz
  fill-available: webkit, moz
  fill: webkit, moz
  fit-content: webkit, moz
  grab: webkit
  grabbing: webkit
  grid *: ms
  image-set: webkit
  inline-grid *: ms
  isolate-override: moz
  isolate: webkit, moz
  max-content: webkit, moz
  min-content: webkit, moz
  pixelated: moz
  plaintext: moz
  sticky: webkit
  stretch: webkit, moz

* - Prefixes will be added only on grid: true option.

ai commented 3 years ago

Add body { user-select: text; } to CSS and thern check that your output CSS contains prefixed versions

janswist commented 3 years ago

Works! Accidentally I discovered that it works even though it's not installed (I had it installed, but then switched to other branch where I don't have it and voilà). Is it supposed to work out of the box in Nuxt.js?

Anyway, thanks for the help!