hail2u.net - Weblog - CSSのプロパティをソートするPerlスクリプト
本エントリ執筆時の最新スクリプト→sortcss.pl

いやぁ、ホントにこういうのを待ってました！
いつも自分の中で何となく、marginの次はpaddingでその次はborderで・・・とか書きながら、
決まった順番に簡単に並べ替えてくれるやつないかなぁと思ってたんですよねー。
（自分で作れよ、という話は置いといて）
これからはこのスクリプトを使って、仕様順に並んだスマートなcssを書いていきたいと思います。

さて、このお役立ちスクリプトはPerlで書かれています。
perl勉強中の身の僕としてはコードリーディングするっきゃないということで読んでみました。

あと、便利さを体感してもらうためにJavaScriptへの移植版も作ってみます。

それでは、久しぶりに長文エントリのはじまりはじまり。
※ エントリ書いてる途中に元のソースが何回か変わって
　　断念＆放置しかけたのは秘密です。

Perlを読む

それでは順に読んでいきましょう。

     1  #!/usr/bin/perl
     2  
     3  # Author:   Kyo Nagashima , http://hail2u.net/
     4  #           xaicron, http://blog.livedoor.jp/xaicron/
     5  # License:  MIT license (http://opensource.org/licenses/mit-license.php)
     6  # Modified: 2009-11-17T23:09:27+09:00

1〜6行目はshebang（インタプリタの指定）とスクリプトに関するコメントです。
ライセンス代わり（？）に引用しておきます。

     8	use strict;
     9	use warnings;

次も問題ないですね。
strictなスクリプトのお約束です。

    11  # CSS2.1
    12  my @property_order = qw(
    13  margin
	：
	：
   128  speak-header
   129  );

11〜129行目はCSS2.1のプロパティ一覧の配列を作成しています。
qw()は文字列リスト演算子といい、クォートとかを書かずにリストを簡単に作成できます。

   131  # CSS3 and vendor extension for CSS3 
   132  push @property_order, qw(
   133  background-clip
   	：
   	：
   364  -webkit-animation-delay
   365  );

   367  # Vendor extension
   368  push @property_order, qw(
   369  -moz-background-inline-policy
   	：
   	：
   469  -ms-zoom
   470  );

   472  # Other CSS extensions (without vendor prefix)
   473  push @property_order, qw(
   474  image-rendering
   475  ime-mode
   476  pointer-events
   477  text-rendering
   478  );

131〜478ではcss3やブラウザ拡張のプロパティをpush()でproperty_order配列に追加しています。

さて、ここからいよいよロジック部分に入りますので、
丁寧に見ていきます。

   480  # Create hash: key => property, value => index
   481  # See also: http://blog.livedoor.jp/xaicron/archives/50913074.html
   482  my %property = do {
   483        my $i = 0;
   484          map { $_ => $i++ } @property_order;
   485  };

480〜485では各プロパティと順序を対応づけたハッシュを作成しています。
と、これじゃコメントを和訳しただけか。

doブロックで囲んでるので最後の文の処理結果が変数に返ります。
で、その最後の文であるmapでは、
プロパティ配列の各要素を取り出してkeyに、
iをカウントアップしたもの（つまり、並び順）をvalueに持つハッシュを作成しています。

   487	my $css = join "", <STDIN>;

さて、そろそろぱっと見で何をしてるか理解できなくなってきました。
自分のperl能力の向上してなさに愕然とします。

とまぁ自虐はいいとして、487では標準入力の内容を一気に読み込んでます。
通常は1行ごとに読み込みますが、リストで評価してやれば全部読み込むということになってます。

つまり、こういうことですね↓

#!/usr/bin/perl

use strict;
use warnings;

# これだと一気に読んじゃって比較にならない。
# printはリストコンテキストで評価するので。
# print <STDIN>;

# 1行読み込み
#my $input = <STDIN>;

# 全部読み込み
my $input = join "", <STDIN>;

print $input;

