From d130e8127c7cb60e5bbadcd92477cc5562b6adf7 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Thu, 31 Jan 2019 16:54:37 +0300 Subject: [PATCH] fix(stylehacks): better handle uppercase --- .../stylehacks/src/__tests__/bodyEmpty.js | 8 +++++ .../__tests__/htmlCombinatorCommentBody.js | 8 +++++ .../src/__tests__/htmlFirstChild.js | 8 +++++ .../stylehacks/src/__tests__/important.js | 8 +++++ .../stylehacks/src/__tests__/leadingStar.js | 8 +++++ .../src/__tests__/leadingUnderscore.js | 34 +++++++++++++++++++ .../stylehacks/src/__tests__/mediaSlash0.js | 8 +++++ .../src/__tests__/mediaSlash0Slash9.js | 8 +++++ .../stylehacks/src/__tests__/mediaSlash9.js | 8 +++++ packages/stylehacks/src/__tests__/slash9.js | 16 +++++++++ packages/stylehacks/src/__tests__/starHtml.js | 8 +++++ .../src/__tests__/trailingSlashComma.js | 16 +++++++++ packages/stylehacks/src/exists.js | 3 +- packages/stylehacks/src/index.js | 6 ++++ packages/stylehacks/src/isMixin.js | 2 ++ packages/stylehacks/src/plugin.js | 8 +++++ .../src/plugins/leadingUnderscore.js | 2 ++ .../stylehacks/src/plugins/mediaSlash0.js | 3 +- .../src/plugins/mediaSlash0Slash9.js | 3 +- .../stylehacks/src/plugins/mediaSlash9.js | 3 +- .../src/plugins/trailingSlashComma.js | 2 ++ 21 files changed, 166 insertions(+), 4 deletions(-) diff --git a/packages/stylehacks/src/__tests__/bodyEmpty.js b/packages/stylehacks/src/__tests__/bodyEmpty.js index f4b99816d..cb152252c 100644 --- a/packages/stylehacks/src/__tests__/bodyEmpty.js +++ b/packages/stylehacks/src/__tests__/bodyEmpty.js @@ -8,3 +8,11 @@ test( '', {target: 'firefox2', unaffected: 'chrome58'} ); + +test( + 'firefox empty body hack (uppercase)', + processCSS, + 'BODY:EMPTY h1 { color: red }', + '', + {target: 'firefox2', unaffected: 'chrome58'} +); diff --git a/packages/stylehacks/src/__tests__/htmlCombinatorCommentBody.js b/packages/stylehacks/src/__tests__/htmlCombinatorCommentBody.js index e4b31d9a6..f62049816 100644 --- a/packages/stylehacks/src/__tests__/htmlCombinatorCommentBody.js +++ b/packages/stylehacks/src/__tests__/htmlCombinatorCommentBody.js @@ -9,6 +9,14 @@ test( {target: 'ie6', unaffected: 'ie8'} ); +test( + 'html combinator comment body hack (uppercase)', + processCSS, + 'HTML > /**/ BODY H1 { color: red }', + '', + {target: 'ie6', unaffected: 'ie8'} +); + test( 'html combinator comment body hack (2)', processCSS, diff --git a/packages/stylehacks/src/__tests__/htmlFirstChild.js b/packages/stylehacks/src/__tests__/htmlFirstChild.js index 45da2689f..846981003 100644 --- a/packages/stylehacks/src/__tests__/htmlFirstChild.js +++ b/packages/stylehacks/src/__tests__/htmlFirstChild.js @@ -8,3 +8,11 @@ test( '', {target: 'opera9', unaffected: 'chrome58'} ); + +test( + 'opera html:first-child hack (uppercase)', + processCSS, + 'HTML:FIRST-CHILD H1 { color: red }', + '', + {target: 'opera9', unaffected: 'chrome58'} +); diff --git a/packages/stylehacks/src/__tests__/important.js b/packages/stylehacks/src/__tests__/important.js index a6af2e425..fab50462e 100644 --- a/packages/stylehacks/src/__tests__/important.js +++ b/packages/stylehacks/src/__tests__/important.js @@ -8,3 +8,11 @@ test( 'h1 { }', {target: 'ie6', unaffected: 'ie8'} ); + +test( + 'ie 5.5-7 important hack (uppercase)', + processCSS, + 'H1 { COLOR: RED !IE }', + 'H1 { }', + {target: 'ie6', unaffected: 'ie8'} +); diff --git a/packages/stylehacks/src/__tests__/leadingStar.js b/packages/stylehacks/src/__tests__/leadingStar.js index 964d4eec8..237012e30 100644 --- a/packages/stylehacks/src/__tests__/leadingStar.js +++ b/packages/stylehacks/src/__tests__/leadingStar.js @@ -38,3 +38,11 @@ test( 'h1 {}', opts ); + +test( + 'should also handle @hacks (uppercase)', + processCSS, + 'h1 { @COLOR: red }', + 'h1 {}', + opts +); diff --git a/packages/stylehacks/src/__tests__/leadingUnderscore.js b/packages/stylehacks/src/__tests__/leadingUnderscore.js index 0c7761d9e..db7fde972 100644 --- a/packages/stylehacks/src/__tests__/leadingUnderscore.js +++ b/packages/stylehacks/src/__tests__/leadingUnderscore.js @@ -9,6 +9,14 @@ test( {target: 'ie6', unaffected: 'ie7'} ); +test( + 'ie 6 underscore hack (uppercase)', + processCSS, + 'h1 { _COLOR: red }', + 'h1 { }', + {target: 'ie6', unaffected: 'ie7'} +); + test( 'ie 6 hyphen hack', processCSS, @@ -17,6 +25,14 @@ test( {target: 'ie6', unaffected: 'ie7'} ); +test( + 'ie 6 hyphen hack (uppercase)', + processCSS, + 'h1 { -COLOR: red }', + 'h1 { }', + {target: 'ie6', unaffected: 'ie7'} +); + test( 'prefixed value must be ignored', processCSS, @@ -26,6 +42,15 @@ test( 0 ); +test( + 'prefixed value must be ignored (uppercase)', + processCSS, + 'h1 { -MOZ-TAB-SIZE: 10px }', + 'h1 { -MOZ-TAB-SIZE: 10px }', + {target: 'ie6', unaffected: 'ie7'}, + 0 +); + test( 'custom property must be ignored', processCSS, @@ -34,3 +59,12 @@ test( {target: 'ie6', unaffected: 'ie7'}, 0 ); + +test( + 'custom property must be ignored (uppercase)', + processCSS, + 'h1 { --COLOR-FOOBAR: #000; }', + 'h1 { --COLOR-FOOBAR: #000; }', + {target: 'ie6', unaffected: 'ie7'}, + 0 +); diff --git a/packages/stylehacks/src/__tests__/mediaSlash0.js b/packages/stylehacks/src/__tests__/mediaSlash0.js index 054126166..b5abba937 100644 --- a/packages/stylehacks/src/__tests__/mediaSlash0.js +++ b/packages/stylehacks/src/__tests__/mediaSlash0.js @@ -8,3 +8,11 @@ test( '', {target: 'ie8', unaffected: 'ie9'} ); + +test( + 'ie 8 media \\0screen hack (uppercase)', + processCSS, + '@MEDIA \\0SCREEN { h1 { color: red } }', + '', + {target: 'ie8', unaffected: 'ie9'} +); diff --git a/packages/stylehacks/src/__tests__/mediaSlash0Slash9.js b/packages/stylehacks/src/__tests__/mediaSlash0Slash9.js index ad50502b0..ee4cabb38 100644 --- a/packages/stylehacks/src/__tests__/mediaSlash0Slash9.js +++ b/packages/stylehacks/src/__tests__/mediaSlash0Slash9.js @@ -8,3 +8,11 @@ test( '', {target: 'ie6', unaffected: 'ie9'} ); + +test( + 'ie <= 8 media \\0screen\\,screen\\9 hack (uppercase)', + processCSS, + '@MEDIA \\0SCREEN\\,SCREEN\\9 { h1 { color: red } }', + '', + {target: 'ie6', unaffected: 'ie9'} +); diff --git a/packages/stylehacks/src/__tests__/mediaSlash9.js b/packages/stylehacks/src/__tests__/mediaSlash9.js index 573fed0d8..5bbee13b1 100644 --- a/packages/stylehacks/src/__tests__/mediaSlash9.js +++ b/packages/stylehacks/src/__tests__/mediaSlash9.js @@ -8,3 +8,11 @@ test( '', {target: 'ie6', unaffected: 'ie8'} ); + +test( + 'ie 7 media screen\\9 hack (uppercase)', + processCSS, + '@MEDIA SCREEN\\9 { h1 { color: red } }', + '', + {target: 'ie6', unaffected: 'ie8'} +); diff --git a/packages/stylehacks/src/__tests__/slash9.js b/packages/stylehacks/src/__tests__/slash9.js index 11887f63b..1a4a6161d 100755 --- a/packages/stylehacks/src/__tests__/slash9.js +++ b/packages/stylehacks/src/__tests__/slash9.js @@ -9,6 +9,14 @@ test( {target: 'ie8', unaffected: 'chrome58'} ); +test( + 'ie 6 underscore hack (uppercase)', + processCSS, + 'h1 { MARGIN-TOP: 1PX\\9; }', + 'h1 { }', + {target: 'ie8', unaffected: 'chrome58'} +); + test( 'ie 6 underscore hack', processCSS, @@ -16,3 +24,11 @@ test( 'h1 { }', {target: 'ie8', unaffected: 'chrome58'} ); + +test( + 'ie 6 underscore hack (uppercase)', + processCSS, + 'h1 { MARGIN-TOP/*\\**/: 1PX\\9; }', + 'h1 { }', + {target: 'ie8', unaffected: 'chrome58'} +); diff --git a/packages/stylehacks/src/__tests__/starHtml.js b/packages/stylehacks/src/__tests__/starHtml.js index 8a3c69a3b..c0bc388f4 100644 --- a/packages/stylehacks/src/__tests__/starHtml.js +++ b/packages/stylehacks/src/__tests__/starHtml.js @@ -8,3 +8,11 @@ test( '', {target: 'ie6', unaffected: 'ie7'} ); + +test( + 'ie 5.5-6 * html hack (uppercase)', + processCSS, + '* HTML H1 { color: red }', + '', + {target: 'ie6', unaffected: 'ie7'} +); diff --git a/packages/stylehacks/src/__tests__/trailingSlashComma.js b/packages/stylehacks/src/__tests__/trailingSlashComma.js index c14b56d39..4a049bfd9 100644 --- a/packages/stylehacks/src/__tests__/trailingSlashComma.js +++ b/packages/stylehacks/src/__tests__/trailingSlashComma.js @@ -9,6 +9,14 @@ test( {target: 'ie6', unaffected: 'ie8'} ); +test( + 'ie 5.5-7 trailing comma hack (uppercase)', + processCSS, + 'H1, { COLOR: RED }', + '', + {target: 'ie6', unaffected: 'ie8'} +); + test( 'ie 5.5-7 trailing slash hack', processCSS, @@ -16,3 +24,11 @@ test( '', {target: 'ie6', unaffected: 'ie8'} ); + +test( + 'ie 5.5-7 trailing slash hack (uppercase)', + processCSS, + 'H1\\ { COLOR: RED }', + '', + {target: 'ie6', unaffected: 'ie8'} +); diff --git a/packages/stylehacks/src/exists.js b/packages/stylehacks/src/exists.js index 9221e8440..468ef54d2 100644 --- a/packages/stylehacks/src/exists.js +++ b/packages/stylehacks/src/exists.js @@ -1,4 +1,5 @@ export default function exists (selector, index, value) { const node = selector.at(index); - return node && node.value === value; + + return node && node.value.toLowerCase() === value; } diff --git a/packages/stylehacks/src/index.js b/packages/stylehacks/src/index.js index e4732792d..543461202 100755 --- a/packages/stylehacks/src/index.js +++ b/packages/stylehacks/src/index.js @@ -15,19 +15,24 @@ const stylehacks = postcss.plugin('stylehacks', (opts = {}) => { const applied = browsers.some(browser => { return hack.targets.some(target => browser === target); }); + if (applied) { return list; } + return [...list, hack]; }, []); + css.walk(node => { processors.forEach(proc => { if (!~proc.nodeTypes.indexOf(node.type)) { return; } + if (opts.lint) { return proc.detectAndWarn(node); } + return proc.detectAndResolve(node); }); }); @@ -37,6 +42,7 @@ const stylehacks = postcss.plugin('stylehacks', (opts = {}) => { stylehacks.detect = node => { return plugins.some(Plugin => { const hack = new Plugin(); + return hack.any(node); }); }; diff --git a/packages/stylehacks/src/isMixin.js b/packages/stylehacks/src/isMixin.js index 275d82bdb..55bc94b2f 100644 --- a/packages/stylehacks/src/isMixin.js +++ b/packages/stylehacks/src/isMixin.js @@ -1,8 +1,10 @@ export default function isMixin (node) { const {selector} = node; + // If the selector ends with a ':' it is likely a part of a custom mixin. if (!selector || selector[selector.length - 1] === ':') { return true; } + return false; } diff --git a/packages/stylehacks/src/plugin.js b/packages/stylehacks/src/plugin.js index 3c289ccfb..2ebbe6979 100755 --- a/packages/stylehacks/src/plugin.js +++ b/packages/stylehacks/src/plugin.js @@ -12,26 +12,33 @@ export default function plugin (targets, nodeTypes, detect) { message: `Bad ${metadata.identifier}: ${metadata.hack}`, browsers: this.targets, }); + this.nodes.push(node); } any (node) { if (~this.nodeTypes.indexOf(node.type)) { detect.apply(this, arguments); + return !!node._stylehacks; } + return false; } detectAndResolve (...args) { this.nodes = []; + detect.apply(this, args); + return this.resolve(); } detectAndWarn (...args) { this.nodes = []; + detect.apply(this, args); + return this.warn(); } @@ -42,6 +49,7 @@ export default function plugin (targets, nodeTypes, detect) { warn () { return this.nodes.forEach(node => { const {message, browsers, identifier, hack} = node._stylehacks; + return node.warn(this.result, message, {browsers, identifier, hack}); }); } diff --git a/packages/stylehacks/src/plugins/leadingUnderscore.js b/packages/stylehacks/src/plugins/leadingUnderscore.js index 545ddf22b..8aa0a8f2d 100755 --- a/packages/stylehacks/src/plugins/leadingUnderscore.js +++ b/packages/stylehacks/src/plugins/leadingUnderscore.js @@ -6,12 +6,14 @@ import {DECL} from '../dictionary/postcss'; export default plugin([IE_6], [DECL], function (decl) { const {before} = decl.raws; + if (before && ~before.indexOf('_')) { this.push(decl, { identifier: PROPERTY, hack: `${before.trim()}${decl.prop}`, }); } + if (decl.prop[0] === '-' && decl.prop[1] !== '-' && postcss.vendor.prefix(decl.prop) === '') { this.push(decl, { identifier: PROPERTY, diff --git a/packages/stylehacks/src/plugins/mediaSlash0.js b/packages/stylehacks/src/plugins/mediaSlash0.js index f9836676a..f387ab0ce 100755 --- a/packages/stylehacks/src/plugins/mediaSlash0.js +++ b/packages/stylehacks/src/plugins/mediaSlash0.js @@ -5,7 +5,8 @@ import {ATRULE} from '../dictionary/postcss'; export default plugin([IE_8], [ATRULE], function (rule) { const params = rule.params.trim(); - if (params === '\\0screen') { + + if (params.toLowerCase() === '\\0screen') { this.push(rule, { identifier: MEDIA_QUERY, hack: params, diff --git a/packages/stylehacks/src/plugins/mediaSlash0Slash9.js b/packages/stylehacks/src/plugins/mediaSlash0Slash9.js index ce0fc934b..a9fc0b0fa 100644 --- a/packages/stylehacks/src/plugins/mediaSlash0Slash9.js +++ b/packages/stylehacks/src/plugins/mediaSlash0Slash9.js @@ -5,7 +5,8 @@ import {ATRULE} from '../dictionary/postcss'; export default plugin([IE_5_5, IE_6, IE_7, IE_8], [ATRULE], function (rule) { const params = rule.params.trim(); - if (params === '\\0screen\\,screen\\9') { + + if (params.toLowerCase() === '\\0screen\\,screen\\9') { this.push(rule, { identifier: MEDIA_QUERY, hack: params, diff --git a/packages/stylehacks/src/plugins/mediaSlash9.js b/packages/stylehacks/src/plugins/mediaSlash9.js index 3a5fd03fa..b801c1840 100755 --- a/packages/stylehacks/src/plugins/mediaSlash9.js +++ b/packages/stylehacks/src/plugins/mediaSlash9.js @@ -5,7 +5,8 @@ import {ATRULE} from '../dictionary/postcss'; export default plugin([IE_5_5, IE_6, IE_7], [ATRULE], function (rule) { const params = rule.params.trim(); - if (params === 'screen\\9') { + + if (params.toLowerCase() === 'screen\\9') { this.push(rule, { identifier: MEDIA_QUERY, hack: params, diff --git a/packages/stylehacks/src/plugins/trailingSlashComma.js b/packages/stylehacks/src/plugins/trailingSlashComma.js index fb854cb80..07682db87 100755 --- a/packages/stylehacks/src/plugins/trailingSlashComma.js +++ b/packages/stylehacks/src/plugins/trailingSlashComma.js @@ -8,8 +8,10 @@ export default plugin([IE_5_5, IE_6, IE_7], [RULE], function (rule) { if (isMixin(rule)) { return; } + const {selector} = rule; const trim = selector.trim(); + if ( trim.lastIndexOf(',') === selector.length - 1 || trim.lastIndexOf('\\') === selector.length - 1