url.css

@import "./imported.css";

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

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

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

.class {
  background: url("./img.png#hash");
}

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

.class {
  background: green url( './img.png' ) xyz;
}

.class {
  background: green url( "./img.png" ) xyz;
}

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

.class {
  background: green url(~package/img.png) url(./other-img.png) xyz;
}

.class {
  background: green url( "./img img.png" ) xyz;
}

.class {
  background: green url( './img img.png' ) xyz;
}

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

.class {
  background: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) xyz;
}

.class {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>");
}

.class {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%2523007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E");
}

.class {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="2" result="offsetblur" /><feFlood flood-color="rgba(255,255,255,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
}

.class {
  filter: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%5C%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%5C%22%3E%3Cfilter%20id%3D%5C%22filter%5C%22%3E%3CfeGaussianBlur%20in%3D%5C%22SourceAlpha%5C%22%20stdDeviation%3D%5C%220%5C%22%20%2F%3E%3CfeOffset%20dx%3D%5C%221%5C%22%20dy%3D%5C%222%5C%22%20result%3D%5C%22offsetblur%5C%22%20%2F%3E%3CfeFlood%20flood-color%3D%5C%22rgba(255%2C255%2C255%2C1)%5C%22%20%2F%3E%3CfeComposite%20in2%3D%5C%22offsetblur%5C%22%20operator%3D%5C%22in%5C%22%20%2F%3E%3CfeMerge%3E%3CfeMergeNode%20%2F%3E%3CfeMergeNode%20in%3D%5C%22SourceGraphic%5C%22%20%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fsvg%3E%23filter');
}

.highlight {
  filter: url(#highlight);
}

.highlight {
  filter: url('#line-marker');
}

@font-face {
  src: url(./font.woff) format('woff'),
    url('./font.woff2') format('woff2'),
    url("./font.eot") format('eot'),
    url(~package/font.ttf) format('truetype'),
    url("./font with spaces.eot") format("embedded-opentype"),
    url('./font.svg#svgFontName') format('svg'),
    url('./font.woff2?foo=bar') format('woff2'),
    url("./font.eot?#iefix") format('embedded-opentype'),
    url("./font with spaces.eot?#iefix") format('embedded-opentype');
}

@media (min-width: 500px) {
  body {
    background: url("./img.png");
  }
}

a {
  content: "do not use url(path)";
}

b {
  content: 'do not "use" url(path)';
}

@keyframes anim {
  background: green url('./img.png') xyz;
}

.a {
  background-image: -webkit-image-set(url('./img1x.png') 1x, url('./img2x.png') 2x)
}

.a {
  background-image: image-set(url('./img1x.png') 1x, url('./img2x.png') 2x)
}

.class {
  background: green url() xyz;
}

.class {
  background: green url('') xyz;
}

.class {
  background: green url("") xyz;
}

.class {
  background: green url('   ') xyz;
}

.class {
  background: green url(
  ) xyz;
}

.class {
  background: green url(https://raw.githubusercontent.com/webpack/media/master/logo/icon.png) xyz;
}

.class {
  background: green url(//raw.githubusercontent.com/webpack/media/master/logo/icon.png) xyz;
}

.class {
  background: url("./img.png?foo");
}

.class {
  background: url("./img.png?foo=bar");
}

.class {
  background: url("./img.png?foo=bar#hash");
}

.class {
  background: url("./img.png?foo=bar#hash");
}

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

.class {
  background-image: url('./img.png') url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>") url('./img.png');
}

.class {
  background: ___CSS_LOADER_URL___;
  background: ___CSS_LOADER_URL___INDEX___;
  background: ___CSS_LOADER_URL___99999___;
  background: ___CSS_LOADER_IMPORT___;
  background: ___CSS_LOADER_IMPORT___INDEX___;
  background: ___CSS_LOADER_IMPORT___99999___;
}

.pure-url {
  background: url('img-simple.png');
}

.not-resolved {
  background: url('/img-simple.png');
}

.above-below {
  background: url('../url/img-simple.png');
}

.tilde {
  background: url('~package/img.png');
}

.aliases {
  background: url('~aliasesImg/img.png') ;
}