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

master
Evilebot Tnawi 2018-02-13 18:41:55 +03:00 committed by GitHub
parent 11a8d586b8
commit 17c0f9bfe1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 181 additions and 18 deletions

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",

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) {

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": {

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 {
}
`;

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);
}

View File

@ -139,3 +139,5 @@ a:AFTER {
::-WEBKIT-PROGRESS-BAR {
background-color: orange;
}
TABLE {}

View File

@ -141,3 +141,5 @@ a:AFTER {
::-WEBKIT-PROGRESS-BAR {
background-color: orange;
}
TABLE {}

View File

@ -689,7 +689,7 @@ svg|a {
*|a {
}
|B {
|b {
}
ns|* {

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"