#366 - 2 new lint checks: disallow pull-left/right on .row and .col-*-* classes (#367)

* Add 2 new errors - A fix for issue #366: disallow pull-left/right on .row and .col-*-* classes

* Fixing to make this report for each occurrence in a file

* Removing unneeded loops

* Now also disallowing `style="float:left;"` and `style="float:right;"` on grid rows and columns.
This commit is contained in:
Chris Barr 2017-08-11 07:50:36 -04:00 коммит произвёл XhmikosR
Родитель 4de8cb4d53
Коммит 1ae21a4fdb
4 изменённых файлов: 136 добавлений и 0 удалений

Просмотреть файл

@ -1105,6 +1105,38 @@ var LocationIndex = _location.LocationIndex;
reporter('`.form-group`s should not be nested.', nestedFormGroups);
}
});
addLinter('E051', function lintColumnsNoFloats($, reporter) {
var pullSelector = COL_CLASSES.map(function (col) {
return '.pull-left' + col + ',.pull-right' + col;
}).join(',');
var pulledCols = $(pullSelector);
if (pulledCols.length) {
reporter('`.pull-right` and `.pull-left` must not be used on `.col-*-*` elements', pulledCols);
}
var styledSelector = COL_CLASSES.map(function (col) {
return col + '[style]';
}).join(',');
var styledCols = $(styledSelector).filter(function (i, el) {
//test for `float:*` in the style attribute
return /float\s*:\s*[a-z]+/i.test($(el).attr('style'));
});
if (styledCols.length) {
reporter('Manually added `float` styles must not be added on `.col-*-*` elements', styledCols);
}
});
addLinter('E052', function lintRowsNoFloats($, reporter) {
var pulledRows = $('.row.pull-right, .row.pull-left');
if (pulledRows.length) {
reporter('`.pull-right` and `.pull-left` must not be used on `.row` elements', pulledRows);
}
var styledRows = $('.row[style]').filter(function (i, el) {
//test for `float:*` in the style attribute
return /float\s*:\s*[a-z]+/i.test($(el).attr('style'));
});
if (styledRows.length) {
reporter('Manually added `float` styles must not be added on `.row` elements', styledRows);
}
});
exports._lint = function ($, reporter, disabledIdList, html) {
var locationIndex = IN_NODE_JS ? new LocationIndex(html) : null;
var reporterWrapper = IN_NODE_JS ? function (problem) {

Просмотреть файл

@ -955,5 +955,27 @@ exports.bootlint = {
'should complain when form-groups are nested'
);
test.done();
},
'.pull-right/left classes and manual float styles not allowed on .col-*-*': function (test) {
test.expect(1);
test.deepEqual(lintHtml(utf8Fixture('grid/col-no-float.html')),
[
'`.pull-right` and `.pull-left` must not be used on `.col-*-*` elements',
'Manually added `float` styles must not be added on `.col-*-*` elements'
],
'should complain about a `.pull-right/.pull-left` classes on `.col-*-*` AND manual `style="float:left;"/style="float:right;"` on a `.col-*-*`'
);
test.done();
},
'.pull-right/left classes and manual float styles not allowed on .row': function (test) {
test.expect(1);
test.deepEqual(lintHtml(utf8Fixture('grid/row-no-float.html')),
[
'`.pull-right` and `.pull-left` must not be used on `.row` elements',
'Manually added `float` styles must not be added on `.row` elements'
],
'should complain about a `.pull-right/.pull-left` classes on `.row` AND manual `style="float:left;"/style="float:right;"` on a `.row`'
);
test.done();
}
};

38
test/fixtures/grid/col-no-float.html поставляемый Normal file
Просмотреть файл

@ -0,0 +1,38 @@
<!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>
<div class="container">
<div class="row">
<div class="col-xs-6 pull-right">Content</div>
<div class="col-md-6 pull-left">Content</div>
</div>
<div class="row">
<div class="col-xs-6" style="float:left">Content</div>
<div class="col-md-6" style="float:right">Content</div>
</div>
</div>
<div id="qunit"></div>
<ol id="bootlint">
<li data-lint="`.pull-right` and `.pull-left` must not be used on `.col-*-*` elements"></li>
<li data-lint="Manually added `float` styles must not be added on `.col-*-*` elements"></li>
</ol>
</body>
</html>

44
test/fixtures/grid/row-no-float.html поставляемый Normal file
Просмотреть файл

@ -0,0 +1,44 @@
<!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>
<div class="container">
<div class="row pull-right">
<div class="col-xs-6">Content</div>
</div>
<div class="row pull-left">
<div class="col-md-6">Content</div>
</div>
<div class="row" style="float: left;">
<div class="col-md-6">Content</div>
</div>
<div class="row" style="float: right;">
<div class="col-md-6">Content</div>
</div>
</div>
<div id="qunit"></div>
<ol id="bootlint">
<li data-lint="`.pull-right` and `.pull-left` must not be used on `.row` elements"></li>
<li data-lint="Manually added `float` styles must not be added on `.row` elements"></li>
</ol>
</body>
</html>