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';
}

My best guess:

err-what.css:

@media screen {
  /* This a fixture to be imported */

  .foo {
    bar: 'baz';
  }
}
@media print {
  /* This a fixture to be imported */

  .foo {
    bar: 'baz';
  }
}

Late to the party:

Syntax error, only allow @import statements at the start of the file or in an @media block

mass media:

Syntax error, @import statements must be at the top of any @media block

Overhyped:

I'm really not sure about this one???

Repeated:

Only import the same file once, ignore multiple imports

/* This a fixture to be imported */

.foo {
  bar: 'baz';
}
.bar {
  bing: 'bong';
}

Simple:

/* This a fixture to be imported */

.foo {
  bar: 'baz';
}
.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'.