Has anyone successfully installed the React MDL implementation Essence into a 1.3.* application? I was attempting to integrate it by having it be an NPM dependency but keep running into issues because it has relative imports for its less files (which throw errors in the client of the form "Cannot find module ./block.less). After trolling the meteor issues on Github it seems that the only way to do something like this would be to wrap the NPM module in a local package? Other options I am going to try are copying the distribution into my application as a first class citizen as well as maybe integrating webpack and bypassing the meteor build system (another solution which seems distasteful but would have the added benefit of potentially quicker build times as I have seen the initial build times in 1.3.* to be comparatively high to previous versions)
Are you on Meteor@1.3.2? Prior versions don’t support CSS/LESS/SASS modules, as I understand.
Thanks for bringing up Essence, btw. Almost a complete replacement for Bootstrap. Best React framework I’ve seen yet. I’d be really curious to see a Essence+Chromatic mashup.
Also, you may want to take a look a Chromatic. It is very complementary to Essence, and may have all the relevant code samples for getting Essence working.
I took a look at Chromatic but am not entirely clear on what the goal is since I don’t see an attached demo nor is the documentation all that helpful.
I am using the latest Meter so there are support for those modules however It seems that Essence.io is built using css modules (with less) which does not appear to work. That is why Nathan created this package: https://github.com/nathantreid/meteor-css-modules/
I found it to work quite well for integrating modules that use css or scss (as was required for react toolbox) but less is a different story.
I looked into the webpack implementation but decided not to go that route for the moment (although if the build times continue to be this poor I might end up giving it a go). Copying the module into my imports folder and using the less package does in fact work.
Chromatic is a sandbox environment for building components. If you download it and run it, you’ll find a tool for building and contributing components to the Essance library.
It seems to be using less module imports, like on this line:
So the problem is not importing the less code. Its actually that the package itself does not compile within Meteor because it uses CSS Modules (which is where the css - or in this instance less - files are all scoped locally to the file they are used in). If the package only contained less/css/sass code that I wanted to import, no problem. However it contains the javascript components which use the locally scoped style sheets. This import issue can be solved by either using webpack (Essence was built to be compatible with webpack) or by using the meteor css modules plugin (however that does not currently have support for less). When I have time, I may look into adding less support to that plugin.
Apologies if I’m going off topic, but any short comments on how Essence differs from react-toolbox? There’s material-ui too, which is a lot more “complete”, but it had bad performance related to the use of inline styles. react-toolbox also uses CSS modules and that’s what I’m using presently (yeah, via nathantreid’s css-modules build plugin).
I certainly like react-toolbox and was originally going to go with that implementation. I realized, however, that it was missing some of the responsive components that I needed for my project (which needs to be optimized for mobile) – like a grid for instance and there is also an open issue talking about how the sass breakpoints were added but they were never implemented. Essence, in my opinion, is a more complete implementation of material design which includes almost all material design components. Essence is also available as individual components so you can install only those that you want. One other difference is that Essence uses less in its Css Modules implementation while React-Toolbox uses sass. (If that was the only difference I would have picked react-toolbox). Finally, I noticed that the maintainers of react-toolbox are quite busy now so I didn’t think waiting around for the responsive components to be a risk I could take. They also are of the opinion the grid should not be part of the framework at all. Which is fair, but I don’t want to have the overhead of integrating a separate grid and styling it to match.
Side note, I did take a stab at adding less support to nathantreid’s css-modules build plugin last night but didn’t quite get it working yet. When I have some more time I will revisit that. I am also toying with shipping the less support as a separate build plugin. Not sure if it makes sense to bundle support for all CSS preprocessors into one plugin.
Thanks, @alexckramer! That’s exactly the kind of answer I was looking for.
If you go the separate build plugin route, let me know if you need any help to get hot reloading working with it (see e.g. meteor-hmr/Build_Plugins and nathantreid/meteor-css/modules#26).
I’m not that familiar with CSS Modules, but in a quick perusal of the Essense templates code I could not find where CSS Modules was being used. Essence is definitely using Webpack CSS Loader, but I did not see where css-loader?modules was being passed.
Like I said, new to this, but if this is in fact the case (maybe I’m wrong) then in theory we should be able to use Essence with standard Meteor 1.3.2.4 build tool. Maybe, just guessing, the issue is that the Meteor build tool with the Less pre-processor does not fully parse all levels of /node_modules/essence_md/* or something.
Could one then not @import the file directly using Meteor’s Less package from you app main.less such as @import '{}/node_modules/essence_md/components/essence-button/src/button.less'; or whatever the path is?
Anyway, just a thought and probably need to test this unless you already have done so. Thanks.
As a follow up, maybe Meteor’s Less pre-processor package could be extended to more deeply process files within node_modules, if my assumption is correct.
Another alternative may be to use NPM’s Less to first process all the .less files and create a .css file that then is processed using Meteor’s build tool similar to this example building Bootstrap 4’s Sass.