Skip to content

Commit 6978579

Browse files
authored
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.
1 parent 32a1833 commit 6978579

33 files changed

+403
-588
lines changed

README.md

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ The code is currently aligned with [Bootstrap v4.1.3](https://github.com/twbs/bo
1111

1212
## Getting Started
1313

14-
Options for installing Bootstrap Less in your project:
14+
Options for installing Bootstrap Less in your project (note that Less v3.8.1 or above is required):
1515

1616
- Install with [npm](https://www.npmjs.com/): `npm install bootstrap-less-port`
1717
- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap-less-port`
@@ -36,48 +36,34 @@ your-project/
3636
└─ ...
3737
```
3838

39-
In this case, you could then import what you need into `custom.less` using relative paths to the files in the `node_modules` folder:
39+
In this case, you could then import what you need into `custom.less` using module-relative paths:
4040

4141
```less
4242
// custom.less
4343

4444

4545
// Required Files
46-
@import "../../node_modules/bootstrap-less-port/less/_functions";
47-
@import "../../node_modules/bootstrap-less-port/less/_variables";
48-
@import "../../node_modules/bootstrap-less-port/less/_mixins";
46+
@import "bootstrap-less-port/less/_functions";
47+
@import "bootstrap-less-port/less/_variables";
48+
@import "bootstrap-less-port/less/_mixins";
4949

5050
// Optional Files
51-
@import "../../node_modules/bootstrap-less-port/less/_reboot";
52-
@import "../../node_modules/bootstrap-less-port/less/_utilities";
53-
@import "../../node_modules/bootstrap-less-port/less/_type";
54-
@import "../../node_modules/bootstrap-less-port/less/_grid";
51+
@import "bootstrap-less-port/less/_reboot";
52+
@import "bootstrap-less-port/less/_utilities";
53+
@import "bootstrap-less-port/less/_type";
54+
@import "bootstrap-less-port/less/_grid";
5555
...
5656
```
5757

5858
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.)
5959

60-
Alternatively, you can get the entire framework by importing the main `bootstrap.less` file:
60+
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.)
6161

6262
```less
6363
// custom.less
6464

6565

66-
@import "../../node_modules/bootstrap-less-port/less/bootstrap";
67-
```
68-
69-
#### Usage with `less-plugin-npm-import`
70-
71-
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:
72-
73-
```less
74-
@import "npm://bootstrap-less-port/less/bootstrap";
75-
```
76-
77-
Then simply include the `--npm-import` flag when compiling:
78-
79-
```bash
80-
$ lessc --npm-import file.less file.css
66+
@import "bootstrap-less-port";
8167
```
8268

8369

@@ -89,7 +75,7 @@ The recommended way of customizing Bootstrap is to modify the provided variables
8975
// custom.less
9076

9177

92-
@import "../../node_modules/bootstrap-less-port/less/bootstrap";
78+
@import "bootstrap-less-port";
9379

9480
// Variable Overrides
9581
@body-bg: @black;
@@ -124,9 +110,7 @@ This port attempts to mirror the source Sass files as closely as possible in ord
124110

125111
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.
126112

127-
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.
128-
129-
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.
113+
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).
130114

131115
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.
132116

less/_alert.less

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,8 @@
4949
// @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
5050
// }
5151
//}
52-
#each-theme-color-alert(@i) when (@i =< length(@theme-colors)) {
53-
@item: extract(@theme-colors, @i);
54-
@color: extract(@item, 1);
55-
52+
each(@theme-colors, #(@value, @color) {
5653
.alert-@{color} {
5754
#alert-variant(theme-color-level(@color, @alert-bg-level), theme-color-level(@color, @alert-border-level), theme-color-level(@color, @alert-color-level));
5855
}
59-
60-
#each-theme-color-alert((@i + 1));
61-
} #each-theme-color-alert(1);
56+
})

less/_badge.less

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,8 @@
4545
// @include badge-variant($value);
4646
// }
4747
//}
48-
#each-theme-color-badge(@i: 1) when (@i =< length(@theme-colors)) {
49-
@item: extract(@theme-colors, @i);
50-
@color: extract(@item, 1);
51-
@value: extract(@item, 2);
52-
48+
each(@theme-colors, #(@value, @color) {
5349
.badge-@{color} {
5450
#badge-variant(@value);
5551
}
56-
57-
#each-theme-color-badge((@i + 1));
58-
} #each-theme-color-badge();
52+
})

