#!/usr/bin/perl # Author: Kyo Nagashima , http://hail2u.net/ # xaicron, http://blog.livedoor.jp/xaicron/ # License: MIT license (http://opensource.org/licenses/mit-license.php) # Modified: 2009-11-17T23:09:27+09:00 use strict; use warnings; # CSS2.1 my @property_order = qw( margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-top border-bottom border-right border-left border-width border-top-width border-right-width border-bottom-width border-left-width border-color border-top-color border-right-color border-bottom-color border-left-color border-style border-top-style border-right-style border-bottom-style border-left-style display position top right bottom left float clear z-index direction unicode-bidi width min-width max-width height min-height max-height line-height vertical-align overflow clip visibility content quotes counter-reset counter-increment list-style list-style-type list-style-image list-style-position page-break-before page-break-after page-break-inside orphans widows color background background-color background-image background-repeat background-attachment background-position font font-family font-style font-variant font-weight font-size text-indent text-align text-decoration text-shadow letter-spacing word-spacing text-transform white-space caption-side table-layout border-collapse border-spacing empty-cells cursor outline outline-width outline-style outline-color volume speak pause-before pause-after pause cue-before cue-after cue play-during azimuth elevation speech-rate voice-family pitch pitch-range stress richness speak-punctuation speak-numeral speak-header ); # CSS3 and vendor extension for CSS3 push @property_order, qw( background-clip -moz-background-clip -webkit-background-clip background-origin -moz-background-origin -webkit-background-origin background-size -moz-background-size -webkit-background-size -o-background-size border-radius -moz-border-radius -webkit-border-radius border-top-right-radius -moz-border-radius-topright -moz-border-top-right-radius border-bottom-right-radius -moz-border-radius-bottomright -moz-border-bottom-right-radius border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius border-top-left-radius -moz-border-radius-topleft -moz-border-top-left-radius border-image -moz-border-image -webkit-border-image border-image-source border-image-slice border-image-width border-image-outset border-image-repeat box-break box-shadow -moz-box-shadow -webkit-box-shadow appearance -moz-appearance -webkit-appearance icon box-sizing -moz-box-sizing -webkit-box-sizing outline-offset resize nav-index overflow-x -ms-overflow-x overflow-y -ms-overflow-y overflow-style -webkit-marquee marquee-style -webkit-marquee-style marquee-loop marquee-direction -webkit-marquee-direction marquee-speed -webkit-marquee-speed rotation rotation-point opacity font-stretch font-size-adjust src unicode-range string-set border-length hyphens hyphenate-resource hyphenate-before hyphenate-after hyphenate-lines hyphenate-character text-replace image-resolution float-offset marks bookmark-level bookmark-label bookmark-target target target-name target-new target-position text-height line-stacking line-stacking-strategy line-stacking-ruby line-stacking-shift dominate-baseline alignment-baseline alignment-adjust baseline-shift inline-box-align drop-initial-value drop-initial-size drop-initial-after-align drop-initial-after-adjust drop-initial-before-align drop-initial-before-adjust columns -webkit-columns column-width -moz-column-width -webkit-column-width column-count -moz-column-count -webkit-column-count column-gap -moz-column-gap -webkit-column-gap column-rule -moz-column-rule -webkit-column-rule column-rule-color -moz-column-rule-color -webkit-column-rule-color column-rule-style -moz-column-rule-style -webkit-column-rule-style column-rule-width -moz-column-rule-width -webkit-column-rule-width column-span column-fill size page image-orientation fit fit-position presentation-level ruby-position ruby-align ruby-overhang ruby-span grid-columns grid-rows voice-volume voice-balance rest rest-before rest-after mark mark-before mark-after voice-rate voice-pitch voice-pitch-range voice-stress voice-duration phonemes white-space-collapse word-break -ms-word-break text-wrap word-wrap -ms-word-wrap text-align-last -ms-text-align-last text-justify -ms-text-justify punctuation-trim text-emphasis text-shadow text-outline text-indent hanging-punctuation box-orient -moz-box-orient -webkit-box-orient box-direction -moz-box-direction -webkit-box-direction box-original-group -moz-box-ordinal-group -webkit-box-ordinal-group box-align -moz-box-align -webkit-box-align box-flex -moz-box-flex -webkit-box-flex box-flex-group -moz-box-flexgroup -webkit-box-flex-group box-pack -moz-box-pack -webkit-box-pack box-lines -webkit-box-lines transform -moz-transform -webkit-transform transform-origin -moz-transform-origin -webkit-transform-origin transform-style -webkit-transform-style perspective -webkit-perspective perspective-origin -webkit-perspective-origin backface-visibility -webkit-backface-visibility transition -webkit-transition transition-property -webkit-transition-property transition-duration -webkit-transition-duration transition-timing-function -webkit-transition-timing-function transition-delay -webkit-transition-delay animation -webkit-animation animation-name -webkit-animation-name animation-duration -webkit-animation-duration animation-timing-function -webkit-animation-timing-function animation-iteration-count -webkit-animation-iteration-count animation-direction -webkit-animation-direction animation-play-state -webkit-animation-play-state animation-delay -webkit-animation-delay ); # Vendor extension push @property_order, qw( -moz-background-inline-policy -moz-binding -moz-border-bottom-colors -moz-border-left-colors -moz-border-right-colors -moz-border-top-colors -moz-border-end -moz-border-end-color -moz-border-end-style -moz-border-end-width -moz-border-start -moz-border-start-color -moz-border-start-style -moz-border-start-width -moz-float-edge -moz-force-broken-image-icon -moz-image-region -moz-margin-end -moz-margin-start -webkit-margin-start -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -moz-padding-end -moz-padding-start -webkit-padding-start -moz-stack-sizing -moz-user-focus -moz-user-input -moz-user-modify -webkit-user-modify -moz-user-select -webkit-user-select -moz-window-shadow -webkit-background-composite -webkit-border-horizontal-spacing -webkit-border-vertical-spacing -webkit-box-reflect -webkit-column-break-after -webkit-column-break-before -webkit-column-break-inside -webkit-dashboard-region -webkit-line-break -webkit-margin-bottom-collapse -webkit-margin-collapse -webkit-margin-top-collapse -webkit-marquee-increment -webkit-marquee-repetition -webkit-mask -webkit-mask-attachment -webkit-mask-box-image -webkit-mask-clip -webkit-mask-composite -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-position-x -webkit-mask-position-y -webkit-mask-repeat -webkit-mask-size -webkit-nbsp-mode -webkit-rtl-ordering -webkit-tap-highlight-color -webkit-text-fill-color -webkit-text-security -webkit-text-size-adjust -webkit-text-stroke -webkit-text-stroke-color -webkit-text-stroke-width -webkit-touch-callout -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-origin-z -webkit-user-drag -o-table-baseline -ms-background-position-x -ms-background-position-y -ms-filter -ms-ime-mode -ms-layout-flow -ms-layout-grid -ms-layout-grid-char -ms-layout-grid-line -ms-layout-grid-mode -ms-layout-grid-type -ms-text-autospace -ms-text-kashida-space -ms-text-overflow -ms-text-underline-position -ms-writing-mode -ms-interpolation-mode -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color -ms-scrollbar-base-color -ms-scrollbar-darkshadow-color -ms-scrollbar-face-color -ms-scrollbar-highlight-color -ms-scrollbar-shadow-color -ms-zoom ); # Other CSS extensions (without vendor prefix) push @property_order, qw( image-rendering ime-mode pointer-events text-rendering ); # Create hash: key => property, value => index # See also: http://blog.livedoor.jp/xaicron/archives/50913074.html my %property = do { my $i = 0; map { $_ => $i++ } @property_order; }; my $css = join "", ; $css =~ s/{(.*?)}/"{".sort_properties($1)."}"/imgse; print $css; sub sort_properties { # Remove leading line-breaks (my $rules = shift) =~ s/^\n+//; # Orcish Maneuver # my %temp; # my @sorted_rules = sort { # ($temp{$a} ||= check_order($a)) <=> ($temp{$b} ||= check_order($b)) # } split "\n", $rules; # Schwartzian Transform # See also: http://gist.github.com/236860 my @sorted_rules = map { $_->[0] } sort { $a->[1] <=> $b->[1] } map { [ $_, check_order($_) ] } split "\n", $rules; return "\n" . join("\n", @sorted_rules) . "\n"; } sub check_order { my $line = shift; my $order = 10000; if ($line =~ /^\s*(.+?)\s*:/) { if (defined $property{$1}) { $order = $property{$1}; } # } else { # warn "Unknown property: $1"; } return $order; }