prettier/tests/css_case/case.scss

148 lines
2.6 KiB
SCSS

// Convention in this test file:
// - The case should be preserved for things prefixed with "Keep".
// - 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");
Margin: 5PX .2E10Em;
--Keep-custom-Prop: red;
background: Var(--Keep-custom-Prop);
animation-name: KeepAnimationName;
important: something !IMPORTANT;
font-family: INITIAL;
padding: UNSET;
border: INHERIT;
all: REVERT;
-WEBKIT-USER-SELECT: none;
-MOZ-USER-SELECT: none;
-MS-USER-SELECT: none;
USER-SELECT: none;
}
@keyframes KeepAnimationName {
FROM {
prop: val;
}
#{$KeepInterpolationVar},
#{$Keep + 15PX + Keep15PX + '15PX' + "15PX"},
#{$Keep + $Keep15PX} {
prop: val;
}
TO {
prop: val;
}
}
@custom-media --KeepCustomMedia screen and (width >= 768px);
@media (--KeepCustomMedia) {}
@function KeepFuncName() {
@return 12;
}
%KeepPlaceholderSelector {
prop: val;
}
$KeepTopLevelVar: val;
@KeepLessVar: val;
@mixin KeepMixinName($Keep: 15IN, $Keep: $Keep15IN, $Keep: Keep-1E-2Em) {
$KeepVar: KeepFuncName();
#{$KeepInterpolationVar}: val;
#{$Keep + 15PX}: val;
#{$Keep + $Keep15PX}: val;
@KeepLessVar: val;
@extend %KeepPlaceholderSelector;
#{$Keep}[#{$Keep}][#{Keep}^=#{Keep-1A}]:#{$Keep} {
prop: val;
}
&Keep & Element {
prop: val;
}
BACKGROUND: {
COLOR: RED;
}
BACKGROUND: Keep 15PX Keep15PX {
COLOR: RED;
}
#{$Keep + 15PX + Keep15PX + '15PX' + "15PX"}: {
COLOR: RED;
}
}
@mixin Keep($Keep: $Keep15IN, $Keep: Keepå1E1) {}
@MEDIA (MIN-WIDTH: 700PX) {
@include Keep;
@include Keep(.12e+01cH);
@include Keep($Keep12E01cH);
}
@MEDIA (#{$Keep}: #{$Keep}) {}
@KEYFRAMES identifier {
FROM {
margin-top: 50px;
}
50% {
margin-top: 150px;
}
TO {
margin-top: 100px;
}
}
@-WEBKIT-KEYFRAMES float-up {
FROM {
margin-top: 50px;
}
50% {
margin-top: 150px;
}
TO {
margin-top: 100px;
}
}
.foo {
color: hsl(0.75TURN, 60%, 70%);
}
p:FIRST-CHILD {
color: lime;
background-color: black;
padding: 5px;
}
a::AFTER {
content: "";
}
a:AFTER {
content: "";
}
::-WEBKIT-PROGRESS-BAR {
background-color: orange;
}
TABLE {}
.foo { &-KeepSelector {} &-KeepSelector & .KeepClassSelector {} &-100\.200 {} }