@import url(./test-other.css) (min-width: 100px);

@value v-def from './values\
\
.css';
@value v-other from './values.css';
@value v-other from './values.css';
@value s-white from './values.css';
@value m-small from './values.css';
@value v-something from './something.css';
@value v-foo: blue;
@value v-bar: block;
@value v-primary: #BF4040;
@value s-black: black-selector;
@value m-large: (min-width: 960px);

.ghi {
  color: v-def;
}

.my-class {
  color: v-foo;
}

.other {
  display: v-bar;
}

.other-other {
  width: v-something;
}

.green {
  color: v-other;
}

.foo {
  prop: v-def;
  duplicate: v-other;
}

.simple {
  color: red;
  composes: imported-simple from './imported-simple.css';
}

.relative {
  color: yellow;
  composes: imported-relative from './relative.css';
}

.top-relative {
  color: gray;
  composes: imported-relative from './top-relative.css';
}

.my-module {
  color: gray;
  composes: imported-module from '../issue-861/node_modules/package/style.css';
}

.alias {
  color: gainsboro;
  composes: imported-alias from '~aliasesComposes/alias.css';
}

.alias-duplicate {
  color: gainsboro;
  composes: imported-alias from './alias.css';
}

.primary-selector {
  color: v-primary;
}

.s-black {
  color: black;
}

@media m-large {
  .header {
    padding: 0 20px;
  }
}

.s-white {
  color: white;
}

@media m-small {
  .header {
    padding: 20px 20px;
  }
}

@value v-ident: validIdent;
@value v-pre-defined-ident: left;
@value v-string: 'content';
@value v-string-1: '';
@value v-url: url(https://www.exammple.com/images/my-background.png);
@value v-url-1: url('https://www.exammple.com/images/my-background.png');
@value v-url-2: url("https://www.exammple.com/images/my-background.png");
@value v-integer: 100;
@value v-integer-1: -100;
@value v-integer-2: +100;
@value v-number: .60;
@value v-number-1: -456.8;
@value v-number-2: -3.4e-2;
@value v-dimension: 12px;
@value v-percentage: 100%;
@value v-hex: #fff;
@value v-comment: /* comment */;
@value v-function: rgb(0,0,0);
@value v-unicode-range: U+0025-00FF;

.foobarbaz {
  v-ident: v-ident;
  v-pre-defined-ident: v-pre-defined-ident;
  v-string: v-string;
  v-string-1: v-string-1;
  v-url: v-url;
  v-url-1: v-url-1;
  v-url-2: v-url-2;
  v-integer: v-integer;
  v-integer-1: v-integer-1;
  v-integer-2: v-integer-2;
  v-number: v-number;
  v-number-1: v-number-1;
  v-number-2: v-number-2;
  v-dimension: v-dimension;
  v-percentage: v-percentage;
  v-hex: v-hex;
  v-comment: v-comment 10px v-comment;
  v-function: v-function;
  v-unicode-range: v-unicode-range;
  mutliple: v-hex v-number v-percentage;
}


a {
  content: v-string;
}

@supports (content: v-string) {
  a {
    content: v-string;
  }
}

[class~=v-string] {
  color:green;
}

.url {
  background: url(../../url/img.png);
}

.main {
  composes: scssClass from 'sass-loader!./scss-file.scss';
  background: red;
}