From 17c0f9bfe1841eaef51da6825825b91e833bc171 Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Tue, 13 Feb 2018 18:41:55 +0300 Subject: [PATCH] feat(css): lowercase html tags (#3954) --- package.json | 1 + src/language-css/clean.js | 14 ++ src/language-css/printer-postcss.js | 14 +- .../css_case/__snapshots__/jsfmt.spec.js.snap | 121 +++++++++++++++--- tests/css_case/case.css | 39 ++++++ tests/css_case/case.less | 2 + tests/css_case/case.scss | 2 + .../__snapshots__/jsfmt.spec.js.snap | 2 +- yarn.lock | 4 + 9 files changed, 181 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 59fec14bd..64cd4c9aa 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "resolve": "1.5.0", "semver": "5.4.1", "string-width": "2.1.1", + "html-tag-names": "1.1.1", "typescript": "2.7.0-insiders.20171214", "typescript-eslint-parser": "11.0.0", "unicode-regex": "1.0.1", diff --git a/src/language-css/clean.js b/src/language-css/clean.js index 81ee174e2..7bfe7872b 100644 --- a/src/language-css/clean.js +++ b/src/language-css/clean.js @@ -1,5 +1,7 @@ "use strict"; +const htmlTagNames = require("html-tag-names"); + function clean(ast, newObj) { if ( ast.type === "media-query" || @@ -108,6 +110,18 @@ function clean(ast, newObj) { .replace(/^url\(\s+/gi, "url(") .replace(/\s+\)$/gi, ")"); } + + if (ast.type === "selector-tag") { + const lowercasedValue = ast.value.toLowerCase(); + + if (htmlTagNames.indexOf(lowercasedValue) !== -1) { + newObj.value = lowercasedValue; + } + + if (["from", "to"].indexOf(lowercasedValue) !== -1) { + newObj.value = lowercasedValue; + } + } } function cleanCSSStrings(value) { diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 41cc753ac..72190761b 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -1,5 +1,6 @@ "use strict"; +const htmlTagNames = require("html-tag-names"); const clean = require("./clean"); const privateUtil = require("../common/util"); const sharedUtil = require("../common/util-shared"); @@ -309,11 +310,22 @@ function genericPrint(path, options, print) { return adjustStrings(node.value, options); } case "selector-tag": { + const lowercasedValue = node.value.toLowerCase(); + const atRuleAncestorNode = getAncestorNode(path, "css-atrule"); + const isKeyframeKeywords = + atRuleAncestorNode && + atRuleAncestorNode.name && + atRuleAncestorNode.name.toLowerCase().endsWith("keyframes") && + ["from", "to"].indexOf(lowercasedValue) !== -1; + const isHTMLTag = htmlTagNames.indexOf(lowercasedValue) !== -1; + return concat([ node.namespace ? concat([node.namespace === true ? "" : node.namespace.trim(), "|"]) : "", - adjustNumbers(node.value) + adjustNumbers( + isHTMLTag || isKeyframeKeywords ? lowercasedValue : node.value + ) ]); } case "selector-id": { diff --git a/tests/css_case/__snapshots__/jsfmt.spec.js.snap b/tests/css_case/__snapshots__/jsfmt.spec.js.snap index d3f1dc47a..c248b08b2 100644 --- a/tests/css_case/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css_case/__snapshots__/jsfmt.spec.js.snap @@ -24,6 +24,45 @@ a:AFTER { ::-WEBKIT-PROGRESS-BAR { background-color: orange; } + +TABLE {} + +/* apply a dashed border to all unresolved elements */ +:unresolved { + border: 1px dashed red; + display: inline-block; +} + +/* x-panel's that are unresolved are red */ +x-panel:unresolved { + color: red; +} + +/* once the definition of x-panel is registered, it becomes green */ +x-panel { + color: green; + display: block; + padding: 5px; + display: block; +} + +:host { + all: initial; + display: block; + contain: content; + text-align: center; + background: linear-gradient(to left, hotpink, transparent); + max-width: 500px; + margin: 0 auto; + border-radius: 8px; + transition: transform .2s ease-out; +} +:host([hidden]) { + display: none; +} +:host(:hover) { + transform: scale(1.1); +} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @custom-media --KeepName (min-width: 500px); @@ -49,6 +88,46 @@ a:after { background-color: orange; } +table { +} + +/* apply a dashed border to all unresolved elements */ +:unresolved { + border: 1px dashed red; + display: inline-block; +} + +/* x-panel's that are unresolved are red */ +x-panel:unresolved { + color: red; +} + +/* once the definition of x-panel is registered, it becomes green */ +x-panel { + color: green; + display: block; + padding: 5px; + display: block; +} + +:host { + all: initial; + display: block; + contain: content; + text-align: center; + background: linear-gradient(to left, hotpink, transparent); + max-width: 500px; + margin: 0 auto; + border-radius: 8px; + transition: transform 0.2s ease-out; +} +:host([hidden]) { + display: none; +} +:host(:hover) { + transform: scale(1.1); +} + `; exports[`case.less 1`] = ` @@ -193,6 +272,8 @@ a:AFTER { ::-WEBKIT-PROGRESS-BAR { background-color: orange; } + +TABLE {} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // Convention in this test file: // - The case should be preserved for things prefixed with "Keep". @@ -203,7 +284,7 @@ a:AFTER { @import Keep; -HTML#KeepId.KeepClass, +html#KeepId.KeepClass, a[HREF="KeepAttrValue"]:hover::first-letter, svg[viewBox] linearGradient, :not(:nth-child(2n + 1)) { @@ -225,7 +306,7 @@ svg[viewBox] linearGradient, } @keyframes KeepAnimationName { - FROM { + from { prop: val; } @@ -233,7 +314,7 @@ svg[viewBox] linearGradient, prop: val; } - TO { + to { prop: val; } } @@ -263,7 +344,7 @@ $KeepScssVar: val; prop: val; } - &Keep & Element { + &Keep & element { prop: val; } @@ -299,25 +380,25 @@ $KeepScssVar: val; } @keyframes identifier { - FROM { + from { margin-top: 50px; } 50% { margin-top: 150px; } - TO { + to { margin-top: 100px; } } @-webkit-keyframes float-up { - FROM { + from { margin-top: 50px; } 50% { margin-top: 150px; } - TO { + to { margin-top: 100px; } } @@ -344,6 +425,9 @@ a:after { background-color: orange; } +table { +} + `; exports[`case.scss 1`] = ` @@ -490,6 +574,8 @@ a:AFTER { ::-WEBKIT-PROGRESS-BAR { background-color: orange; } + +TABLE {} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // Convention in this test file: // - The case should be preserved for things prefixed with "Keep". @@ -499,7 +585,7 @@ a:AFTER { @import Keep; -HTML#KeepId.KeepClass, +html#KeepId.KeepClass, a[HREF="KeepAttrValue"]:hover::first-letter, svg[viewBox] linearGradient, :not(:nth-child(2n + 1)) { @@ -521,7 +607,7 @@ svg[viewBox] linearGradient, } @keyframes KeepAnimationName { - FROM { + from { prop: val; } @@ -531,7 +617,7 @@ svg[viewBox] linearGradient, prop: val; } - TO { + to { prop: val; } } @@ -563,7 +649,7 @@ $KeepTopLevelVar: val; prop: val; } - &Keep & Element { + &Keep & element { prop: val; } @@ -593,25 +679,25 @@ $KeepTopLevelVar: val; } @keyframes identifier { - FROM { + from { margin-top: 50px; } 50% { margin-top: 150px; } - TO { + to { margin-top: 100px; } } @-webkit-keyframes float-up { - FROM { + from { margin-top: 50px; } 50% { margin-top: 150px; } - TO { + to { margin-top: 100px; } } @@ -638,4 +724,7 @@ a:after { background-color: orange; } +table { +} + `; diff --git a/tests/css_case/case.css b/tests/css_case/case.css index 4fdff82b3..20e146b81 100644 --- a/tests/css_case/case.css +++ b/tests/css_case/case.css @@ -21,3 +21,42 @@ a:AFTER { ::-WEBKIT-PROGRESS-BAR { background-color: orange; } + +TABLE {} + +/* apply a dashed border to all unresolved elements */ +:unresolved { + border: 1px dashed red; + display: inline-block; +} + +/* x-panel's that are unresolved are red */ +x-panel:unresolved { + color: red; +} + +/* once the definition of x-panel is registered, it becomes green */ +x-panel { + color: green; + display: block; + padding: 5px; + display: block; +} + +:host { + all: initial; + display: block; + contain: content; + text-align: center; + background: linear-gradient(to left, hotpink, transparent); + max-width: 500px; + margin: 0 auto; + border-radius: 8px; + transition: transform .2s ease-out; +} +:host([hidden]) { + display: none; +} +:host(:hover) { + transform: scale(1.1); +} diff --git a/tests/css_case/case.less b/tests/css_case/case.less index 1afb47c53..085496ba8 100644 --- a/tests/css_case/case.less +++ b/tests/css_case/case.less @@ -139,3 +139,5 @@ a:AFTER { ::-WEBKIT-PROGRESS-BAR { background-color: orange; } + +TABLE {} diff --git a/tests/css_case/case.scss b/tests/css_case/case.scss index 1e1c5fee7..87732a450 100644 --- a/tests/css_case/case.scss +++ b/tests/css_case/case.scss @@ -141,3 +141,5 @@ a:AFTER { ::-WEBKIT-PROGRESS-BAR { background-color: orange; } + +TABLE {} diff --git a/tests/css_selector_list/__snapshots__/jsfmt.spec.js.snap b/tests/css_selector_list/__snapshots__/jsfmt.spec.js.snap index 01df2c59f..7a4ccb861 100644 --- a/tests/css_selector_list/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css_selector_list/__snapshots__/jsfmt.spec.js.snap @@ -689,7 +689,7 @@ svg|a { *|a { } -|B { +|b { } ns|* { diff --git a/yarn.lock b/yarn.lock index c9981d739..f87598b4d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2134,6 +2134,10 @@ html-encoding-sniffer@^1.0.1: dependencies: whatwg-encoding "^1.0.1" +html-tag-names@1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/html-tag-names/-/html-tag-names-1.1.1.tgz#f8a076113f16e393518937f6b3b5d22296755d4a" + http-signature@~1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"