Not a PostCss Plugin

[stevenmccord]

I am been doing some research, but I can't seem to figure out why I am getting thrown an error that a plugin can't be loaded.

Here is the grunt postcss --verbose --debug

Running "postcss" task
[D] Task source: /home/ubuntu/stymie-ui/node_modules/grunt-postcss/tasks/postcss.js

Running "postcss:default" (postcss) task
[D] Task source: /home/ubuntu/stymie-ui/node_modules/grunt-postcss/tasks/postcss.js
Verifying property postcss.default exists in config...OK
Files: app/styles/style.css
Options: processors=["require('autoprefixer')({browsers: ['last 2 versions']})"], map={"inline":false}, diff=false, safe=false, failOnError=false, writeDest
Warning: require('autoprefixer')({browsers: ['last 2 versions']}) is not a PostCSS plugin Use --force to continue.

Here is the grunt --config debug

CONFIG:
==============================
{
  "aliases": {
    "serve": [
      "copy:dev",
      "clean:server",
      "sass",
      "shell:npm",
      "shell:bower",
      "watch"
    ],
    "build": [
      "clean:dist",
      "wiredep",
      "useminPrepare",
      "sass",
      "imagemin",
      "svgmin",
      "concat",
      "ngAnnotate",
      "copy:dist",
      "cssmin",
      "uglify",
      "rev",
      "usemin",
      "htmlmin"
    ]
  },
  "cdnify": {
    "dist": {
      "html": [
        "<%= yeoman.dist %>/*.html"
      ]
    }
  },
  "clean": {
    "dist": {
      "files": [
        {
          "dot": true,
          "src": [
            ".tmp",
            "<%= yeoman.dist %>/*",
            "!<%= yeoman.dist %>/.git*"
          ]
        }
      ]
    },
    "server": ".tmp"
  },
  "copy": {
    "dev": {
      "files": [
        {}
      ]
    },
    "dist": {
      "files": [
        {
          "expand": true,
          "dot": true,
          "cwd": "<%= yeoman.app %>",
          "dest": "<%= yeoman.dist %>",
          "src": [
            "*.{ico,png,txt}",
            "*.html",
            "scripts/{,**/}*.html",
            "scripts/{,**/}*.json",
            "images/{,*/}*.{webp}"
          ]
        },
        {
          "expand": true,
          "cwd": ".tmp/images",
          "dest": "<%= yeoman.dist %>/images",
          "src": [
            "generated/*"
          ]
        },
        {
          "expand": true,
          "flatten": true,
          "cwd": "<%= yeoman.app %>",
          "dest": "<%= yeoman.dist %>/fonts",
          "src": [
            "fonts/*.*"
          ]
        }
      ]
    }
  },
  "htmlmin": {
    "dist": {
      "options": {
        "collapseWhitespace": true,
        "collapseBooleanAttributes": true,
        "removeCommentsFromCDATA": true,
        "removeOptionalTags": true
      },
      "files": [
        {
          "expand": true,
          "cwd": "<%= yeoman.dist %>",
          "src": [
            "*.html",
            "views/**/*.html"
          ],
          "dest": "<%= yeoman.dist %>"
        }
      ]
    }
  },
  "imagemin": {
    "dist": {
      "files": [
        {
          "expand": true,
          "cwd": "<%= yeoman.app %>/images",
          "src": "{,*/}*.{png,jpg,jpeg,gif,mp4,ico}",
          "dest": "<%= yeoman.dist %>/images"
        }
      ]
    }
  },
  "jshint": {
    "options": {
      "jshintrc": ".jshintrc",
      "reporter": "node_modules/jshint-stylish/stylish.js"
    },
    "all": [
      "Gruntfile.js",
      "<%= yeoman.app %>/scripts/{,*/}*.js"
    ]
  },
  "ngAnnotate": {
    "dist": {
      "files": [
        {
          ".tmp/concat/scripts/app.js": ".tmp/concat/scripts/app.js"
        }
      ]
    }
  },
  "postcss": {
    "default": {
      "options": {
        "map": {
          "inline": false
        },
        "processors": [
          "require('autoprefixer')({browsers: ['last 2 versions']})"
        ]
      },
      "src": "app/styles/style.css"
    }
  },
  "rev": {
    "dist": {
      "files": {
        "src": [
          "<%= yeoman.dist %>/scripts/{,*/}*.js",
          "<%= yeoman.dist %>/styles/{,*/}*.css"
        ]
      }
    }
  },
  "sass": {
    "options": {
      "includePaths": [
        "<%= yeoman.app %>/libraries",
        "<%= yeoman.app %>/libraries/compass-mixins/lib/"
      ]
    },
    "dist": {
      "files": {
        "app/styles/style.css": "app/styles/style.scss"
      }
    }
  },
  "shell": {
    "npm": {
      "command": "npm install"
    },
    "bower": {
      "command": "bower install --config.interactive=false --allow-root && bower --force update --allow-root\n"
    }
  },
  "svgmin": {
    "dist": {
      "files": [
        {
          "expand": true,
          "cwd": "<%= yeoman.app %>/images",
          "src": "{,*/}*.svg",
          "dest": "<%= yeoman.dist %>/images"
        }
      ]
    }
  },
  "uglify": {
    "options": {
      "sourceMap": true,
      "sourceMapIncludeSources": true
    }
  },
  "usemin": {
    "html": [
      "<%= yeoman.dist %>/{,*/}*.html",
      "<%= yeoman.dist %>/scripts/**/*.html"
    ],
    "css": [
      "<%= yeoman.dist %>/styles/{,*/}*.css"
    ],
    "options": {
      "assetsDirs": [
        "<%= yeoman.dist %>",
        "<%= yeoman.dist %>/fonts/bootstrap"
      ]
    }
  },
  "useminPrepare": {
    "html": "<%= yeoman.app %>/index.html",
    "options": {
      "dest": "<%= yeoman.dist %>"
    }
  },
  "watch": {
    "options": {
      "spawn": true,
      "interrupt": true,
      "reload": true,
      "event": [
        "added",
        "deleted",
        "changed"
      ]
    },
    "compass": {
      "files": [
        "<%= yeoman.app %>/styles/{,**/*}*.{scss,sass}"
      ],
      "tasks": [
        "sass",
        "postcss"
      ]
    },
    "js": {
      "files": [
        "<%= yeoman.app %>/scripts/**/*.js"
      ],
      "tasks": [
        "newer:jshint:all"
      ]
    },
    "gruntfile": {
      "files": [
        "Gruntfile.js"
      ]
    },
    "npm": {
      "files": [
        "package.json"
      ],
      "tasks": [
        "shell:npm"
      ]
    },
    "bower": {
      "files": [
        "bower.json",
        ".bowerrc"
      ],
      "tasks": [
        "shell:bower"
      ]
    }
  },
  "wiredep": {
    "target": {
      "src": "<%= yeoman.app %>/index.html"
    }
  }
  }
}

