feat(css): lowercase html tags (#3954)
parent
11a8d586b8
commit
17c0f9bfe1
|
@ -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",
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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 {
|
||||
}
|
||||
|
||||
`;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -139,3 +139,5 @@ a:AFTER {
|
|||
::-WEBKIT-PROGRESS-BAR {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
TABLE {}
|
||||
|
|
|
@ -141,3 +141,5 @@ a:AFTER {
|
|||
::-WEBKIT-PROGRESS-BAR {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
TABLE {}
|
||||
|
|
|
@ -689,7 +689,7 @@ svg|a {
|
|||
*|a {
|
||||
}
|
||||
|
||||
|B {
|
||||
|b {
|
||||
}
|
||||
|
||||
ns|* {
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue