How to use with alternative of postcss-import?

[azu]

Hi, I try to use suitcss/preprocessor with postcss-easy-import and get unexpected behavior.

It seems that options.use is append-only.

merged.use = plugins.concat(options.use);

• https://github.com/suitcss/preprocessor/blob/777940cef8a3c3c45a66c96056533f2307034b70/lib/index.js#L114

My config.js is following value:

const usePluginList = [
    "postcss-easy-import",
    "postcss-custom-properties",
    "postcss-calc",
    "postcss-custom-media",
    "autoprefixer",
    "postcss-reporter"
];
module.exports = {
    "root": "./src/css/",
    "use": usePluginList,
    "postcss-easy-import": {
        root: "./src/css/",
        glob: true
    }
};

Actual value of suitcss/preprocessor's options:

{ minify: undefined,
  lint: undefined,
  use: 
   [ 'postcss-import',
     'postcss-custom-properties',
     'postcss-calc',
     'postcss-custom-media',
     'autoprefixer',
     'postcss-reporter',
     'postcss-easy-import',
     'postcss-custom-properties',
     'postcss-calc',
     'postcss-custom-media',
     'autoprefixer',
     'postcss-reporter' ],
  'postcss-import': { onImport: [Function], root: './src/css/' },
  'postcss-reporter': { clearMessages: true },
  cssnano: 
   { calc: false,
     autoprefixer: false,
     mergeRules: false,
     safe: true },
  root: './src/css/',
  'postcss-easy-import': { root: './src/css/', glob: true } }

Expected value of suitcss/preprocessor's options:

{ minify: undefined,
  lint: undefined,
  use: 
   [ 'postcss-easy-import',
     'postcss-custom-properties',
     'postcss-calc',
     'postcss-custom-media',
     'autoprefixer',
     'postcss-reporter' ],
  'postcss-import': { onImport: [Function], root: './src/css/' },
  'postcss-reporter': { clearMessages: true },
  cssnano: 
   { calc: false,
     autoprefixer: false,
     mergeRules: false,
     safe: true },
  root: './src/css/',
  'postcss-easy-import': { root: './src/css/', glob: true } }

[azu]

May I use postcss-cli?

[simonsmith]

It seems that options.use is append-only.

Hmm. The line before does remove duplicates to allow you to re-order existing plugins, but I concede it will be difficult to remove postcss-import.

This feature is mostly used for edge cases so I would agree with you and recommend you use postcss-cli as that gives you far more control over plugins.

In the meantime I'll revisit the tests to ensure the feature here works as expected. Cheers

[azu]

recommend you use postcss-cli as that gives you far more control over plugins.

Ok. Thanks for reply :)

[giuseppeg]

If you want we could make it possible to turn off default plugins.

var customSettings = {
  "use": [
     /* when merged with the default options postcss-import will be here */   
  ],
  "postcss-import": false // turn off postcss-import
};

// ...
var plugins = options.use.map(function(p) {
  if (options[p] === false) {
     return false;
  }
  var plugin = require(p);
  var settings = options[p];

  return settings ? plugin(settings) : plugin;
}).filter(Boolean);

[simonsmith]

I think the reason it works the way it does now is we assumed that people would/should always use the default plugins to build a component. However this was before alternatives existed, like postcss-easy-import. If we wanted to allow finer control we could override the use array directly instead of merging additions. It would mean a user would have to list all the plugins again (which maybe annoying) but I am conscious of this tool becoming very similar to postcss-cli otherwise.

However, @giuseppeg your solution is nice and probably means the API changes far less than if we did my above suggestion.

[giuseppeg]

Yep, I was just saying that it is possible. However we may want to stick with a minimal set of plugins, if then postcss-easy-import is better or faster we could switch to it.

[simonsmith]

It's pretty much just a wrapper around postcss-import for some of the features that got removed (like glob) No harm in switching to it. I think it's the only package that exists this way so it might easier to do that than build a way to disable plugins