ALIASES:
==============================
serve ["copy:dev","clean:server","sass","shell:npm","shell:bower","watch"]
build ["clean:dist","wiredep","useminPrepare","sass","imagemin","svgmin","concat","ngAnnotate","copy:dist","cssmin","uglify","rev","usemin","htmlmin"]

Here is the YAML config:

default:
  options:
    map:
      inline: false
    processors:
      - "require('autoprefixer')({browsers: ['last 2 versions']})"
  src: app/styles/style.css

I have tried it with files and option for the src and dest, just no luck. If anyone has any ideas that would be extremely helpful. Thanks!

[SolomoN-ua]

Hi @stevenmccord, there is no way to use js require() in YAML, JSON or etc. You need to specify your postcss config as JS module file, like:

module.exports = {
// ...
};

This is not an load-grunt-config issue, but rather a general limitation.

[stevenmccord]

@SolomoN-ua Thanks for the quick reply. I have a similar problem when I go to js as well. I have this:

 module.exports = {
  postcss: { // please note: in this case this is target name not plugin name (so you can put any keyword, like: foo or dist or production etc.)
    options: {
      processors: [
          require('autoprefixer')({browsers: ['last 2 versions']})
      ]
    },
    src: 'app/styles/style.css',
    dest: 'app/styles/style-dest.css'
  }
};

When I run a grunt postcss --verbose --debug I get the following:

Running "postcss" task
[D] Task source: /home/ubuntu/stymie-ui/node_modules/grunt-postcss/tasks/postcss.js

Running "postcss:postcss" (postcss) task
[D] Task source: /home/ubuntu/stymie-ui/node_modules/grunt-postcss/tasks/postcss.js
Verifying property postcss.postcss exists in config...OK
Files: app/styles/style.css -> app/styles/style-dest.css
Options: processors=[null], map=false, diff=false, safe=false, failOnError=false, writeDest
Reading app/styles/style.css...OK
Writing app/styles/style-dest.css...OK
File app/styles/style-dest.css created.
>> 1 processed stylesheet created.

If I wrap the processor in quotes I get the is not a PostCSS plugin error like I did in the YAML probably b/c it is view it as a string.

Below is the grunt --config-debug for the postcss section:

  "postcss": {
    "postcss": {
      "options": {
        "processors": [
          null
        ]
      },
      "src": "app/styles/style.css",
      "dest": "app/styles/style-dest.css"
    }
  },

Any help you can provide would be great. Thanks!

[SolomoN-ua]

@stevenmccord is autoprefixer installed in your project? (npm install autoprefixer)

[stevenmccord]

@SolomoN-ua yep, confirmed that a few times myself just to make sure :). When I try with the quotes I get that plugin error and if I don't wrap that processor in a quote, it is just null.

[SolomoN-ua]

@stevenmccord it should not work with quotes in any case because require() is a js code construction and not a regular string, it should be executed.

[SolomoN-ua]

@stevenmccord first try to use require('autoprefixer') without options, if it does not helps try to use it same way as in official documentation https://github.com/postcss/autoprefixer#grunt It does not look like issue with load-grunt-config but maybe an issue with grunt-postcss plugins itself. P.S.: maybe connected with this issue https://github.com/nDmitry/grunt-postcss/issues/107

[stevenmccord]

@SolomoN-ua I have been running it and it looks like it actually is processing it, just the debug information is saying it is null. So it looks like it is working just not outputting what I thought it would be. Thanks for all your help, sorry to bother you with a non-issue!

[SolomoN-ua]

@stevenmccord no problem, glad to hear that everything work fine. Have a nice day! :)