@importの文法

@importでは何の気なしにurl()を使わず書いていたんだけど、どんな時もそれで良いのかよく知らなかった。どうやら文字列で書くとそれをurl()で括ったように解釈してくれると仕様で決められているようだ。

ということで以下の7パターンはすべて同じように解釈される。

@import url(foo.css);
@import url("foo.css");
@import url('foo.css');
@import "foo.css";
@import 'foo.css';
@import"foo.css";
@import'foo.css';

CSSWringではurl()を外して二重引用符に統一し、直後の空白を削除することにした。

@import絡みではもうひとつちょっとよくわからないところがあって、@importだけのCSSの場合に最後のセミコロンが必要なのかどうかという点。現状の実装では省略しても読めるみたいだけど、仕様の文法では以下のようになっていて省略できないように読める。

import
  : IMPORT_SYM S*
    [STRING|URI] S* media_list? ';' S*

W3C CSS 検証サービスでも文法解析エラーになるので、省略できないことになっているということは意識はしておいた方が良さそう。