Skip to content

Instantly share code, notes, and snippets.

@MurakamiShinyu
Created November 26, 2019 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MurakamiShinyu/f576ea541529e69ce1dbc80603530d41 to your computer and use it in GitHub Desktop.
Save MurakamiShinyu/f576ea541529e69ce1dbc80603530d41 to your computer and use it in GitHub Desktop.
Convert CSS non-logical properties to logical properties
#!/usr/bin/perl
while (<>) {
s/(?<![^;{\s])(margin|padding|border)-top:/$1-block-start:/g;
s/(?<![^;{\s])(margin|padding|border)-right:/$1-inline-end:/g;
s/(?<![^;{\s])(margin|padding|border)-bottom:/$1-block-end:/g;
s/(?<![^;{\s])(margin|padding|border)-left:/$1-inline-start:/g;
s/(?<![^;{\s])border-top-(color|style|width):/border-block-start-$1:/g;
s/(?<![^;{\s])border-right-(color|style|width):/border-inline-end-$1:/g;
s/(?<![^;{\s])border-bottom-(color|style|width):/border-block-end-$1:/g;
s/(?<![^;{\s])border-left-(color|style|width):/border-inline-start-$1:/g;
s/(?<![^;{\s])(margin|padding):[ \t]*([^;}\s]+)\s+([^;}\s]+)[ \t]*(?=[;}]|$)/$1-block-start: $2; $1-inline-end: $3; $1-block-end: $2; $1-inline-start: $3/g;
s/(?<![^;{\s])(margin|padding):[ \t]*([^;}\s]+)\s+([^;}\s]+)\s+([^;}\s]+)[ \t]*(?=[;}]|$)/$1-block-start: $2; $1-inline-end: $3; $1-block-end: $4; $1-inline-start: $3/g;
s/(?<![^;{\s])(margin|padding):[ \t]*([^;}\s]+)\s+([^;}\s]+)\s+([^;}\s]+)\s+([^;}\s]+)[ \t]*(?=[;}]|$)/$1-block-start: $2; $1-inline-end: $3; $1-block-end: $4; $1-inline-start: $5/g;
s/(?<![^;{\s])border-(color|style|width):[ \t]*([^;}\s]+)\s+([^;}\s]+)[ \t]*(?=[;}]|$)/border-block-start-$1: $2; border-inline-end-$1: $3; border-block-end-$1: $2; border-inline-start-$1: $3/g;
s/(?<![^;{\s])border-(color|style|width):[ \t]*([^;}\s]+)\s+([^;}\s]+)\s+([^;}\s]+)[ \t]*(?=[;}]|$)/border-block-start-$1: $2; border-inline-end-$1: $3; border-block-end-$1: $4; border-inline-start-$1: $3/g;
s/(?<![^;{\s])border-(color|style|width):[ \t]*([^;}\s]+)\s+([^;}\s]+)\s+([^;}\s]+)\s+([^;}\s]+)[ \t]*(?=[;}]|$)/border-block-start-$1: $2; border-inline-end-$1: $3; border-block-end-$1: $4; border-inline-start-$1: $5/g;
s/(?<![^;{\s])(min-|max-|)width:/$1inline-size:/g;
s/(?<![^;{\s])(min-|max-|)height:/$1block-size:/g;
print;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment