Less 3.8 (#14)

* package – update css-compile script to use --math --strict-math has been deprecated and replaced by --math. See less/less.js#3274 * maps – begin converting to DRs * each – use each() for loops (WIP) Still haven't updated for the grid breakpoints just yet, though some breakpoint loops have been written in anticipation of those updates. * breakpoints – fix breakpoint JS after converting to DR maps * each – replace all #each-* loop with each or #for-* There are 4 loops in mixins/_grid-framework.less that loop 'til a static number. I'm not aware of any answer for that at the moment, but a plugin could be easily written that could just leverage `each()`. * dev, meta – steal nice stuff from #12 Thanks @matthew-dean! * plugins – fix lint warnings/errors Except one in breakpoints.js: ``` 91:6 warning Variable 'nextBreakpoint' should be initialized on declaration ``` * _tables – fix .table-responsive output order See less/less.js#3340 * _navbar – fix .navbar-expand output order See less/less.js#3340 * README – update to match true min version required Co-Authored-By: calvinjuarez <[email protected]> * plugins/theme-color-level – more readable code Co-Authored-By: calvinjuarez <[email protected]> * README – replace the other, less easy ways of installing * _grid-framework – restore comment See #14 (comment) * README – wording edits Co-Authored-By: calvinjuarez <[email protected]> * _functions – restore commented Sass * README – more wording edits Co-Authored-By: calvinjuarez <[email protected]> * README – remove clone note per #14 (comment) * plugins/breakpoints – remove parseUnit(); fix nextBreakpoint ESLint issue See https://github.com/seanCodes/bootstrap-less-port/pull/14/files/94a03d156dde954caccf58130ebc8fa3adaf397e#r240023403 * rename plugin `keys` → `map-keys` Reverting the name change for now, until @calvinjuarez is able to pull in the plugin from NPM and alias it. (See [his comment](#14 (comment) sion_r241965904).) This change addresses [this PR review comment](#14 (comment) sion_r239916331). * _grid-framework – revert loop renaming Reduce the number of changes in the PR to avoid potential bugs. This change addresses [this PR review comment](#14 (comment)). * _transition – revert var renaming Match var names used in the Sass version of the mixin. This change addresses [this PR review comment](#14 (comment)). * breakpoints – put long comments on own line (instead of including at the end of a line) * restore color-function plugins Revert deletion of plugin files that add the `color()`, `gray()` and `theme-color()` functions. Even though Less’ new ruleset accessors could be used, we’re going to keep them for parity with the Sass version and for backwards compatibility. This change addresses [this PR review comment](#14). * restore usages of color functions Revert the conversion the `color()`, `gray()` and `theme-color()` functions to Less’ ruleset accessors. This change is primarily being made to keep the syntax as similar to the Sass version as possible, for easy reference/comparison. Note that keeping things similar to Sass may prove unnecessary in the future, so we may go back to accessors, but for now we’ll keep it like this. This change addresses [this PR review comment](#14). * change color functions to handle rulesets vs lists * fix bug in ruleset-to-map conversion Instead of pulling the `value` directly from each item in the ruleset, evaluate the item first to determine the true value of the item. This fixes the issue where the `value` is actually a var name and what we want is the the value of the var—not the var name itself.
seanCodes · Feb 26, 2019 · 8c4dcb2 · 8c4dcb2
1 parent bfdc6c0
commit 8c4dcb2
Show file tree

Hide file tree

Showing 33 changed files with 401 additions and 589 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ The code is currently aligned with [Bootstrap v4.1.3](https://github.com/twbs/bo
 
 ## Getting Started
 
-Options for installing Bootstrap Less in your project:
+Options for installing Bootstrap Less in your project (note that Less v3.8.1 or above is required):
 
 - Install with [npm](https://www.npmjs.com/): `npm install bootstrap-less-port`
 - Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap-less-port`
@@ -36,48 +36,34 @@ your-project/
              └─ ...
 ```
 
-In this case, you could then import what you need into `custom.less` using relative paths to the files in the `node_modules` folder:
+In this case, you could then import what you need into `custom.less` using module-relative paths:
 
 ```less
 // custom.less
 
 
 // Required Files
-@import "../../node_modules/bootstrap-less-port/less/_functions";
-@import "../../node_modules/bootstrap-less-port/less/_variables";
-@import "../../node_modules/bootstrap-less-port/less/_mixins";
+@import "bootstrap-less-port/less/_functions";
+@import "bootstrap-less-port/less/_variables";
+@import "bootstrap-less-port/less/_mixins";
 
 // Optional Files
-@import "../../node_modules/bootstrap-less-port/less/_reboot";
-@import "../../node_modules/bootstrap-less-port/less/_utilities";
-@import "../../node_modules/bootstrap-less-port/less/_type";
-@import "../../node_modules/bootstrap-less-port/less/_grid";
+@import "bootstrap-less-port/less/_reboot";
+@import "bootstrap-less-port/less/_utilities";
+@import "bootstrap-less-port/less/_type";
+@import "bootstrap-less-port/less/_grid";
 ...
 ```
 
 This approach is recommended since it will result in a smaller CSS file by omitting the styles you don’t need. (Just be aware that some files are dependent on others.)
 
-Alternatively, you can get the entire framework by importing the main `bootstrap.less` file:
+Alternatively, you can get the entire framework by simply importing the package as a whole. (Or, if not using a package manager, importing `bootstrap-less-port/less/bootstrap` instead.)
 
 ```less
 // custom.less
 
 
-@import "../../node_modules/bootstrap-less-port/less/bootstrap";
-```
-
-#### Usage with `less-plugin-npm-import`
-
-If you’re using `lessc` on the command line, you can use [`less-plugin-npm-import`](https://github.com/less/less-plugin-npm-import) to import the files in a much cooler and more maintainable way. Just install the plugin via npm and then reference the Bootstrap Less files using the plugin’s default `npm://` prefix:
-
-```less
-@import "npm://bootstrap-less-port/less/bootstrap";
-```
-
-Then simply include the `--npm-import` flag when compiling:
-
-```bash
-$ lessc --npm-import file.less file.css
+@import "bootstrap-less-port";
 ```
 
 
@@ -89,7 +75,7 @@ The recommended way of customizing Bootstrap is to modify the provided variables
 // custom.less
 
 
-@import "../../node_modules/bootstrap-less-port/less/bootstrap";
+@import "bootstrap-less-port";
 
 // Variable Overrides
 @body-bg: @black;
@@ -124,9 +110,7 @@ This port attempts to mirror the source Sass files as closely as possible in ord
 
    Note: The plugins are included using the [`@plugin`](http://lesscss.org/features/#plugin-atrules-feature) at-rule instead of as arguments to the `lessc` CLI. This was intentionally done since most Less GUI compilers don’t allow you to customize the command-line arguments.
 
-0. **Maps** Less has no _native_ concept of maps, which are used extensively in the Bootstrap Sass files. They can be emulated, however, by using a comma-separated list of space-separated lists, which is what is done in this port.
-
-0. **Loops** Sass `@for` and `@each` loops have been replaced with Less’s method of looping which requires unique, named mixins for every loop. This is a bit clunky and means that the loops used in this port are verbose and difficult to read, but it’s the best we’ve got until I can figure out how to overcome this with a plugin.
+0. **Loops** Where possible, Sass `@each` loops have been replaced with the Less `each()` function. Sass `@for` directives are trickier and have no direct Less analog (yet), so they are replaced with the old Less method of looping, which requires a unique, named mixin for every loop. This is a bit clunky, and means that in some places, loops are verbose and difficult to read, but it’s the best we’ve got until we figure out how to do this with a plugin (or Less adds a native equivalent).
 
    In order to make catching bugs easier, the Sass versions of most for/each loops have been kept in the code, commented, above the Less versions.
 

diff --git a/less/_alert.less b/less/_alert.less
@@ -49,13 +49,8 @@
 //    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
 //  }
 //}
-#each-theme-color-alert(@i) when (@i =< length(@theme-colors)) {
-	@item: extract(@theme-colors, @i);
-	@color: extract(@item, 1);
-
+each(@theme-colors, #(@value, @color) {
 	.alert-@{color} {
 		#alert-variant(theme-color-level(@color, @alert-bg-level), theme-color-level(@color, @alert-border-level), theme-color-level(@color, @alert-color-level));
 	}
-
-	#each-theme-color-alert((@i + 1));
-} #each-theme-color-alert(1);
+})
diff --git a/less/_badge.less b/less/_badge.less
@@ -45,14 +45,8 @@
 //    @include badge-variant($value);
 //  }
 //}
-#each-theme-color-badge(@i: 1) when (@i =< length(@theme-colors)) {
-	@item: extract(@theme-colors, @i);
-	@color: extract(@item, 1);
-	@value: extract(@item, 2);
-
+each(@theme-colors, #(@value, @color) {
 	.badge-@{color} {
 		#badge-variant(@value);
 	}
-
-	#each-theme-color-badge((@i + 1));
-} #each-theme-color-badge();
+})
diff --git a/less/_buttons.less b/less/_buttons.less
@@ -62,17 +62,11 @@ fieldset:disabled a.btn {
 //    @include button-variant($value, $value);
 //  }
 //}
-#each-theme-color-button(@i: 1) when (@i =< length(@theme-colors)) {
-	@item: extract(@theme-colors, @i);
-	@color: extract(@item, 1);
-	@value: extract(@item, 2);
-
+each(@theme-colors, #(@value, @color) {
 	.btn-@{color} {
 		#button-variant(@value, @value);
 	}
-
-	#each-theme-color-button((@i + 1));
-} #each-theme-color-button();
+})
 
 //@each $color, $value in $theme-colors {
 //  .btn-outline-#{$color} {
@@ -83,17 +77,11 @@ fieldset:disabled a.btn {
 //    }
 //  }
 //}
-#each-theme-color-button-outline(@i: 1) when (@i =< length(@theme-colors)) {
-	@item: extract(@theme-colors, @i);
-	@color: extract(@item, 1);
-	@value: extract(@item, 2);
-
+each(@theme-colors, #(@value, @color) {
 	.btn-outline-@{color} {
 		#button-outline-variant(@value);
 	}
-
-	#each-theme-color-button-outline((@i + 1));
-} #each-theme-color-button-outline();
+})
 
 
 //

diff --git a/less/_custom-forms.less b/less/_custom-forms.less
@@ -270,34 +270,14 @@
 
 	//@each $lang, $value in $custom-file-text {
 	//  &:lang(#{$lang}) ~ .custom-file-label::after {
-	//    content: @value;
+	//    content: $value;
 	//  }
 	//}
-	#each-language-file-input-label(@i: 1) when (@i =< length(@custom-file-text)) {
-		// LESS PORT: This gets really funky because a single key/value pair has to be handled
-		// differently than a list of key/values. This is because Less will see a single key/value as
-		// a space-separated list of two items instead of a comma-separated list of just a single
-		// item, so logic is added to handle both cases.
-		& when (length(extract(@custom-file-text, @i)) = 1) {
-			@lang: extract(@custom-file-text, 1);
-			@text: extract(@custom-file-text, 2);
-
-			&:lang(@{lang}) ~ .custom-file-label::after {
-				content: @text;
-			}
-		}
-		& when (length(extract(@custom-file-text, @i)) = 2) {
-			@item: extract(@custom-file-text, @i);
-			@lang: extract(@item, 1);
-			@text: extract(@item, 2);
-
-			&:lang(@{lang}) ~ .custom-file-label::after {
-				content: @text;
-			}
-
-			#each-language-file-input-label((@i + 1));
+	each(@custom-file-text, #(@value, @lang) {
+		&:lang(@{lang}) ~ .custom-file-label::after {
+			content: @value;
 		}
-	} #each-language-file-input-label();
+	});
 }
 
 .custom-file-label {

diff --git a/less/_functions.less b/less/_functions.less
@@ -3,7 +3,11 @@
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
 
 @plugin "plugins/index";
-@plugin "plugins/map-get";
+
+// LESS PORT: This plugin implements a function for returning a list of keys in a map, like Sass’
+// [`map-keys()`](http://sass-lang.com/documentation/Sass/Script/Functions.html#map_keys-instance_method)
+// function.
+@plugin "plugins/map-keys";
 
 // Ascending
 // Used to evaluate Sass maps like our grid breakpoints.

diff --git a/less/_grid.less b/less/_grid.less
@@ -41,6 +41,6 @@
 //
 // Common styles for small and large grid columns
 
-#output-columns() when (@enable-grid-classes) {
+& when (@enable-grid-classes) {
 	#make-grid-columns();
-} #output-columns();
+}
diff --git a/less/_list-group.less b/less/_list-group.less
@@ -110,13 +110,9 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
-//@each @color, @value in @theme-colors {
-//  #list-group-item-variant(@color, theme-color-level(@color, -9), theme-color-level(@color, 6));
+//@each $color, $value in $theme-colors {
+//  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
 //}
-#each-theme-color-list-group(@i: 1) when (@i =< length(@theme-colors)) {
-	@color: extract(extract(@theme-colors, @i), 1);
-
+each(@theme-colors, #(@value, @color) {
 	#list-group-item-variant(@color, theme-color-level(@color, -9), theme-color-level(@color, 6));
-
-	#each-theme-color-list-group((@i + 1));
-} #each-theme-color-list-group();
+});