CSSのパーズと構築 (Gauche ユーザリファレンス)

12.96 `www.css` - CSSのパーズと構築

Module: www.css ¶

このモジュールはS式とCSSを相互変換するツールを提供します。

S式CSS(SxCSS)はCSSをSchemeから操作するのに便利な方法です。

例えば、次のCSSとSxCSSは等価で、相互に変換可能です。

CSS:

body { padding-left: 11em;
       font-family: Georgia, "Times New Roman", Times, serif;
       color: purple;
       background-color: #d8da3d }
ul.navbar li { background: white;
               margin: 0.5em 0;
               padding: 0.3em;
               border-right: 1em solid black }
ul#spec > a { text-decoration: none }
a:visited { color: purple !important }

SxCSS:

((style-rule body
   (padding-left (11 em))
   (font-family (:or Georgia "Times New Roman" Times serif))
   (color purple)
   (background-color (color "d8da3d")))
 (style-rule ((ul (class navbar)) li)
   (background white)
   (margin #((0.5 em) 0))
   (padding (0.3 em))
   (border-right #((1 em) solid black)))
 (style-rule ((ul (id spec)) > a) (text-decoration none))
 (style-rule (a (: visited)) (color purple !important)))

完全な仕様については下の “S式CSS” を参照してください。

CSSの構築

Function: construct-css sxcss :optional oport ¶: {www.css} SxCSSを取り、与えられたポートにCSSを書き出します。oportのデフォルトは現在の出力ポートです。

CSSのパーズ

Function: parse-css :optional iport ¶

{www.css} CSSを与えられたポートから読み、SxCSSを返します。iportのデフォルトは現在の入力ポートです。

パーズできないCSS (不正なCSSか、サポートされていない構文) に出会った場合、 warningメッセージを出力してその箇所を飛ばし、次にパーズできるところから処理を続けます。

註：今のところ、@charsetディレクティブは無視され、入力テキストはポートのエンコーディングであると仮定されます。将来は対応するかもしれません。

Function: parse-css-file file :key encoding ¶: {www.css} 与えられたファイルからCSSを読み、parse-cssを使ってパーズして結果をSxCSSで返します。@charsetディレクティブはまだ認識されないので、 CSSファイルがGaucheのネイティブエンコーディングと異なるエンコーディングで書かれている場合は、encodingにエンコーディング名を渡してください。

Function: parse-css-selector-string str ¶

{www.css} CSSのセレクター部分をパーズするユーティリティです。

(parse-css-selector-string "ul li.item span#foo")
  ⇒ (ul (li (class item)) (span (id foo)))

(parse-css-selector-string "h1,h2")
  ⇒ (:or h1 h2)

S式CSS

完全なSxCSSの構文規則を以下に示します。

<sxcss>      : ({<style-rule> | <at-rule>} ...)

<style-rule> : (style-rule <pattern> <declaration> ...)
             | (style-decls <declaration> ...)

<pattern>   : <selector> | (:or <selector> ...)
<selector>  : <simple-selector>
            | <chained-selector>
<chained-selector> : (<simple-selector> . (<op>? . <chained-selector>))
<op>        : > | + | ~
<simple-selector> : <element-name>
            | (<element-name> <option> ...)
<option>    : (id <name>)                           ; E#id
            | (class <ident>)                       ; E.class
            | (has <ident>)                         ; E[attrib]
            | (= <ident> <attrib-value>)            ; E[attrib=val]
            | (~= <ident> <attrib-value>)           ; E[attrib~=val]
            | (:= <ident> <attrib-value>)           ; E[attrib|=val]
            | (*= <ident> <attrib-value>)           ; E[attrib*=val]
            | (^= <ident> <attrib-value>)           ; E[attrib^=val]
            | ($= <ident> <attrib-value>)           ; E[attrib$=val]
            | (:not <negation-arg>)                 ; E:not(s)
            | (: <ident>)                           ; E:pseudo-class
            | (: (<fn> <ident> ...))                ; E:pseudo-class(arg)
            | (:: <ident>)                          ; E::pseudo-element
<element-name> : <ident> | *
<attrib-value> : <ident> | <string>
<negation-arg> | <element-name> | * | <option>  ; except <negation-arg>

<declaration>  : (<ident> <expr> <expr2> ... <important>?)
<important> : !important
<expr>      : <term>
            | (/ <term> <term> ...)
            | (:or <term> <term> ...)
            | #(<term> <term> ...)             ; juxtaposition
<term>      : <quantity> | (- <quantity>) | (+ <quantity>)
            | <string> | <ident> | <url> | <hexcolor> | <function>
<quantity>  : <number>
            | (<number> %)
            | (<number> <ident>)
<url>       | (url <string>)
<hexcolor>  | (color <string>)  ; <string> must be hexdigits
<function>  | (<fn> <arg> ...)
<arg>       | <term> | #(<term> ...) | (/ <term> <term> ...)

<at-rule>    : <at-media-rule> | <at-import-rule>
                   ; NB: Other at-rules are not supported yet
<at-media-rule>  : (@media (<symbol> ...) <style-rule> ...)
<at-import-rule> : (@import <string> (<symbol> ...))

註: 否定オペレータはnotではなく:notです。というのは、(not <negation-arg>)だと “not” と言う名前を持ち一つのオプションを持つノードと区別できないからです。

註: style-declsセレクタルールはparse-cssの出力には現れません。ドキュメントのstyle属性に渡すCSS断片を生成したい場合に、 (style-decls <declaration> ...)をconstruct-cssに渡します。

(with-output-to-string
 (cut construct-css
      '((style-decls (width (50 %))
                     (padding #(0 (10 pt) 0 (10 pt)))))))
  ⇒ "width:50%;padding:0 10pt 0 10pt"

12.96 www.css - CSSのパーズと構築

CSSの構築

CSSのパーズ

S式CSS

12.96 `www.css` - CSSのパーズと構築