For testing Stylus' CSSLint

test.css

@-moz-document url("example.com") {
/* https://github.com/CSSLint/csslint/issues/723 */
:focus {
  outline: 1px none;
}
:focus {
  outline: 0 red;
}
:focus {
  outline: 1px solid transparent;
}
/* https://github.com/CSSLint/csslint/issues/721; https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip */
p {
  text-decoration-skip: edges;
  position: sticky; /* https://github.com/CSSLint/csslint/issues/719 */
  position: -webkit-sticky;
  color: rebeccapurple; /* https://github.com/CSSLint/csslint/issues/717 */
}
:root{ --nvctheme-color: #3f1a67; --nvcthemelight-color: #5f259e; } /* https://github.com/CSSLint/csslint/issues/720 */
.parent input { border-image-repeat: initial; } /* https://github.com/CSSLint/csslint/issues/718 */

/* https://github.com/CSSLint/csslint/issues/715 */
.slideTwo label {
  background: #fcfff4;
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* FF3.6+ */
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* IE10+ */
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* Opera 11.10+ */
  background: -webkit-gradient(linear, top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* Chrome10+,Safari5.1+ */
  border-radius: 50px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: block;
  height: 22px;
  left: 4px;
  position: absolute;
  top: 4px;
  transition: all 0.4s ease;
  width: 22px;
  z-index: 1;
  -moz-webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}

/* https://github.com/CSSLint/csslint/issues/714 */
img { width: auto; }
img { width: 100%; }

/* https://github.com/CSSLint/csslint/issues/713 */
/* https://css-tricks.com/almanac/properties/a/appearance/#article-header-id-0 */
#test {
  -webkit-appearance: button-bevel;
  -webkit-appearance: button;
  -webkit-appearance: caret;
  -webkit-appearance: checkbox;
  -webkit-appearance: listbox;
  -webkit-appearance: listitem;
  -webkit-appearance: menulist-button;
  -webkit-appearance: menulist-text;
  -webkit-appearance: menulist-textfield;
  -webkit-appearance: menulist;
  -webkit-appearance: push-button;
  -webkit-appearance: radio;
  -webkit-appearance: scrollbarbutton-down;
  -webkit-appearance: scrollbarbutton-left;
  -webkit-appearance: scrollbarbutton-right;
  -webkit-appearance: scrollbarbutton-up;
  -webkit-appearance: scrollbargripper-horizontal;
  -webkit-appearance: scrollbargripper-vertical;
  -webkit-appearance: scrollbarthumb-horizontal;
  -webkit-appearance: scrollbarthumb-vertical;
  -webkit-appearance: scrollbartrack-horizontal;
  -webkit-appearance: scrollbartrack-vertical;
  -webkit-appearance: searchfield-cancel-button;
  -webkit-appearance: searchfield-decoration;
  -webkit-appearance: searchfield-results-button;
  -webkit-appearance: searchfield-results-decoration;
  -webkit-appearance: searchfield;
  -webkit-appearance: slider-horizontal;
  -webkit-appearance: slider-vertical;
  -webkit-appearance: sliderthumb-horizontal;
  -webkit-appearance: sliderthumb-vertical;
  -webkit-appearance: square-button;
  -webkit-appearance: textarea;
  -webkit-appearance: textfield;
}

/* https://css-tricks.com/almanac/properties/a/appearance/#article-header-id-1 */
#test2 {
  -moz-appearance: -moz-mac-unified-toolbar;
  -moz-appearance: -moz-win-borderless-glass;
  -moz-appearance: -moz-win-browsertabbar-toolbox;
  -moz-appearance: -moz-win-communications-toolbox;
  -moz-appearance: -moz-win-glass;
  -moz-appearance: -moz-win-media-toolbox;
  -moz-appearance: button;
  -moz-appearance: checkbox;
  -moz-appearance: checkbox-container;
  -moz-appearance: listbox;
  -moz-appearance: menuitem;
  -moz-appearance: menulist;
  -moz-appearance: menulist-button;
  -moz-appearance: menulist-textfield;
  -moz-appearance: menupopup;
  -moz-appearance: none;
  -moz-appearance: progressbar;
  -moz-appearance: radio;
  -moz-appearance: radio-container;
  -moz-appearance: resizer;
  -moz-appearance: scrollbarbutton-down;
  -moz-appearance: scrollbarbutton-left;
  -moz-appearance: scrollbarbutton-right;
  -moz-appearance: scrollbarbutton-up;
  -moz-appearance: scrollbartrack-horizontal;
  -moz-appearance: scrollbartrack-vertical;
  -moz-appearance: separator;
  -moz-appearance: statusbar;
  -moz-appearance: tab;
  -moz-appearance: tabpanels;
  -moz-appearance: textfield;
  -moz-appearance: textfield-multiline;
  -moz-appearance: toolbar;
  -moz-appearance: toolbarbutton;
  -moz-appearance: toolbox;
  -moz-appearance: tooltip;
  -moz-appearance: treeheadercell;
  -moz-appearance: treeheadersortarrow;
  -moz-appearance: treeitem;
  -moz-appearance: treetwisty;
  -moz-appearance: treetwistyopen;
  -moz-appearance: treeview;
}

/* https://github.com/CSSLint/csslint/issues/706 */
@-webkit-keyframes todo {
  0% {
    -webkit-transform: scaleZ(1);
    box-shadow: 0 0 4px rgba(0,0,0,.15);
    opacity: 0;
  }
}

/* https://github.com/CSSLint/csslint/issues/696 */
input[type="radio"]:not(:checked) ~ :-moz-any(p, select, input) { color: red; }

/* https://github.com/CSSLint/csslint/issues/691 */
.wrap { grid-template-columns: 1fr 1fr 1fr; }

/* https://github.com/CSSLint/csslint/issues/682 */
:root {
  --fit: {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
  }
}

.container {
  @apply --fit;
}

/* https://github.com/CSSLint/csslint/issues/650 */
.gray-text-block::after {content:"/f086";}

}

test2.css

@-moz-document url("example.com") {
:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);

  /* Valid CSS custom properties can be reused later in, say, JavaScript. */
  --foo: if(x > 5) this.width = 10;
}

:root{
  --indent-size: 10px;

  --indent-xl: calc(2*var(--indent-size));
  --indent-l: calc(var(--indent-size) + 2px);
  --indent-s: calc(var(--indent-size) - 2px);
  --indent-xs: calc(var(--indent-size)/2);
}

:root{
  --spacer: 10;
}

.box{
  padding: calc(var(--spacer)*1px) 0; /* WORKS */
}

.my-wonderful-clean-component {
  --: initial; /* reset all CSS custom properties (NOT SUPPORTED YET) */
  all: initial; /* reset all other CSS styles */
}

.test {
  --box-shadow-color: yellow;
  box-shadow: 0 0 30px var(--box-shadow-color);
}

.test:hover {
  --box-shadow-color: orange;
  /* Instead of: box-shadow: 0 0 30px orange; */
}

#world{
  --translateZ:0;
  --rotateX:65;
  --rotateY:0;

  transform-style:preserve-3d;
  transform:
    translateZ(calc(var(--translateZ) * 1px))
    rotateX(calc(var(--rotateX) * 1deg))
    rotateY(calc(var(--rotateY) * 1deg));
}

@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Quantum_CSS_notes */
div {
  width: calc(1*2*3);
}

}