Use bootstrap.less file order in Customizer

Appending stylesheets by iterating the `__less` Hash creates an order
that is not the same as 'bootstrap.less'.

Some stylesheets like 'component-animations.less' and 'modals.less' have
selectors with matching specificity, and so file order decides which
style wins. This causes issue #10030 by putting `.fade.in` after
`.modal-backdrop.in` and gives the backdrop a higher opacity than
intended.

This change uses the Less ordering in 'bootstrap.less' to generate the
final stylesheets in the Customizer to make sure customized file
ordering matches the distribution file order.

Fixes #10030

1 files changed, 37 insertions, 11 deletions

diff --git a/docs-assets/js/customizer.js b/docs-assets/js/customizer.js
index 5abfe4228..08c8bfb60 100644
--- a/docs-assets/js/customizer.js
+++ b/docs-assets/js/customizer.js
@@ -155,10 +155,32 @@ window.onload = function () { // wait for load in a dumb way because B-0
     }
   }
 
+  // Returns an Array of @import'd filenames from 'bootstrap.less' in the order
+  // in which they appear in the file.
+  function bootstrapLessFilenames() {
+    var IMPORT_REGEX = /^@import \"(.*?)\";$/
+    var bootstrapLessLines = __less['bootstrap.less'].split('\n')
+
+    for (var i = 0, imports = []; i < bootstrapLessLines.length; i++) {
+      var match = IMPORT_REGEX.exec(bootstrapLessLines[i])
+      if (match) imports.push(match[1])
+    }
+
+    return imports
+  }
+
   function generateCSS() {
-    var $checked = $('#less-section input:checked')
+    var oneChecked = false
+    var lessFileIncludes = {}
+    $('#less-section input').each(function() {
+      var $this = $(this)
+      var checked = $this.is(':checked')
+      lessFileIncludes[$this.val()] = checked
+
+      oneChecked = oneChecked || checked
+    })
 
-    if (!$checked.length) return false
+    if (!oneChecked) return false
 
     var result = {}
     var vars = {}
@@ -169,15 +191,19 @@ window.onload = function () { // wait for load in a dumb way because B-0
           $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
         })
 
-    css += __less['variables.less']
-    if (vars) css += generateCustomCSS(vars)
-    css += __less['mixins.less']
-    css += __less['normalize.less']
-    css += __less['scaffolding.less']
-    css += $checked
-      .map(function () { return __less[this.value] })
-      .toArray()
-      .join('\n')
+    $.each(bootstrapLessFilenames(), function(index, filename) {
+      var fileInclude = lessFileIncludes[filename]
+
+      // Files not explicitly unchecked are compiled into the final stylesheet.
+      // Core stylesheets like 'normalize.less' are not included in the form
+      // since disabling them would wreck everything, and so their 'fileInclude'
+      // will be 'undefined'.
+      if (fileInclude || (fileInclude == null)) css += __less[filename]
+
+      // Custom variables are added after Bootstrap variables so the custom
+      // ones take precedence.
+      if (('variables.less' === filename) && vars) css += generateCustomCSS(vars)
+    })
 
     css = css.replace(/@import[^\n]*/gi, '') //strip any imports