読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

コマンドラインでCSSファイルを整形したい | cssbeautifyを使おう

CSS Node.js

f:id:mochizuki_p:20170111165510p:plain

JavaScriptでHTMLを整形する

CSSファイルを綺麗に整理したい、でも大きなサイズのCSSファイルを手作業で整形するのは非常に馬鹿らしいことですね。

JavaScript(Node.js)では、コマンドライン一発でJavaScriptを整形するパッケージが存在します。

使い方

npmでインストール

sudo npm install cssbeautify -g

コマンドラインでファイルを整形

乱雑なCSSファイルが


.avatar{float:left;margin-left:-24px;margin-right:20px}.comments .user-type{text-transform:uppercase;font-size:8pt;font-family:Arial;font-weight:bold;position:relative;margin-left:8px;line-height:14px;white-space:nowrap;padding-left:10px}.comments
.publisher{color:#d4360e}.comments .license-owner{color:#59bfa9}.comments .user-type.admin{color:#1497CC}.comments .user-type.admin:before{background:#1497CC}.comments .user-type .icon-help-circle{text-decoration:none;margin-left:5px;cursor:help}.comments .user-type
span{position:absolute;bottom:20px;right:0;background-color:#59bfa9;color:#fff;padding:4px
6px;text-transform:none;display:none;font-weight:normal;font-size:9pt;white-space:nowrap}.comments .user-type span:before{bottom: -8px;color:#59BFA9;content:"▾";font-size:17pt;position:absolute;right:0px}.comments .user-type:hover
span{display:block}.comment-form
.avatar{margin:0
0 0 -24px;float:left}.replies .comment-form
.avatar{margin:0
0 0 -24px}.replies .publisher-logged .login,.replies .publisher-logged
.register{display:none}.comment-form .posting-as{font-size:9pt}.comments
.editing{font-family:inherit;font-size:11pt;height:60px;width:89%;border:1px
solid #dfdfde;padding:3px;margin-top:5px;margin-left:0}.notlogged-popup{position:absolute;background-color:#EFEFEF;padding:10px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;width:210px;display:none;z-index:10}.notlogged-popup
.pointer{position:absolute;left:50%;margin-left:-10px;z-index:5;bottom:-13px;color:#efefef;border-width:7px;border-color:#efefef transparent transparent transparent;border-style:solid}.notlogged-popup
.text{margin:4px
0}.notlogged-popup
button{display:block;width:99%;margin:5px
0 0}.notlogged-popup .small-red-button{margin-top:5px}.comments
.attachments{margin-left:44px;margin-top:10px}.comment-form{display:block;padding-bottom:20px;margin-top:15px;margin-left:25px;position:relative;border-left:2px solid #E4E4E4}.replies .comment-form{margin-left:0}.comment-form
form{display:block;margin-left:40px}.comment-form
button{margin:0}.comment-form .notlogged
button{float:none}

コマンドラインで

cssbeautify test.css

整然となった

整形される結果となります。

.comments>li,.replies>li {
    padding: 0;
    border-left: 2px solid #E4E4E4;
    margin-left: 24px
}

.replies>li:first-child {
    padding-top: 0
}

.comments>li:last-child,.replies>li:last-child {
    border-left: 0
}

.comments
.wrapper {
    position: relative;
    padding-bottom: 15px
}

.comments
.author {
    font-size: 10pt;
    color: #0e0e0e;
    font-weight: bold;
    margin-bottom: .5em;
    display: inline-block
}

.comments
.time {
    color: #8a8a8a;
    font-size: 9pt;
    margin-left: .5em
}

.comments>li:first-child {
    border-top: 0;
    padding-top: 0
}

.comments blockquote,.comments
.blockquote {
    line-height: 1.7em;
    margin-left: 44px;
    margin-top: 2px
}

.comments
blockquote {
    white-space: pre-wrap
}

.comments
.replies {
    padding-left: 20px
}

.comments .replies li:last-child .wrapper
.actions {
    border-bottom: 0
}

.comments
.actions {
    margin-top: 10px;
    margin-left: 44px;
    overflow: auto;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 1em
}

.comments li:last-child
.actions {
    border-bottom: 0
}

.comments .actions
a {
    vertical-align: top
}

.comments
.avatar {
    float: left;
    margin-left: -24px;
    margin-right: 20px
}

.comments .user-type {
    text-transform: uppercase;
    font-size: 8pt;
    font-family: Arial;
    font-weight: bold;
    position: relative;
    margin-left: 8px;
    line-height: 14px;
    white-space: nowrap;
    padding-left: 10px
}

.comments
.publisher {
    color: #d4360e
}

.comments .license-owner {
    color: #59bfa9
}

.comments .user-type.admin {
    color: #1497CC
}

.comments .user-type.admin:before {
    background: #1497CC
}

.comments .user-type .icon-help-circle {
    text-decoration: none;
    margin-left: 5px;
    cursor: help
}

.comments .user-type
span {
    position: absolute;
    bottom: 20px;
    right: 0;
    background-color: #59bfa9;
    color: #fff;
    padding: 4px
6px;
    text-transform: none;
    display: none;
    font-weight: normal;
    font-size: 9pt;
    white-space: nowrap
}

.comments .user-type span:before {
    bottom: -8px;
    color: #59BFA9;
    content: "▾";
    font-size: 17pt;
    position: absolute;
    right: 0px
}

.comments .user-type:hover
span {
    display: block
}

.comment-form
.avatar {
    margin: 0
0 0 -24px;
    float: left
}

.replies .comment-form
.avatar {
    margin: 0
0 0 -24px
}

.replies .publisher-logged .login,.replies .publisher-logged
.register {
    display: none
}

.comment-form .posting-as {
    font-size: 9pt
}

.comments
.editing {
    font-family: inherit;
    font-size: 11pt;
    height: 60px;
    width: 89%;
    border: 1px
solid #dfdfde;
    padding: 3px;
    margin-top: 5px;
    margin-left: 0
}

.notlogged-popup {
    position: absolute;
    background-color: #EFEFEF;
    padding: 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    width: 210px;
    display: none;
    z-index: 10
}

.notlogged-popup
.pointer {
    position: absolute;
    left: 50%;
    margin-left: -10px;
    z-index: 5;
    bottom: -13px;
    color: #efefef;
    border-width: 7px;
    border-color: #efefef transparent transparent transparent;
    border-style: solid
}

.notlogged-popup
.text {
    margin: 4px
0
}

.notlogged-popup
button {
    display: block;
    width: 99%;
    margin: 5px
0 0
}

.notlogged-popup .small-red-button {
    margin-top: 5px
}

.comments
.attachments {
    margin-left: 44px;
    margin-top: 10px
}

.comment-form {
    display: block;
    padding-bottom: 20px;
    margin-top: 15px;
    margin-left: 25px;
    position: relative;
    border-left: 2px solid #E4E4E4
}

.replies .comment-form {
    margin-left: 0
}

.comment-form
form {
    display: block;
    margin-left: 40px
}

.comment-form
button {
    margin: 0
}

.comment-form .notlogged
button {
    float: none
}

obatataketo-no-MacBook-Air:Desktop obata$ sudo vi test.css
obatataketo-no-MacBook-Air:Desktop obata$ cssbeautify test.css
.comments>li,.replies>li {
    padding: 0;
    border-left: 2px solid #E4E4E4;
    margin-left: 24px
}

.replies>li:first-child {
    padding-top: 0
}

.comments>li:last-child,.replies>li:last-child {
    border-left: 0
}

.comments
.wrapper {
    position: relative;
    padding-bottom: 15px
}

.comments
.author {
    font-size: 10pt;
    color: #0e0e0e;
    font-weight: bold;
    margin-bottom: .5em;
    display: inline-block
}

.comments
.time {
    color: #8a8a8a;
    font-size: 9pt;
    margin-left: .5em
}

.comments>li:first-child {
    border-top: 0;
    padding-top: 0
}

.comments blockquote,.comments
.blockquote {
    line-height: 1.7em;
    margin-left: 44px;
    margin-top: 2px
}

.comments
blockquote {
    white-space: pre-wrap
}

.comments
.replies {
    padding-left: 20px
}

.comments .replies li:last-child .wrapper
.actions {
    border-bottom: 0
}

.comments
.actions {
    margin-top: 10px;
    margin-left: 44px;
    overflow: auto;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 1em
}

.comments li:last-child
.actions {
    border-bottom: 0
}

.comments .actions
a {
    vertical-align: top
}

.comments
.avatar {
    float: left;
    margin-left: -24px;
    margin-right: 20px
}

.comments .user-type {
    text-transform: uppercase;
    font-size: 8pt;
    font-family: Arial;
    font-weight: bold;
    position: relative;
    margin-left: 8px;
    line-height: 14px;
    white-space: nowrap;
    padding-left: 10px
}

.comments
.publisher {
    color: #d4360e
}

.comments .license-owner {
    color: #59bfa9
}

.comments .user-type.admin {
    color: #1497CC
}

.comments .user-type.admin:before {
    background: #1497CC
}

.comments .user-type .icon-help-circle {
    text-decoration: none;
    margin-left: 5px;
    cursor: help
}

.comments .user-type
span {
    position: absolute;
    bottom: 20px;
    right: 0;
    background-color: #59bfa9;
    color: #fff;
    padding: 4px
6px;
    text-transform: none;
    display: none;
    font-weight: normal;
    font-size: 9pt;
    white-space: nowrap
}

.comments .user-type span:before {
    bottom: -8px;
    color: #59BFA9;
    content: "▾";
    font-size: 17pt;
    position: absolute;
    right: 0px
}

.comments .user-type:hover
span {
    display: block
}

.comment-form
.avatar {
    margin: 0
0 0 -24px;
    float: left
}

.replies .comment-form
.avatar {
    margin: 0
0 0 -24px
}

.replies .publisher-logged .login,.replies .publisher-logged
.register {
    display: none
}

.comment-form .posting-as {
    font-size: 9pt
}

.comments
.editing {
    font-family: inherit;
    font-size: 11pt;
    height: 60px;
    width: 89%;
    border: 1px
solid #dfdfde;
    padding: 3px;
    margin-top: 5px;
    margin-left: 0
}

.notlogged-popup {
    position: absolute;
    background-color: #EFEFEF;
    padding: 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    width: 210px;
    display: none;
    z-index: 10
}

.notlogged-popup
.pointer {
    position: absolute;
    left: 50%;
    margin-left: -10px;
    z-index: 5;
    bottom: -13px;
    color: #efefef;
    border-width: 7px;
    border-color: #efefef transparent transparent transparent;
    border-style: solid
}

.notlogged-popup
.text {
    margin: 4px
0
}

.notlogged-popup
button {
    display: block;
    width: 99%;
    margin: 5px
0 0
}

.notlogged-popup .small-red-button {
    margin-top: 5px
}

.comments
.attachments {
    margin-left: 44px;
    margin-top: 10px
}

.comment-form {
    display: block;
    padding-bottom: 20px;
    margin-top: 15px;
    margin-left: 25px;
    position: relative;
    border-left: 2px solid #E4E4E4
}

.replies .comment-form {
    margin-left: 0
}

.comment-form
form {
    display: block;
    margin-left: 40px
}

.comment-form
button {
    margin: 0
}

.comment-form .notlogged
button {
    float: none
}

あくまでこれは、標準出力(STDOUT)へのアウトプットとなるので、ファイルとして保存するには以下のようにパイプを利用します。

html test.css > formatted_test.css

f:id:mochizuki_p:20170111170717p:plain

とこのように整形済みの新しいCSSファイルを保存することができます。