err-what.css

@import "./fixture.css" screen;
@import "./fixture.css" print;

fixture.css

/* This a fixture to be imported */

.foo {
  bar: 'baz';
}

Inline This.md

You're challenge, should you choose to accept it, is to inline the following @import statements in CSS. What should the result be. "SyntaxError" is a perfectly acceptable answer. If anyone knows what the current spec does, I'd be interested to know, but I'm equally keen to find out what people think the spec should do.

Please place the results of inlining @import statements in each file (except fixture.css) in the comments. Your help is appreciated, and if I meet you in a bar some time, I owe you a pint.

late-to-the-party.css

.bar {
  bing: 'bong';
}

@import "./fixture.css";

mass-media.css

@media screen {
  .bar {
    bing: 'bong';
  }
  @import "./fixture.css";
}

media-studies.css

@media screen {
  @import "./fixture.css";
}

overhyped.css

.bar {
  bing: 'bong';
}
@media screen {
  @import "./fixture.css";
}

repeated.css

@import "./fixture.css";
@import "./fixture.css";

.bar {
  bing: 'bong';
}

simple.css

@import "./fixture.css";

.bar {
  bing: 'bong';
}

I've made some progress. According to MDN, it's a syntax error unless they're at the top of the document (which keeps things nice and simple). @visionmedia has suggested just doing a simple include might be best (i.e. replace @import 'foo'; with the contents of 'foo'.