prettier/tests/css_case/__snapshots__/jsfmt.spec.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`case.css 1`] = `
====================================options=====================================
parsers: ["css"]
printWidth: 80
                                                                                | printWidth
=====================================input======================================
@custom-media --KeepName (MIN-WIDTH: 500PX);

.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 {}

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

=====================================output=====================================
@custom-media --KeepName (min-width: 500px);

.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 {
}

/* 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`] = `
====================================options=====================================
parsers: ["css"]
printWidth: 80
                                                                                | printWidth
=====================================input======================================
// 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();

    &: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%);
}

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

=====================================output=====================================
// 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();

  &: 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%);
}

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

================================================================================
`;

exports[`case.scss 1`] = `
====================================options=====================================
parsers: ["css"]
printWidth: 80
                                                                                | printWidth
=====================================input======================================
// 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 {} }

=====================================output=====================================
// 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%);
}

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

================================================================================
`;

exports[`custom-selectors.css 1`] = `
====================================options=====================================
parsers: ["css"]
printWidth: 80
                                                                                | printWidth
=====================================input======================================
@custom-selector :--camelCase .my-css-selector;

:--camelCase {
  content: red;
}

=====================================output=====================================
@custom-selector :--camelCase .my-css-selector;

:--camelCase {
  content: red;
}

================================================================================
`;