postcss plugins fail

Something strange happening.

const stylusOptons = {
  paths: ['node_modules', 'resources/assets/stylus'],
  'include css': true,
  'resolve url': true,
  use: [require('lost')(), require('postcss-flexbugs-fixes')()]
};

laravel-mix@^0.10.0:
  version "0.10.0"

postcss-loader@^1.2.1:
  version "1.3.3"
  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.3.3.tgz#a621ea1fa29062a83972a46f54486771301916eb"
  dependencies:
    loader-utils "^1.0.2"
    object-assign "^4.1.1"
    postcss "^5.2.15"
    postcss-load-config "^1.2.0"

postcss@^5.0.0, postcss@^5.0.21, postcss@^5.2.15, postcss@^5.2.16, postcss@^5.2.17, postcss@^5.2.8:
  version "5.2.17"

lost@^8.0.0:
  version "8.0.0"
  resolved "https://registry.yarnpkg.com/lost/-/lost-8.0.0.tgz#7ab03254f1106b6940abb2045c0e38f821a73475"
  dependencies:
    object-assign "^4.1.0"
    postcss "^5.2.8"

 ERROR  Failed to compile with 3 errors                                                                                                                                                                                  6:12:42 PM

 error  in ./resources/assets/stylus/app.styl

Module build failed: TypeError: css.walkAtRules is not a function
    at lostAtRule (.../node_modules/lost/lib/lost-at-rule.js:12:7)
    at .../node_modules/lost/lost.js:32:7
    at Array.forEach (native)
    at Renderer.<anonymous> (.../node_modules/lost/lost.js:31:10)
    at Renderer.use (.../node_modules/stylus/lib/renderer.js:204:6)
    at .../node_modules/stylus-loader/index.js:66:16
    at Array.forEach (native)
    at .../node_modules/stylus-loader/index.js:64:25
    at Array.forEach (native)
    at Object.module.exports (.../node_modules/stylus-loader/index.js:61:24)

walkAtRules was introduced in postcss 5. It is installed. But all postcss processors fail 😦

package.json:

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "axios": "^0.16.1",
    "babel-cli": "^6.24.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-flow-runtime": "^0.10.0",
    "babel-plugin-syntax-flow": "^6.18.0",
    "babel-plugin-tcomb": "^0.3.25",
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2017": "^6.22.0",
    "babel-preset-flow": "^6.23.0",
    "barba.js": "^1.0.0",
    "bezier-easing": "^2.0.3",
    "class-autobind": "^0.1.4",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "cross-env": "^4.0.0",
    "debug": "^2.2.0",
    "document-offset": "^1.0.4",
    "document-register-element": "^1.4.1",
    "element-closest": "^2.0.2",
    "envify": "^4.0.0",
    "es6-symbol": "^3.1.0",
    "flow-bin": "^0.44.0",
    "flow-runtime": "^0.10.0",
    "form-serialize": "^0.7.1",
    "hammerjs": "^2.0.8",
    "imagemin-webpack-plugin": "^1.4.4",
    "imports-loader": "^0.7.1",
    "isotope": "^1.0.0-alpha.3",
    "isotope-layout": "^3.0.3",
    "isotope-packery": "^2.0.0",
    "js-polyfills": "^0.1.22",
    "laravel-mix": "^0.10.0",
    "lodash": "^4.17.4",
    "lost": "^8.0.0",
    "masonry": "^0.0.2",
    "mkdirp": "^0.5.1",
    "moment": "^2.13.0",
    "nodep-date-input-polyfill": "^4.7.0",
    "normalize-styl": "^4.1.1",
    "photoswipe": "^4.1.1",
    "ply": "git+https://github.com/RubaXa/Ply.git",
    "position-sticky": "^0.1.3",
    "postcss": "^5.2.17",
    "postcss-flexbugs-fixes": "^2.1.0",
    "raven-js": "^3.3.0",
    "sass-module-importer": "^1.2.1",
    "social-likes-next": "^1.1.0",
    "sortablejs": "^1.4.2",
    "stripify": "^6.0.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "tcomb": "^3.2.20",
    "text-encoder-lite": "^1.0.0",
    "text-encoding": "^0.6.0",
    "text-mask-all": "^0.2.0",
    "topbar": "^0.1.3",
    "url-search-params": "^0.7.0",
    "urlsearchparams": "^0.1.1",
    "velocity-animate": "^1.2.3",
    "vue": "^2.1.10",
    "whatwg-fetch": "^2.0.3",
    "yargs": "^4.7.1"
  },
  "dependencies": {
    "dotenv": "^4.0.0",
    "express": "^4.14.0",
    "fontello-webpack-plugin": "^0.4.0",
    "fs-promise": "^2.0.2",
    "gridfs-stream": "^1.1.1",
    "modernizr-webpack-plugin": "^1.0.5",
    "mongoose": "^4.6.2",
    "numeral": "^2.0.6",
    "yargs": "^7.1.0"
  }
}

[terion-name]

After deeping inside plugins source I’ve found that they get weird stuff in callback (see comments):

// plugin code
var postcss = require('postcss');
var bug4 = require('./bugs/bug4');
var bug6 = require('./bugs/bug6');
var bug81a = require('./bugs/bug81a');

var doNothingValues = ['none', 'auto', 'content', 'inherit', 'initial', 'unset'];

module.exports = postcss.plugin('postcss-flexbugs-fixes', function (opts) {
    opts = opts || {};

    return function (css) {
        // <-----------
        // here in css — inexplicable object. maybe incorrect context?
        // <-----------
        css.walkDecls(function (d) {
            if (d.value === 'none') {
                return;
            }
            var values = postcss.list.space(d.value);
            if (doNothingValues.indexOf(d.value) > 0 && values.length === 1) {
                return;
            }
            bug4(d);
            bug6(d);
            bug81a(d);
        });
    };
});

HOWEVER! If use plugins like this — they work

mix.options({
  uglify: false,
  postCss: {
    plugins: [
      require('postcss-flexbugs-fixes')(),
      require('lost')(),
      require('autoprefixer')({
        browsers: '>0.1%'
      }),
    ]
  }
});

[ansezz]

First : npm install --save lost

thene in webpack.mix.js :

mix.stylus('resources/assets/css/index.styl', 'public/css/app.css')
    .options({
        postCss: {
            plugins: [
                require('lost')(),
            ]
        }
    })
    .version();

Thanks