fix(stylehacks): better handle uppercase (#704)

cssnano · Jan 31, 2019 · 8d48058 · 8d48058
1 parent ceb24a1
commit 8d48058
Show file tree

Hide file tree

Showing 21 changed files with 166 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,10 +9,26 @@ 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,
     'h1 { margin-top/*\\**/: 1px\\9; }',
     '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
@@ -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
@@ -9,10 +9,26 @@ 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,
     'h1\\ { color: red }',
     '',
     {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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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