Add an option to enable/provide watch functionality for imported files about rollup-plugin-postcss

[anttikissa]

rollup/rollup#1203 seems to be fixed in rollup/rollup#2259. The rollup plugin's transform hook can now return dependencies array which adds to files being watched (for example, see test "watches and rebuilds transform dependencies" https://github.com/rollup/rollup/blob/df9ef2879e3a641874fa7cc64cfb2e9996288783/test/watch/index.js#L391).

I'm tinkering with it to see if I can make it work with my use case (Stylus imports only), which looks pretty straightforward. Not sure how easy it will be to support Sass imports and imports brought in by PostCSS plugins such as postcss-import as well.

[lmihaidaniel]

ping @meszaros-lajos-gyorgy

[meszaros-lajos-gyorgy]

Do we need a polyfill for Object.entries()?

According to nodejs compatibility table, node is supporting it natively from version 7.5.0, but if we want to support older node versions, then I will add this polyfill:

// based on: https://github.com/tc39/proposal-object-values-entries/blob/master/polyfill.js

if(!Object.entries){
  Object.entries = function(O){
    return Object.keys(O).reduce(function(e, k){
      return e.concat(typeof k === 'string' && O.propertyIsEnumerable(k) ? [[k, O[k]]] : [])
    }, [])
  }
}

[meszaros-lajos-gyorgy]

I've added and Object.entries polyfill, but the linter says:

Do not access Object.prototype method propertyIsEnumerable from target object.

Is there a way to disable the no-prototype-builtins rule for the polyfill similarly to how eslint disables it?

/* eslint:disable */
// the polyfill should go here
/* eslint:enable */

[meszaros-lajos-gyorgy]

I've added an example to test out my new feature in the example/watch-imported-files directory. Execute npm run build:watch and then modify any less files in the src folder, rollup should rebuild the code.

[egoist]

I guess it can be achieved on the user land via onImport option now?

[meszaros-lajos-gyorgy]

Would the user have to manually trigger a rebuild in the onImport handler?

[egoist]

@meszaros-lajos-gyorgy the watcher.watchFile method might work, haven't tested it tho.

[meszaros-lajos-gyorgy]

As far as I remember with the older version, it only works for JS files and it only re-triggers the build of JS files, not the whole rollup procedure, so postcss will not get triggered for rebuilding.

[egoist]

@meszaros-lajos-gyorgy I just tested it with Rollup v0.54 and it works fine in watch mode 😄

[meszaros-lajos-gyorgy]

Well, if you say it works, then I'm happy to close the ticket, otherwise I need a bit of time to get to this to check it myself.

[egoist]

I guess this would better be done on Rollup's side, like providing a method like this.addDependency(id) in webpack.

[egoist]

Related: rollup/rollup#1203

[bflatmajor]

So how to watch CSS files by @import now? @egoist

[anttikissa]

Here's a tentative PR that enables tracking imported files in watch mode, plus implements it for Stylus: #128

Personally I just wanted to get this done for Stylus so I didn't have time to dig deeper into the other loaders. But for a complete fix, all loaders should return a dependencies array if the loaded file imported other files. Glancing quickly at their documentation:

• sass-loader.js: node-sass seems to return something like includedFiles which might be exactly what is needed
• less-loader.js: similarly, less has output.imports
• postcss-loader.js: no idea how to do this since importing is done by PostCSS plugins such as postcss-import; but if you know PostCSS internals well, go ahead!

[sormy]

This is a very good lib to track dependencies for css-related files: https://github.com/es128/progeny
It could be probably used to extract dependencies for css, sass/scss, less, stylus, pug/jade, slm, and proto.