imported files are not watched when using rollup-watch

[meszaros-lajos-gyorgy]

I looked the following issue: pirxpilot/postcss-cli#33

And none of the options mentioned here are usable with rollup-plugin-postcss-export.

One possible solution

rollup-plugin-postcss-export should provide an optional watch parameter, which would then make the plugin use the postcss-watch instead of postcss.

[lmihaidaniel]

I don't follow. This is a plugin for rollup. The watch behavior should be handled by rollup as it is the one who passes the imported files to postcss.

Can you elaborate on this is issue ?

[meszaros-lajos-gyorgy]

I have created a little test code for you, where you can see the issue (github didn't allow me to attach them in a zip file):

package.json

{
  "name": "watch-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c",
    "build:watch": "npm run build -- --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "less": "^2.7.2",
    "postcss-less-engine": "^0.6.2",
    "rollup": "^0.43.0",
    "rollup-plugin-postcss-export": "^1.0.3",
    "rollup-watch": "^4.0.0"
  }
}

rollup.config.js

import postcss from 'rollup-plugin-postcss-export'
import less from 'postcss-less-engine'

export default [{
  entry: 'src/index.less',
  dest: 'dist/dummy',
  plugins: [
    postcss({
      extensions: ['.less'],
      extract: './dist/test.css',
      plugins: [
        less()
      ],
      parser: less.parser
    })
  ]
}]

src/index.less

@import 'foo.less';
@import 'bar.less';

body{
  color: red;
}

src/foo.less

body{
  background: rgba(255, 255, 0, .5);
}

src/bar.less

body{
  font-size: 40px;
}

[meszaros-lajos-gyorgy]

Run npm run build for a single build. Run npm run watch for the watcher to be triggered.

The issue: try running the watch script, then edit index.less. The build will refresh as expected. Then try editing the other files, which were imported. Notice how nothing will happen.

Apparently the importing is not done by rollup, probably because I'm working with less files or because I'm not using the js import syntax. However postcss would be able to handle the watching for imported files, but it would need to use the postcss-watch module instead of the normal postcss, or some other method.

( Note: the same is happening when I replace rollup-plugin-postcss-export with your recommended rollup-plugin-postcss )

[lmihaidaniel]

I will move this issue to rollup-plugin-postcss-export.

[meszaros-lajos-gyorgy]

I also found this closed issue on rollup-watch, might give some answers on why watch is not being triggered on rollup side: rollup/rollup-watch#23