feat(css): lowercase html tags (#3954)

This commit is contained in:
Evilebot Tnawi authored and GitHub committed 2018-02-13 18:41:55 +03:00
1 parent 11a8d586b8
commit 17c0f9bfe1
9 files changed
+181 -18

No files matched your search

+1
View File
@@ -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",
+14
View File
@@ -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) {
+13 -1
View File
@@ -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": {
+105 -16
View File
@@ -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 {
}
`;
+39
View File
@@ -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);
}
+2
View File
@@ -139,3 +139,5 @@ a:AFTER {
::-WEBKIT-PROGRESS-BAR {
background-color: orange;
}
TABLE {}
+2
View File
@@ -141,3 +141,5 @@ a:AFTER {
::-WEBKIT-PROGRESS-BAR {
background-color: orange;
}
TABLE {}
@@ -689,7 +689,7 @@ svg|a {
*|a {
}
|B {
|b {
}
ns|* {
+4
View File
@@ -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"