Dotless failing to compile ; in Bootstrap 3 less source - twitter-bootstrap-3

I use dotless 1.3.1.0 compiling less-files. This worked fine with bootstrap 2.x, but after switching to bootstrap 3.0.0 (downloaded the source from here: http://getbootstrap.com/getting-started/), I suddenly get this error:
Expected ')' but found ' ' on line 47 in file 'mixins.less': [46]: //
Sizing shortcuts [47]: .size(#width; #height) {
------------^ [48]: width: #width;
Seems that having a ; as seperator between parameters is not valid less. The original source in the mixins.less looks like this:
...
// Sizing shortcuts
.size(#width; #height) {
width: #width;
height: #height;
}
...
Do I have to use an updated less compiler? Or did bootstrap release buggy less source?
UPDATE 1: I can see, that a pull request for dotless exists, fixing the problem with ;
https://github.com/dotless/dotless/pulls
"Fixes for ; not supported in mixin parameter lists #319 #320"
I will go using the css files until this has been fixed in dotless.

If you check out bootstrap's getting started page, you'll find that they state:
LESS compilation
If you download the original files, you need to compile Bootstrap's
LESS files into usable CSS. To do that, Bootstrap only officially
supports Recess, Twitter's CSS hinter built on top of less.js.
Though not using dotless, I followed a similar path that you did using lessc, and then found that using recess resolved my issue. Perhaps using recess would be an option for you too?
As an example, I have a file called tmpfl.less with the following contents:
#import "mixins.less";
#import "variables.less";
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
If I run lessc on it, I get the following result:
lessc tmpfl.less
NameError: .size is undefined in mixins.less:47:0
46 // Sizing shortcuts
47 .size(#width; #height) {
48 width: #width;
Now, I successfully use recess as follows:
recess --compile tmpfl.less > tmpfl.css
Update:
In order to utilize Recess in a .Net environment, specifically in Visual Studio, one can follow these instructions for details on installing. Those instructions provide an overview, but perhaps leave out some details on getting Node.js installed. Microsoft has some brief words about it and they link to a GitHub project which might be helpful depending on your version of Visual Studio.
If you don't go down the Node.js-in-Visual Studio route, then really the main goal is to have Node.js installed somewhere, and then ultimately npm, the package manager for Node.js so you can install Recess. That can be achieved on Windows by going to the Node.js download, and installing the Windows version. Installing npm is highlighted in this stackoverflow discussion. Once installed, you just need to run npm to install Recess as follows:
npm install recess -g
That is also discussed in the first link of this update.

One of my colleagues that uses dotless has had a few fixes for Bootstrap 3 issues merged. Apparently Bootstrap3 will now compile with the latest code :)
https://github.com/dotless/dotless/commits/master
I expect an updated NuGet package will be available soon (based on this tweet)

After spending hours on getting this to work myself i found that dotless is quite useless at this time.
but here is where you can impliment Less and Bootstrap 3 Less in your mvc ASP.Net Project
http://www.tomdupont.net/2013/10/bootstrap-3-less-bundling-and-aspnet-mvc.html?showComment=1386250367416#c1439130135847828203
This guy just won an internets in my book and if you can track down his stack exchange account for me let me know.

I have put together an httphandler which will compile less using lessjs.
It's more of a proof of concept than production quality code, however it may be useful for some people as a starting point.
You can find the source here:
https://bitbucket.org/martinbooth/clearscriptless
In case anyone is interested in trying to do this using jurassic, you can find my attempt here:
https://bitbucket.org/martinbooth/jurassicless
I don't recommend Jurassic for this because
it required a few bug fixes to the library which are not currently
integrated into the main project My changes are now in the master branch of Jurassic so this is no longer an issue (though the latest release does not currently include them)
it is very slow, hence the
reason I tried clearscript

Related

Directive AbstractStoreItemComponent in spartacus-storefront.d.ts has no selector, please add it

I am trying to integrate the new Spartacus UI in my Testing application (a classical mystore application built according to the recommendations bound to Spartacus).
Having built my "mystore" application, which I have tested, and works quite well based on electronic-store-spa... I have added the 7 tgz files in a row "lib" directory // to "mystore".
Then I have done my yarn add
yarn add ...
All seems to go well but it is getting worse when I do the Yarn start (last milestone of the checklist).
I get the following error :
"ERROR in Directive AbstractStoreItemComponent in /Users/muller/work/VariantKonfigurator/spartacus4VC/js-storefront/mystore/node_modules/#spartacus/storefront/spartacus-storefront.d.ts has no selector, please add it"
Looking in Spartacus-storefront.ts at the same level, I can see that there is a type: Directive
How can I overcome this error?
Thank you.

Laravel Mix: Wrong css properties when running npm production

Environment
Laravel Mix Version: laravel-mix#2.1.0
Node Version: v8.2.1
NPM Version: 6.10.0
OS: Linux (Ubuntu 18.04)
Description:
I'm trying to identify which CSS process is the culprit of some wrong CSS being applied with npm run production but I'm not being able to do it. Some Bootstrap 4 CSS properties are being translated/simplified and it's producing wrong styles. I tried a lot of solutions (in my local webpack.mix.js => mix.options). I've tried to disable purifyCss (I discovered it's not using it), uglify, force outputStyle to 'expanded' (in .sass() method), etc. None of them worked.
As a workaround, I could add a new "prod" ENV and perform minification and other things directly from my webpack.mix.js, but I don't like this solution, specially when I think it's just because of a setting/flag somewhere I could easily change (if I knew which one).
Thank you.
Steps To Reproduce:
npm run dev: background-position: center right calc(0.375em + 0.1875rem)
npm run production: background-position: 100% calc(.375em + .1875rem)
Well, it looks like it was a bug in a mixin:
https://github.com/twbs/bootstrap/commit/de1a6e3201a2f047c5abd2430795be32d37e9a35#diff-4fcf7dc3cf66b28cb08274cc30798d70
https://github.com/cssnano/cssnano/issues/712
Updating to latest Bootstrap version solves the issue.

image-height not resolve output

Trying to achieve this proposal to make a div size based on its background image I'm using Less 2.5.1 compiled by Web Essentials 2013 for Update 4 version 2.5.4 and some functions do not resolve:
My Less File:
.myClass{
height:image-height("myUrl.png"); //<-- Do not resolve
width:percentage(1/2); //<--Resolves
}
Resolved Css File:
.myClass{
height:image-height("myUrl.png"); //Not good
width:50%; //Good
}
I'm having this problem with image-height, image-width and image-size. Not with the rest of Misc Functions
There's no problem resolving the image by the compiler, because it's working fine when I used it like:
background-image:url("myUrl.png");
In the documentation there's a note for these methods saying:
Note: this function needs to be implemented by each environment. It is
currently only available in the node environment.
In the WebEssentials documentation it says:
Web Essentials uses the node-less compiler and it always uses the
latest version
And
NodeJS compilation - Web Essentials uses NodeJS to run the compiler.
It's the fastest and most accurate compiler for LESS available.
I'm missing something that I don't know. What does that note mean? What
should I do?
I've create a jsfiddle to share with you my goal.

angular bootstrap older versions removed from npmjs?

We had been using version 0.11.0 of angular-bootstrap from npmjs. It appears that version is no longer available on npmjs. From the commands below does this mean that someone actually unpublished the older packages?
prompt:~$ npm view angular-bootstrap time
{ modified: '2015-01-12T06:48:54.881Z',
created: '2014-01-29T21:54:32.213Z',
'0.0.1': '2014-01-29T21:54:37.589Z',
'0.0.2': '2014-01-29T22:03:08.814Z',
'0.0.3': '2014-01-29T22:51:49.998Z',
'0.0.4': '2014-02-11T15:14:17.078Z',
'0.11.0': '2014-06-24T07:06:56.435Z',
'0.13.0-SNAPSHOT': '2014-12-02T13:05:43.151Z',
'0.12.0': '2015-01-12T06:46:41.986Z' }
prompt:~$ npm view angular-bootstrap versions
0.12.0
I agree, the package seems to have been unpublished. You can still access it from the github history, as follows:
$ npm install "angular-ui/bootstrap#0.11.0"
(note that you may not need quoting, but some shells will interpret the # as a comment-begin character.) You can also use this syntax in dependencies inside package.json
If you have a project in production that depends on this, you should probably make a fork of the angular-ui/bootstrap repository and point towards that.
(I had some difficulty making this work on Windows, but it looks like you're on a Unixy system, so you should be fine.)
Ticket discussing this and the future is at https://github.com/angular-ui/bootstrap/issues/1636

Library not loaded - ogr2ogr - topojson (Mike Bostock's d3.js map tutorial)

I'm trying to use ogr2ogr to filter a shapefile. I'm working through Mike Bostock's Let's Make a Map tutorial. A bit of googling - including here - hasn't led to any solutions yet. I'm also VERY new to topojson (and shapefiles in general; my background is in economics/statistical software like Stata), so I'm not sure what I'm doing and where things are going wrong. Either way - here's the error result I'm getting:
dyld: Library not loaded: /usr/local/lib/liblwgeom-2.1.1.dylib
Referenced from: /usr/local/Cellar/libspatialite/4.1.1/lib/libspatialite.5.dylib
Reason: image not found
Trace/BPT trap: 5
No idea what liblwgeom-2.1.1.dylib is, what it does, where I get it, etc. Google hasn't helped much on defining it either.
FWIW, I'm on a Mac, I brew installed npm and gdal, and then npm installed topojson.
Thanks,
a
Edited to add: I just brew reinstalled gdal, because I remembered getting a warning (Caveats). See below:
==> Caveats
For non-homebrew python (2.x), you need to amend your PYTHONPATH like so:
export PYTHONPATH=/usr/local/lib/python2.7/site-packages:$PYTHONPATH
This version of GDAL was built with Python support. In addition to providing
modules that makes GDAL functions available to Python scripts, the Python
binding provides additional command line tools.
I actually tried to run export PYTHONPATH=/usr/local/lib/python2.7/site-packages:$PYTHONPATH literally as-is, and it returned nothing. (Not sure if something happened in the background?) Basically fumbling in the dark!