ただ、下記のコードの方が良いという記述もちらほらとありました。
（区切り文字を変えて読んだ方がjoinで処理しない分速いのかな？）

my $data = do { local $/; <STDIN> };

参考：
　「Perl, Python, Ruby の比較」があまりにもいい加減な件 - odz buffer

あと、<STDIN>とかはエスケープしないとタグと解釈されちゃうので注意です。

・・・しまった、ただでさえ長文の予定なのに脱線した。
次、行きます。

   488	$css =~ s/{(.*?)}/"{".sort_properties($1)."}"/imgse;
   489	
   490	print $css;

488がソート処理の呼び出しです。
{〜}で囲まれた部分をsort_properties()の結果に置換しています。
（eオプションがあるので置換後の文字列をperl式として評価）
あと、sは"."を改行にもマッチさせるフラグです。JSにもこれが欲しいですね^^

結果を490でprintで標準出力にoutputしてこのスクリプトは終了です。

それでは、sort_properties()は何をしているのでしょうか？

   492  sub sort_properties {
   493    # Remove leading line-breaks
   494    (my $rules = shift) =~ s/^\n+//;
   495  
   496    # Orcish Maneuver
   497    # my %temp;
   498    # my @sorted_rules = sort {
   499    #   ($temp{$a} ||= check_order($a)) <=> ($temp{$b} ||= check_order($b))
   500    # } split "\n", $rules;
   501  
   502    # Schwartzian Transform
   503    # See also: http://gist.github.com/236860
   504    my @sorted_rules
   505      = map  { $_->[0] }
   506        sort { $a->[1] <=> $b->[1] }
   507        map  { [ $_, check_order($_) ] }
   508        split "\n", $rules;
   509  
   510    return "\n" . join("\n", @sorted_rules) . "\n";
   511  }

まず、494でshiftで取り出した引数から{直後の改行を削除しています。
（と思ってますが実はこの部分、よくわかってません。なので移植も適当です^^）

504〜508がシュワルツ（シュウォーツ）変換によるソート処理です。
シュワルツ変換とは、ソートに必要な計算を比較の都度やらずに、
事前に一度だけ処理して保持しておくことで、無駄をなくす方法です。

今回の場合は、「改行でsplit()した各行」と「計算した順序」を事前に配列に入れておき、
その配列を2列目（順序）でソートして、
1列目（各行の内容）を返すという流れになっています。

その結果を再び改行区切りに戻せば並び替え完了というわけです。

それでは、最後に並び順を計算するcheck_order()です。

   513  sub check_order {
   514    my $line = shift;
   515    my $order = 10000;
   516  
   517    if ($line =~ /^\s*(.+?)\s*:/) {
   518      if (defined $property{$1}) {
   519        $order = $property{$1};
   520      }
   521    # } else {
   522    #   warn "Unknown property: $1";
   523    }
   524  
   525    return $order;
   526  }

この関数は、cssのプロパティ名を正規表現で抽出し、
propertyハッシュから順序を取り出すという単純なものです。
（なければ10000を返し、最後とする）

さて、これでこのスクリプトの全貌がわかりました（つもりです）。
※ 間違ってたらご指摘をお願いします・・・。

JavaScriptへの移植

以下に置いておきますのでご自由に。
ライセンスはオリジナルと同じくMIT。

いつも通り適当実装なので、突っ込み歓迎です。
※ ちょっと修正[2009/11/23]
　　→無駄なグローバル変数を削除。
　　　CssSorter.sort()をsortcss()に。


cssSorter

長文すぎるのでコードの説明は割愛しておきます。
やってることは同じですしね。

ちなみにプロパティ配列のJSON変換はこんな感じでやりました。

sudo cpan
cpan[1]> install JSON
cpan[2]> q

cp sortcss.pl sortcss2json.pl
vi sortcss2json.pl

 10 use JSON;

491 #print $css;
492 my $json = JSON->new->encode(\%property);
493 print $json;

perl sortcss2json.pl > property.js

本日のエントリは以上です。
Perl使いへの道のりはまだまだ遠いですね！