Prevent less-css and less-middleware from modifying calc() attribute equations

So lets say you want to include a random third-party library into your web application such as Angular Material. This third-party library uses SCSS or SASS, but you are using LESS, so you do the only sensible thing, and import this library's CSS file into your LESS file so that you can use the library's classes as a base for future modification and inheritance by doing something like this:

@import (less) "../js/lib/angular/angular-material.min.css";

Which seems to work fine except for a few cases where some elements aren't aligned where you expect them to be (eg: the carets aren't all the way to the right side of your select fields). Upon deeper inspection you see that LESS is overwriting your multi-unit calc() calls. Now what originally was:

max-width: calc(100% - 2*8px);

appears as:

max-width: calc(84%);

and you're rightfully pissed off about it. Some guy on tells you to use escaped strings, but this is a third party library, and you don't want to go off tinkering with it in case you decide to upgrade it later. So what do you do?

The solution is pretty simple. Just pass the option  strictMath: true  to LESS and it will leave your equations alone. To me, this option is counter intuitive, and I would expect setting strictMath to 'false' would prevent LESS from diddling with my equations, but the reverse is true.

"But I'm using the less-middleware library in my node application, and I can't figure out how to pass arbitrary LESS options to it." 

As of version 2.0.0, less-middleware accepts a 'render' option, which takes a plain object as a list of lower-level LESS options. The option is called 'render' because this object is passed directly to the less.render() function within the middleware. I find the naming choice here a bit confusing, and it doesn't make sense to anyone who is just reading the documentation and hasn't opened up the less-middleware source code yet. Anyways, here it is in action:

var lessMiddleware = require('less-middleware');
var lessPath = path.join(__dirname, '/public')
app.use(lessMiddleware(lessPath, { render: { strictMath: true }}));

That wasn't so hard, was it? Well screw yourself, because I spent over an hour figuring this out. Hopefully this post will stop that from happening to anyone else.

1 comment:

  1. Thanks for sharing excellent information. Your web-site is so cool. I’m impressed by the details that you have on this web site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for more articles.Refer custom essay writing service