From 76dc44cbe3291cba5db8691f3d8d93a6df73efc2 Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Mon, 25 Jan 2016 22:01:55 -0800 Subject: [PATCH] Fixes issue where older Android browsers wouldn't support :nth-child(n) | #153 * Updates tests to reflect this change * Updates the lost-column and lost-waffle to reflect change * Updates documentation to reflect this change --- README.md | 2 +- lib/lost-column.js | 6 +++--- lib/lost-waffle.js | 4 ++-- test/lost-column.js | 12 ++++++------ test/lost-waffle.js | 8 ++++---- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 8ee1c753..9fae83bd 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ And the processed CSS looks like this: div { width: calc(99.99% * 1/3 - (30px - 30px * 1/3)); } -div:nth-child(n) { +div:nth-child(1n) { float: left; margin-right: 30px; clear: none; diff --git a/lib/lost-column.js b/lib/lost-column.js index a583a817..392bcc7c 100644 --- a/lib/lost-column.js +++ b/lib/lost-column.js @@ -127,7 +127,7 @@ module.exports = function lostColumnDecl(css, settings) { newBlock( decl, - ':nth-child(n)', + ':nth-child(1n)', ['margin-right'], [lostColumnGutter] ); @@ -164,7 +164,7 @@ module.exports = function lostColumnDecl(css, settings) { newBlock( decl, - ':nth-child(n)', + ':nth-child(1n)', ['float', 'margin-right', 'clear'], ['left', lostColumnGutter, 'none'] ); @@ -204,7 +204,7 @@ module.exports = function lostColumnDecl(css, settings) { newBlock( decl, - ':nth-child(n)', + ':nth-child(1n)', ['float', 'clear', 'margin-right', 'width'], ['none', 'none', 0, 'auto'] ); diff --git a/lib/lost-waffle.js b/lib/lost-waffle.js index cc5faec9..b6377566 100644 --- a/lib/lost-waffle.js +++ b/lib/lost-waffle.js @@ -132,7 +132,7 @@ module.exports = function lostWaffleDecl(css, settings) { newBlock( decl, - ':nth-child(n)', + ':nth-child(1n)', ['margin-right', 'margin-bottom'], [lostWaffleGutter, lostWaffleGutter] ); @@ -176,7 +176,7 @@ module.exports = function lostWaffleDecl(css, settings) { newBlock( decl, - ':nth-child(n)', + ':nth-child(1n)', ['float', 'margin-right', 'margin-bottom', 'clear'], ['left', lostWaffleGutter, lostWaffleGutter, 'none'] ); diff --git a/test/lost-column.js b/test/lost-column.js index 25c0e1d9..2e99ec75 100644 --- a/test/lost-column.js +++ b/test/lost-column.js @@ -7,7 +7,7 @@ describe('lost-column', function() { check( 'a { lost-column: 1/3; }', 'a { width: calc(99.99% * 1/3 - (30px - 30px * 1/3)); }\n' + - 'a:nth-child(n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + 'a:last-child { margin-right: 0; }\n' + 'a:nth-child(3n) { float: right; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + @@ -19,7 +19,7 @@ describe('lost-column', function() { check( 'a { lost-column: 2/5; }', 'a { width: calc(99.99% * 2/5 - (30px - 30px * 2/5)); }\n' + - 'a:nth-child(n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + 'a:last-child { margin-right: 0; }\n' + 'a:nth-child(5n) { float: right; }\n' + 'a:nth-child(5n) { margin-right: 0; }\n' + @@ -31,7 +31,7 @@ describe('lost-column', function() { check( 'a { lost-column: 2/4 2; }', 'a { width: calc(99.99% * 2/4 - (30px - 30px * 2/4)); }\n' + - 'a:nth-child(n) { float: left; margin-right: 30px; clear: none; }\n' + + 'a:nth-child(1n) { float: left; margin-right: 30px; clear: none; }\n' + 'a:last-child { margin-right: 0; }\n' + 'a:nth-child(2n) { float: right; }\n' + 'a:nth-child(2n) { margin-right: 0; }\n' + @@ -43,7 +43,7 @@ describe('lost-column', function() { check( 'a { lost-column: 2/5 3 0; }', 'a { width: calc(99.999999% * 2/5); }\n' + - 'a:nth-child(n) { float: left; margin-right: 0; clear: none; }\n' + + 'a:nth-child(1n) { float: left; margin-right: 0; clear: none; }\n' + 'a:last-child { margin-right: 0; }\n' + 'a:nth-child(3n) { float: right; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + @@ -56,7 +56,7 @@ describe('lost-column', function() { 'a { lost-column: 2/6 3 60px flex; }', 'a { flex: 0 0 auto; width: calc(99.99% * 2/6 - (60px - 60px * 2/6));' + ' }\n' + - 'a:nth-child(n) { margin-right: 60px; }\n' + + 'a:nth-child(1n) { margin-right: 60px; }\n' + 'a:last-child { margin-right: 0; }\n' + 'a:nth-child(3n) { float: right; }\n' + 'a:nth-child(3n) { margin-right: 0; }' @@ -67,7 +67,7 @@ describe('lost-column', function() { 'a { lost-column: none; }', 'a { width: auto; }\n' + 'a:last-child { float: none; clear: none; margin-right: 0; width: auto; }\n' + - 'a:nth-child(n) { float: none; clear: none; margin-right: 0; width: auto; }\n' + + 'a:nth-child(1n) { float: none; clear: none; margin-right: 0; width: auto; }\n' + 'a:nth-child(1n + 1) { float: none; clear: none; margin-right: 0; width: auto; }\n' + 'a:nth-child(1n) { float: none; clear: none; margin-right: 0; width: auto; }' ); diff --git a/test/lost-waffle.js b/test/lost-waffle.js index 769dbea4..cbc6430b 100644 --- a/test/lost-waffle.js +++ b/test/lost-waffle.js @@ -8,7 +8,7 @@ describe('lost-waffle', function() { 'a { lost-waffle: 1/3; }', 'a { width: calc(99.99% * 1/3 - (30px - 30px * 1/3));' + ' height: calc(99.99% * 1/3 - (30px - 30px * 1/3)); }\n' + - 'a:nth-child(n) { float: left; margin-right: 30px;' + + 'a:nth-child(1n) { float: left; margin-right: 30px;' + ' margin-bottom: 30px; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + @@ -23,7 +23,7 @@ describe('lost-waffle', function() { 'a { lost-waffle: 2/4 2; }', 'a { width: calc(99.99% * 2/4 - (30px - 30px * 2/4));' + ' height: calc(99.99% * 2/4 - (30px - 30px * 2/4)); }\n' + - 'a:nth-child(n) { float: left; margin-right: 30px;' + + 'a:nth-child(1n) { float: left; margin-right: 30px;' + ' margin-bottom: 30px; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(2n) { margin-right: 0; }\n' + @@ -38,7 +38,7 @@ describe('lost-waffle', function() { 'a { lost-waffle: 3/6 2 60px; }', 'a { width: calc(99.99% * 3/6 - (60px - 60px * 3/6));' + ' height: calc(99.99% * 3/6 - (60px - 60px * 3/6)); }\n' + - 'a:nth-child(n) { float: left; margin-right: 60px;' + + 'a:nth-child(1n) { float: left; margin-right: 60px;' + ' margin-bottom: 60px; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(2n) { margin-right: 0; }\n' + @@ -53,7 +53,7 @@ describe('lost-waffle', function() { 'a { lost-waffle: 2/5 3 0 flex; }', 'a { flex: 0 0 auto; width: calc(99.999999% * 2/5);' + ' height: calc(99.999999% * 2/5); }\n' + - 'a:nth-child(n) { margin-right: 0; margin-bottom: 0; }\n' + + 'a:nth-child(1n) { margin-right: 0; margin-bottom: 0; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + 'a:nth-child(3n) { float: right; }\n' +