testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Don't lowercase element names and attribute names in selectors (#3317)

Browse Source 
* Don't lowercase element names and attribute names in selectors

https://www.w3.org/TR/css3-selectors/#casesens

> All Selectors syntax is case-insensitive within the ASCII range (i.e.
> [a-z] and [A-Z] are equivalent), except for parts that are not under the
> control of Selectors. The case sensitivity of document language element
> names, attribute names, and attribute values in selectors depends on the
> document language. For example, in HTML, element names are
> case-insensitive, but in XML, they are case-sensitive.

Fixes #3304.

* Fix number normalization in selector interpolation
This commit is contained in:
Simon Lydell authored and GitHub committed 2017-11-27 13:28:03 +01:00
1 parent 2dd76c6a95
commit 56951a71b4
6 files changed
+54 -50
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/clean-ast.js
+2 -5
View File
@@ -88,7 +88,6 @@ function massageAST(ast, parent) {
(ast.type === "value-word" && ast.isColor && ast.isHex) ||
ast.type === "media-feature" ||
ast.type === "selector-root-invalid" ||
ast.type === "selector-tag" ||
ast.type === "selector-pseudo"
) {
newObj.value = newObj.value.toLowerCase();
@@ -99,9 +98,6 @@ function massageAST(ast, parent) {
if (ast.type === "css-atrule" || ast.type === "css-import") {
newObj.name = newObj.name.toLowerCase();
}
if (ast.type === "selector-attribute") {
newObj.attribute = newObj.attribute.toLowerCase();
}
if (ast.type === "value-number") {
newObj.unit = newObj.unit.toLowerCase();
}
@@ -139,7 +135,8 @@ function massageAST(ast, parent) {
ast.type === "value-number" ||
ast.type === "selector-root-invalid" ||
ast.type === "selector-class" ||
ast.type === "selector-combinator") &&
ast.type === "selector-combinator" ||
ast.type === "selector-tag") &&
newObj.value
) {
newObj.value = newObj.value.replace(
src/printer-postcss.js
+2 -7
View File
@@ -222,12 +222,7 @@ function genericPrint(path, options, print) {
return adjustStrings(n.value, options);
}
case "selector-tag": {
const parent = path.getParentNode();
const index = parent.nodes.indexOf(n);
const previous = index > 0 ? parent.nodes[index - 1] : null;
return previous && previous.type === "selector-nesting"
? n.value
: maybeToLowerCase(n.value);
return adjustNumbers(n.value);
}
case "selector-id": {
return concat(["#", n.value]);
@@ -238,7 +233,7 @@ function genericPrint(path, options, print) {
case "selector-attribute": {
return concat([
"[",
maybeToLowerCase(n.attribute),
n.attribute,
n.operator ? n.operator : "",
n.value
? quoteAttributeValue(adjustStrings(n.value, options), options)
tests/css_case/__snapshots__/jsfmt.spec.js.snap
+33 -25
View File
@@ -3,7 +3,8 @@
exports[`case.less 1`] = `
// Convention in this test file:
// - The case should be preserved for things prefixed with "Keep".
// - The case should always be preserved for function names and property keywords.
// - The case should always be preserved for element names and attribute names
// in selectors, as well as function names and property keywords.
// - Other things should mostly be lowercase.
// - The \`/*:*/\` comments are just to bust the \`isLikelySCSS\` check.
@@ -11,6 +12,7 @@ exports[`case.less 1`] = `
HTML#KeepId.KeepClass,
a[HREF=KeepAttrValue]:HOVER::FIRST-letter,
svg[viewBox] linearGradient,
:Not(:NTH-child(2N+1)) {
COLOR: #AAbbCC;
BACKGROUND-image: URL("KeepString");
@@ -49,7 +51,7 @@ a[HREF=KeepAttrValue]:HOVER::FIRST-letter,
@KeepTopLevelVar: val;
$KeepScssVar: val;
.Keep(@Keep: 12e03PX) WHEN (@Keep=Case) /*:*/ {
.Keep(@Keep: 12e03PX) when (@Keep=Case) /*:*/ {
@KeepVar: KeepName; /*:*/
@{KeepInterpolationVar}: val;
$KeepScssVar: val;
@@ -59,7 +61,7 @@ $KeepScssVar: val;
prop: val;
}
&Keep & NoKeep {
&Keep & Element {
prop: val;
}
@@ -71,14 +73,14 @@ $KeepScssVar: val;
.Keep;
.Keep();
.Keep(4PX)!IMPORTANT;
.Keep() WHEN (@Keep=Keep);
.Keep() WHEN (@Keep=12PX);
.Keep() WHEN (@Keep=Keep12PX);
.Keep() when (@Keep=Keep);
.Keep() when (@Keep=12PX);
.Keep() when (@Keep=Keep12PX);
}
.Keep (@Keep) WHEN (lightness(@Keep) >= 12PX) AND (@Keep > 0) {}
.Keep (@Keep) WHEN (lightness(@Keep) != '12PX') AND (@Keep != "12PX") {}
.Keep (@Keep) WHEN (lightness(@Keep) >= Keep12PX) AND (@Keep > @Keep12E5) {}
.Keep (@Keep) when (lightness(@Keep) >= 12PX) and (@Keep > 0) {}
.Keep (@Keep) when (lightness(@Keep) != '12PX') and (@Keep != "12PX") {}
.Keep (@Keep) when (lightness(@Keep) >= Keep12PX) and (@Keep > @Keep12E5) {}
.Keep(@Keep: 12PX; @Keep: @Keep12PX; ...) /*:*/ {}
.Keep(@Keep: '12PX'; @Keep: "12PX"; ...) /*:*/ {}
@@ -89,14 +91,16 @@ $KeepScssVar: val;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Convention in this test file:
// - The case should be preserved for things prefixed with "Keep".
// - The case should always be preserved for function names and property keywords.
// - The case should always be preserved for element names and attribute names
// in selectors, as well as function names and property keywords.
// - Other things should mostly be lowercase.
// - The \`/*:*/\` comments are just to bust the \`isLikelySCSS\` check.
@import Keep;
html#KeepId.KeepClass,
a[href="KeepAttrValue"]:hover::first-letter,
HTML#KeepId.KeepClass,
a[HREF="KeepAttrValue"]:hover::first-letter,
svg[viewBox] linearGradient,
:not(:nth-child(2n + 1)) {
color: #aabbcc;
background-image: URL("KeepString");
@@ -108,7 +112,7 @@ a[href="KeepAttrValue"]:hover::first-letter,
}
@keyframes KeepAnimationName {
from {
FROM {
prop: val;
}
@@ -116,7 +120,7 @@ a[href="KeepAttrValue"]:hover::first-letter,
prop: val;
}
to {
TO {
prop: val;
}
}
@@ -146,7 +150,7 @@ $KeepScssVar: val;
prop: val;
}
&Keep & nokeep {
&Keep & Element {
prop: val;
}
@@ -186,13 +190,15 @@ $KeepScssVar: val;
exports[`case.scss 1`] = `
// Convention in this test file:
// - The case should be preserved for things prefixed with "Keep".
// - The case should always be preserved for function names and property keywords.
// - The case should always be preserved for element names and attribute names
// in selectors, as well as function names and property keywords.
// - Other things should mostly be lowercase.
@IMPORT Keep;
HTML#KeepId.KeepClass,
a[HREF=KeepAttrValue]:HOVER::FIRST-letter,
svg[viewBox] linearGradient,
:Not(:NTH-child(2N+1)) {
COLOR: #AAbbCC;
BACKGROUND-image: URL("KeepString");
@@ -209,7 +215,7 @@ a[HREF=KeepAttrValue]:HOVER::FIRST-letter,
}
#{$KeepInterpolationVar},
#{$Keep + 15PX},
#{$Keep + 15PX + Keep15PX + '15PX' + "15PX"},
#{$Keep + $Keep15PX} {
prop: val;
}
@@ -245,7 +251,7 @@ $KeepTopLevelVar: val;
prop: val;
}
&Keep & NoKeep {
&Keep & Element {
prop: val;
}
@@ -274,13 +280,15 @@ $KeepTopLevelVar: val;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Convention in this test file:
// - The case should be preserved for things prefixed with "Keep".
// - The case should always be preserved for function names and property keywords.
// - The case should always be preserved for element names and attribute names
// in selectors, as well as function names and property keywords.
// - Other things should mostly be lowercase.
@import Keep;
html#KeepId.KeepClass,
a[href="KeepAttrValue"]:hover::first-letter,
HTML#KeepId.KeepClass,
a[HREF="KeepAttrValue"]:hover::first-letter,
svg[viewBox] linearGradient,
:not(:nth-child(2n + 1)) {
color: #aabbcc;
background-image: URL("KeepString");
@@ -292,17 +300,17 @@ a[href="KeepAttrValue"]:hover::first-letter,
}
@keyframes KeepAnimationName {
from {
FROM {
prop: val;
}
#{$KeepInterpolationVar},
#{$Keep + 15px},
#{$Keep + 15px + Keep15PX + "15PX" + "15PX"},
#{$Keep + $Keep15PX} {
prop: val;
}
to {
TO {
prop: val;
}
}
@@ -334,7 +342,7 @@ $KeepTopLevelVar: val;
prop: val;
}
&Keep & nokeep {
&Keep & Element {
prop: val;
}
tests/css_case/case.less
+11 -9
View File
@@ -1,6 +1,7 @@
// Convention in this test file:
// - The case should be preserved for things prefixed with "Keep".
// - The case should always be preserved for function names and property keywords.
// - The case should always be preserved for element names and attribute names
// in selectors, as well as function names and property keywords.
// - Other things should mostly be lowercase.
// - The `/*:*/` comments are just to bust the `isLikelySCSS` check.
@@ -8,6 +9,7 @@
HTML#KeepId.KeepClass,
a[HREF=KeepAttrValue]:HOVER::FIRST-letter,
svg[viewBox] linearGradient,
:Not(:NTH-child(2N+1)) {
COLOR: #AAbbCC;
BACKGROUND-image: URL("KeepString");
@@ -46,7 +48,7 @@ a[HREF=KeepAttrValue]:HOVER::FIRST-letter,
@KeepTopLevelVar: val;
$KeepScssVar: val;
.Keep(@Keep: 12e03PX) WHEN (@Keep=Case) /*:*/ {
.Keep(@Keep: 12e03PX) when (@Keep=Case) /*:*/ {
@KeepVar: KeepName; /*:*/
@{KeepInterpolationVar}: val;
$KeepScssVar: val;
@@ -56,7 +58,7 @@ $KeepScssVar: val;
prop: val;
}
&Keep & NoKeep {
&Keep & Element {
prop: val;
}
@@ -68,14 +70,14 @@ $KeepScssVar: val;
.Keep;
.Keep();
.Keep(4PX)!IMPORTANT;
.Keep() WHEN (@Keep=Keep);
.Keep() WHEN (@Keep=12PX);
.Keep() WHEN (@Keep=Keep12PX);
.Keep() when (@Keep=Keep);
.Keep() when (@Keep=12PX);
.Keep() when (@Keep=Keep12PX);
}
.Keep (@Keep) WHEN (lightness(@Keep) >= 12PX) AND (@Keep > 0) {}
.Keep (@Keep) WHEN (lightness(@Keep) != '12PX') AND (@Keep != "12PX") {}
.Keep (@Keep) WHEN (lightness(@Keep) >= Keep12PX) AND (@Keep > @Keep12E5) {}
.Keep (@Keep) when (lightness(@Keep) >= 12PX) and (@Keep > 0) {}
.Keep (@Keep) when (lightness(@Keep) != '12PX') and (@Keep != "12PX") {}
.Keep (@Keep) when (lightness(@Keep) >= Keep12PX) and (@Keep > @Keep12E5) {}
.Keep(@Keep: 12PX; @Keep: @Keep12PX; ...) /*:*/ {}
.Keep(@Keep: '12PX'; @Keep: "12PX"; ...) /*:*/ {}
tests/css_case/case.scss
+5 -3
View File
@@ -1,12 +1,14 @@
// Convention in this test file:
// - The case should be preserved for things prefixed with "Keep".
// - The case should always be preserved for function names and property keywords.
// - The case should always be preserved for element names and attribute names
// in selectors, as well as function names and property keywords.
// - Other things should mostly be lowercase.
@IMPORT Keep;
HTML#KeepId.KeepClass,
a[HREF=KeepAttrValue]:HOVER::FIRST-letter,
svg[viewBox] linearGradient,
:Not(:NTH-child(2N+1)) {
COLOR: #AAbbCC;
BACKGROUND-image: URL("KeepString");
@@ -23,7 +25,7 @@ a[HREF=KeepAttrValue]:HOVER::FIRST-letter,
}
#{$KeepInterpolationVar},
#{$Keep + 15PX},
#{$Keep + 15PX + Keep15PX + '15PX' + "15PX"},
#{$Keep + $Keep15PX} {
prop: val;
}
@@ -59,7 +61,7 @@ $KeepTopLevelVar: val;
prop: val;
}
&Keep & NoKeep {
&Keep & Element {
prop: val;
}
tests/css_combinator/__snapshots__/jsfmt.spec.js.snap
+1 -1
View File
@@ -13,7 +13,7 @@ exports[`combinator.css 1`] = `
.x
.y {}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-option/root .public/section ~ .public/section:before {
-Option/root .public/section ~ .public/section:before {
}
.x .y {