less/_buttons.less

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -62,17 +62,11 @@ fieldset:disabled a.btn {
6262
// @include button-variant($value, $value);
6363
// }
6464
//}
65-
#each-theme-color-button(@i: 1) when (@i =< length(@theme-colors)) {
66-
@item: extract(@theme-colors, @i);
67-
@color: extract(@item, 1);
68-
@value: extract(@item, 2);
69-
65+
each(@theme-colors, #(@value, @color) {
7066
.btn-@{color} {
7167
#button-variant(@value, @value);
7268
}
73-
74-
#each-theme-color-button((@i + 1));
75-
} #each-theme-color-button();
69+
})
7670

7771
//@each $color, $value in $theme-colors {
7872
// .btn-outline-#{$color} {
@@ -83,17 +77,11 @@ fieldset:disabled a.btn {
8377
// }
8478
// }
8579
//}
86-
#each-theme-color-button-outline(@i: 1) when (@i =< length(@theme-colors)) {
87-
@item: extract(@theme-colors, @i);
88-
@color: extract(@item, 1);
89-
@value: extract(@item, 2);
90-
80+
each(@theme-colors, #(@value, @color) {
9181
.btn-outline-@{color} {
9282
#button-outline-variant(@value);
9383
}
94-
95-
#each-theme-color-button-outline((@i + 1));
96-
} #each-theme-color-button-outline();
84+
})
9785

9886

9987
//

less/_custom-forms.less

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -270,34 +270,14 @@
270270

271271
//@each $lang, $value in $custom-file-text {
272272
// &:lang(#{$lang}) ~ .custom-file-label::after {
273-
// content: @value;
273+
// content: $value;
274274
// }
275275
//}
276-
#each-language-file-input-label(@i: 1) when (@i =< length(@custom-file-text)) {
277-
// LESS PORT: This gets really funky because a single key/value pair has to be handled
278-
// differently than a list of key/values. This is because Less will see a single key/value as
279-
// a space-separated list of two items instead of a comma-separated list of just a single
280-
// item, so logic is added to handle both cases.
281-
& when (length(extract(@custom-file-text, @i)) = 1) {
282-
@lang: extract(@custom-file-text, 1);
283-
@text: extract(@custom-file-text, 2);
284-
285-
&:lang(@{lang}) ~ .custom-file-label::after {
286-
content: @text;
287-
}
288-
}
289-
& when (length(extract(@custom-file-text, @i)) = 2) {
290-
@item: extract(@custom-file-text, @i);
291-
@lang: extract(@item, 1);
292-
@text: extract(@item, 2);
293-
294-
&:lang(@{lang}) ~ .custom-file-label::after {
295-
content: @text;
296-
}
297-
298-
#each-language-file-input-label((@i + 1));
276+
each(@custom-file-text, #(@value, @lang) {
277+
&:lang(@{lang}) ~ .custom-file-label::after {
278+
content: @value;
299279
}
300-
} #each-language-file-input-label();
280+
});
301281
}
302282

303283
.custom-file-label {

less/_functions.less

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
44

55
@plugin "plugins/index";
6-
@plugin "plugins/map-get";
6+
7+
// LESS PORT: This plugin implements a function for returning a list of keys in a map, like Sass’
8+
// [`map-keys()`](http://sass-lang.com/documentation/Sass/Script/Functions.html#map_keys-instance_method)
9+
// function.
10+
@plugin "plugins/map-keys";
711

812
// Ascending
913
// Used to evaluate Sass maps like our grid breakpoints.

less/_grid.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,6 @@
4141
//
4242
// Common styles for small and large grid columns
4343

44-
#output-columns() when (@enable-grid-classes) {
44+
& when (@enable-grid-classes) {
4545
#make-grid-columns();
46-
} #output-columns();
46+
}

less/_list-group.less

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -110,13 +110,9 @@
110110
// Add modifier classes to change text and background color on individual items.
111111
// Organizationally, this must come after the `:hover` states.
112112

113-
//@each @color, @value in @theme-colors {
114-
// #list-group-item-variant(@color, theme-color-level(@color, -9), theme-color-level(@color, 6));
113+
//@each $color, $value in $theme-colors {
114+
// @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
115115
//}
116-
#each-theme-color-list-group(@i: 1) when (@i =< length(@theme-colors)) {
117-
@color: extract(extract(@theme-colors, @i), 1);
118-
116+
each(@theme-colors, #(@value, @color) {
119117
#list-group-item-variant(@color, theme-color-level(@color, -9), theme-color-level(@color, 6));
120-
121-
#each-theme-color-list-group((@i + 1));
122-
} #each-theme-color-list-group();
118+
});

0 commit comments

Comments
 (0)