Merge pull request #10779 from ssorallen/customizer-bootstrap-less-order

Use bootstrap.less file order in Customizer

docs-assets/js/customizer.js

@@ -159,10 +159,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 = {}
@@ -173,15 +195,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