Add dependecy message for JS mixins

[ai]

So webpack will watch for files

[sandrina-p]

yes please!

[ai]

Done 8845bc3

[sandrina-p]

@ai Well, I’m trying it and it isn’t working, at least with me. I only updated postcss-mixins to 6.1.0. Do I need to do anything else? Here's the repo where I'm testing it

[ai]

@sandrina-p thanks for testing repo. This method will work only if you for mixinsDir option https://github.com/postcss/postcss-mixins#mixinsdir

In this case you need to split mixins into:

src/
  mixins/
    socialIcon.js
    socialIconClass.js
    socialIconList.js

and change postcss.config.js to:

-const mixins = require('../src/mixins/');
+const path = require('path')

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-mixins')({
-           mixins: mixins,
+           mixinsDir: path.join(__dirname, '../src/mixins'),
        }),
        require('postcss-nested'),
        require('postcss-cssnext')({
            features: { rem: false },
        }),
    ]
};

[ai]

Unfortunately, I don’t know easy way to reload simple require() in postcss.config.js. Technically this config is part of webpack config, so we need some tricky techniques to update it on file changes.

[sandrina-p]

Thanks, i'll test it out and update you after

[sandrina-p]

Awesome, it's rocking now! 🔥

It's even better having each mixin in a different file, it's easier to mantain. You can check it here

Thank you!

[sandrina-p]

@ai I don't know how, but the mixin hot reload stopped to work. Maybe it was some update on PostCSS or Webpack that broke this ... Can you check it? You can play with the same repository.

[ai]

@michael-ciniawsky can you help with mixins hot reload, please?

[ai]

Maybe this PR is related? #78

[ai]

@sandrina-p try postcss-mixins 6.1.1

[michael-ciniawsky]

@sandrina-p

how-can-js-improve-your-css-mixins/config/webpack.config.js

// ?
- const postcssConfig = './config//* ? => postcss <= *//postcss.config.js';
+ const postcssConfig = './config/postcss.config.js';

Do you get valid (transformed) CSS at all atm?

Just to clarify, by hot reload you mean a page reload after changes to a mixin file ? 🙃 'Real' HMR isn't enabled in your config

Could you please add this line to postcss-loader in node_modules?

node_modules/postcss-loader/index.js (L148)

result.messages.forEach((msg) => {
+  console.log(msg)
   if (msg.type === 'dependency') this.addDependency(msg.file)
})

And post the locks here ? I will try to debug it myself when I have a few minutes 😛

[michael-ciniawsky]

@ai #78 Should be fine, postcss-loader looks for dependency.file only as the parent/child relation isn't needed there 😛

[sandrina-p]

@michael-ciniawsky yes, the configs always worked as I have it, even postcssConfig path.

This is what I get from console.log(msg):

webpack: wait until bundle finished: /__webpack_hmr
{ type: 'dependency',
  file: '/Users/sandrina.pereira/Documents/css-logic-on-js/src/mixins/size.js',
  parent: '' }
{ type: 'dependency',
  file: '/Users/sandrina.pereira/Documents/css-logic-on-js/src/mixins/socialIcon.js',
  parent: '' }
{ type: 'dependency',
  file: '/Users/sandrina.pereira/Documents/css-logic-on-js/src/mixins/socialIconClass.js',
  parent: '' }
{ type: 'dependency',
  file: '/Users/sandrina.pereira/Documents/css-logic-on-js/src/mixins/socialIconList.js',
  parent: '' }
{ type: 'dependency',
  file: '/Users/sandrina.pereira/Documents/css-logic-on-js/src/mixins/sprite.js',
  parent: '' }
{ type: 'dependency',
  file: '/Users/sandrina.pereira/Documents/css-logic-on-js/src/mixins/size.js',
  parent: '' }
{ type: 'dependency',
  file: '/Users/sandrina.pereira/Documents/css-logic-on-js/src/mixins/socialIcon.js',
  parent: '' }
{ type: 'dependency',
  file: '/Users/sandrina.pereira/Documents/css-logic-on-js/src/mixins/socialIconClass.js',
  parent: '' }
{ type: 'dependency',
  file: '/Users/sandrina.pereira/Documents/css-logic-on-js/src/mixins/socialIconList.js',
  parent: '' }
{ type: 'dependency',
  file: '/Users/sandrina.pereira/Documents/css-logic-on-js/src/mixins/sprite.js',
  parent: '' }
Hash: 21373dc57e0d8d4a5c60
Version: webpack 3.4.1
Time: 6320ms

@ai I updated to postcss-mixins@6.1.1 but HR still doesn't happen... What else am I missing?