meteor-css-modules

meteor-css-modules copied to clipboard

TL;DR Are dynamic imports supported in CSS Modules?

I was playing around with the new Meteor version 1.6.1, trying to dynamically import stuff from an Atmosphere package.

So, I have a test.html, test.js and test.m.css in the Atmosphere-package, which are not included in the package.json nor exported, they are just... sitting in the package.

When I dynamically import the test.js (which again imports test.html and test.m.css) and check the fetch response, expecting to see the CSS styles shipped together with the JS and Template code, the response contains this snippet instead: "These styles have already been applied to the document".

From what I understand, this means that the test.m.css was eagerly parsed, processed, minified and shipped to the client - before the dynamic import happened.

Should dynamic importing of CSS Modules -processed CSS even be possible?

Yes, dynamic importing should be possible! It looks like you've uncovered a bug - the current lazy load check tests if the file is in an imports or node_modules directory. I need to update it to work with packages, and also with the new lazy load everywhere option Meteor 1.6.2. https://github.com/nathantreid/meteor-css-modules/blob/37f1550424979e29dfb42dce14bf43f9f6cd9da2/css-modules-build-plugin.js#L200

Thanks for bringing this up!

Good to know, thanks! Let me know if you need help in testing, I've got a complex beast of a package that will greatly benefit from this feature.

I've been refactoring some stuff to use CSS-Modules with dynamic imports even though it's not quite there yet when it comes to packages. Now I also noticed this:

If I dynamically import a CSS-file that uses composes, the composed class is found in the styles json (like i__imported_button_1) but the actual corresponding CSS is missing. There's no styles with definition .i__imported_button_1 anywhere to be found.