// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`case.css 1`] = ` @custom-media --KeepName (MIN-WIDTH: 500PX); .foo { color: hsl(0.75TURN, 60%, 70%); } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @custom-media --KeepName (min-width: 500px); .foo { color: hsl(0.75turn, 60%, 70%); } `; 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 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, 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} { prop: val; } TO { prop: val; } } @custom-media --KeepCustomMedia screen and (width >= 768px); @media (--KeepCustomMedia) {} @KeepDetachedRuleset: /*:*/ { BACKGROUND: RED; } %KeepScssPlaceholderSelector { prop: val; } @KeepTopLevelVar: val; $KeepScssVar: val; .Keep(@Keep: 12e03PX) when (@Keep=Case) /*:*/ { @KeepVar: KeepName; /*:*/ @{KeepInterpolationVar}: val; $KeepScssVar: val; @extend %KeepScssPlaceholderSelector; @{Keep}[@{Keep}][@{Keep}^=@{Keep-1A}]:@{Keep} { prop: val; } &Keep & Element { prop: val; } @KeepDetachedRuleset(); @KeepDetachedRuleset ( /* comment */ ); &:EXTEND(.Keep ALL); .Keep; .Keep(); .Keep(4PX)!IMPORTANT; .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: 12PX; @Keep: @Keep12PX; ...) /*:*/ {} .Keep(@Keep: '12PX'; @Keep: "12PX"; ...) /*:*/ {} @MEDIA (MIN-WIDTH: 700PX) /*:*/ {} @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%); } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // 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. // - The \`/*:*/\` comments are just to bust the \`isLikelySCSS\` check. @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 0.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} { prop: val; } TO { prop: val; } } @custom-media --KeepCustomMedia screen and (width >= 768px); @media (--KeepCustomMedia) { } @KeepDetachedRuleset: /*:*/ { background: RED; }; %KeepScssPlaceholderSelector { prop: val; } @KeepTopLevelVar: val; $KeepScssVar: val; .Keep(@Keep: 12e03PX) when (@Keep=Case) /*:*/ { @KeepVar: KeepName; /*:*/ @{KeepInterpolationVar}: val; $KeepScssVar: val; @extend %KeepScssPlaceholderSelector; @{Keep}[@{Keep}][@{Keep}^=@{Keep-1A}]:@{Keep} { prop: val; } &Keep & Element { prop: val; } @KeepDetachedRuleset(); @KeepDetachedRuleset(); &: EXTEND(.Keep ALL); .Keep; .Keep(); .Keep(4px) !important; .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: 12PX; @Keep: @Keep12PX; ...) /*:*/ { } .Keep(@Keep: '12PX'; @Keep: "12PX"; ...) /*:*/ { } @media (min-width: 700px) { } @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%); } `; 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 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%); } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // 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 0.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(0.12e1ch); @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%); } `;