Elmでベタ打ちしていたcssを別ファイルに切り出したい時に便利な正規表現

elmでベタ打ちしていたcssを別ファイルに切り出したい時がある

切り出し前.elm

    div
        [ div
            [ class "class"
            , style "background" "white"
            , style "position" "absolute"
            , style "width" "80vw"
            , style "height" "50vh"
            , style "margin" "auto"
            , style "top" "0"
            , style "right" "0"
            , style "bottom" "0"
            , style "left" "0"
            , style "border-radius" "10px"
            , style "border" "1px"
            ]
            [ text "hoge"
            ]
        ]

コピペしただけだと（当然だが）syntaxが違うので動かない

コピペしただけ.css

            , style "background" "white"
            , style "position" "absolute"
            , style "width" "80vw"
            , style "height" "50vh"
            , style "margin" "auto"
            , style "top" "0"
            , style "right" "0"
            , style "bottom" "0"
            , style "left" "0"
            , style "border-radius" "10px"
            , style "border" "1px"

コピペして切り出したCSSもどきに対して、下記の正規表現をかけるとCSSの文法通りの形に変えられる

vscodeの場合

, style "(.*)" "(.*)" -> $1: $2;

sedとかの場合

, style "(.*)" "(.*)" -> \1: \2;

結果

result.css

    background: white;
    position: absolute;
    width: 80vw;
    height: 50vh;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    border: 1px;