Warn about .pull-right or .pull-left within a navbar

Closes twbs#188
zacechola · Nov 15, 2014 · ca920c0 · ca920c0
1 parent 6bbb189
commit ca920c0
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 7 deletions.
diff --git a/dist/browser/bootlint.js b/dist/browser/bootlint.js
@@ -10332,6 +10332,7 @@ if (typeof define === 'function' && define.amd)
 /*eslint-env node */
 
 var cheerio = require('cheerio');
+var parseUrl = require('url').parse;
 var semver = require('semver');
 var _location = require('./location');
 var LocationIndex = _location.LocationIndex;
@@ -10683,19 +10684,27 @@ var LocationIndex = _location.LocationIndex;
 
         // check for jQuery <script>s
         var jqueries = $([
-            'script[src*="jquery.min"]',
-            'script[src*="jQuery.min"]',
-            'script[src*="jquery.js"]',
-            'script[src*="jQuery.js"]'
+            'script[src*="jquery"]',
+            'script[src*="jQuery"]'
         ].join(','));
         if (!jqueries.length) {
             reporter(NO_JQUERY);
             return;
         }
         jqueries.each(function () {
             var script = $(this);
-            var matches = script.attr('src').match(/\d+\.\d+\.\d+/g);
-            if (!matches) {
+            var pathSegments = parseUrl(script.attr('src')).pathname.split('/');
+            var filename = pathSegments[pathSegments.length - 1];
+            if (!/^j[qQ]uery(\.min)?\.js$/.test(filename)) {
+                return;
+            }
+            var matches = pathSegments.map(function (segment) {
+                var match = segment.match(/^\d+\.\d+\.\d+$/);
+                return match ? match[0] : null;
+            }).filter(function (match) {
+                return match !== null;
+            });
+            if (!matches.length) {
                 return;
             }
             var version = matches[matches.length - 1];
@@ -11095,6 +11104,12 @@ var LocationIndex = _location.LocationIndex;
             reporter('Using `.pull-left` or `.pull-right` as part of the media object component is deprecated as of Bootstrap v3.3.0. Use `.media-left` or `.media-right` instead.', mediaPulls);
         }
     });
+    addLinter("W011", function lintMediaPulls($, reporter) {
+        var mediaPulls = $('.navbar .pull-left, .navbar .pull-right');
+        if (mediaPulls.length) {
+            reporter('To align components in navbars with utility classes, use `.navbar-left` or `.navbar-right` instead.', mediaPulls);
+        }
+    });
 
     exports._lint = function ($, reporter, disabledIdList, html) {
         var locationIndex = IN_NODE_JS ? new LocationIndex(html) : null;
@@ -11190,4 +11205,44 @@ var LocationIndex = _location.LocationIndex;
     }
 })(typeof exports === 'object' && exports || this);
 
-},{"./location":1,"cheerio":2,"semver":3}]},{},[4]);
+},{"./location":1,"cheerio":2,"semver":3,"url":5}],5:[function(require,module,exports){
+/*eslint-env node, browser */
+/* jshint browser: true */
+/**
+ * Simple lightweight shim of Node.js's `url.parse()`
+ * ( http://nodejs.org/docs/latest/api/url.html )
+ * for use within browsers.
+ */
+(function () {
+    'use strict';
+
+    // Only properties common to both browsers and Node.js are supported.
+    // For what browsers support, see https://developer.mozilla.org/en-US/docs/Web/API/URLUtils
+    var URL_PROPERTIES = [
+        'hash',
+        'host',
+        'hostname',
+        'href',
+        'pathname',
+        'port',
+        'protocol',
+        'search'
+    ];
+
+    /**
+     * @param {string} urlStr URL to parse
+     * @returns {object} Object with fields representing the various parts of the parsed URL.
+     */
+    function parse(urlStr) {
+        var anchor = document.createElement('a');
+        anchor.href = urlStr;
+        var urlObj = {};
+        URL_PROPERTIES.forEach(function (property) {
+            urlObj[property] = anchor[property];
+        });
+        return urlObj;
+    }
+    exports.parse = parse;
+})();
+
+},{}]},{},[4]);
diff --git a/src/bootlint.js b/src/bootlint.js
@@ -780,6 +780,12 @@ var LocationIndex = _location.LocationIndex;
             reporter('Using `.pull-left` or `.pull-right` as part of the media object component is deprecated as of Bootstrap v3.3.0. Use `.media-left` or `.media-right` instead.', mediaPulls);
         }
     });
+    addLinter("W011", function lintMediaPulls($, reporter) {
+        var mediaPulls = $('.navbar .pull-left, .navbar .pull-right');
+        if (mediaPulls.length) {
+            reporter('To align components in navbars with utility classes, use `.navbar-left` or `.navbar-right` instead.', mediaPulls);
+        }
+    });
 
     exports._lint = function ($, reporter, disabledIdList, html) {
         var locationIndex = IN_NODE_JS ? new LocationIndex(html) : null;

diff --git a/test/bootlint_test.js b/test/bootlint_test.js
@@ -611,5 +611,18 @@ exports.bootlint = {
             'should not complain about .media-left or .media-right classes'
         );
         test.done();
+    },
+
+    'pull classes inside navbar': function (test) {
+        test.expect(2);
+        test.deepEqual(lintHtml(utf8Fixture('navbar/pull-classes.html')),
+            ['To align components in navbars with utility classes, use `.navbar-left` or `.navbar-right` instead.'],
+            'should complain about .pull-* classes in .navbar'
+        );
+        test.deepEqual(lintHtml(utf8Fixture('navbar/navbar-classes.html')),
+            [],
+            'should not complain about .navbar-left or .navbar-right classes'
+        );
+        test.done();
     }
 };
diff --git a/test/fixtures/navbar/navbar-classes.html b/test/fixtures/navbar/navbar-classes.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Test</title>
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../lib/jquery.min.js"></script>
+
+        <link rel="stylesheet" href="../../lib/qunit.css">
+        <script src="../../lib/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <nav class="navbar navbar-default" role="navigation">
+          <div class="container-fluid">
+            <a class="navbar-brand navbar-left" href="#">Brand</a>
+             <ul class="nav navbar-nav navbar-right">
+               <li><a href="#">Link</a></li>
+               <li><a href="#">Link</a></li>
+             </ul>
+          </div>
+        </nav>
+        <div id="qunit"></div>
+        <ol id="bootlint"> </ol>
+    </body>
+</html>
+
diff --git a/test/fixtures/navbar/pull-classes.html b/test/fixtures/navbar/pull-classes.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Test</title>
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../lib/jquery.min.js"></script>
+
+        <link rel="stylesheet" href="../../lib/qunit.css">
+        <script src="../../lib/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <nav class="navbar navbar-default" role="navigation">
+          <div class="container-fluid">
+            <a class="navbar-brand pull-left" href="#">Brand</a>
+             <ul class="nav navbar-nav pull-right">
+               <li><a href="#">Link</a></li>
+               <li><a href="#">Link</a></li>
+             </ul>
+          </div>
+        </nav>
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="To align components in navbars with utility classes, use `.navbar-left` or `.navbar-right` instead."></li>
+        </ol>
+    </body>
+</html>