ネット上にあるツールを使ってミニファイ化されたcssをもとに戻したいがうまく動作しないです。

Question

前提・実現したいこと

ミニファイ化されたcssを見やすく整形したくて、ネット上にある整形ツールを使ってみたのですが、うまく整形されません。
どうにかしてうまく整形したいです。

発生している問題・エラーメッセージ

pretty diffというツールを使ってみたのですが、最初の一行が改行されたところまでは動作したらいいのですが、
２行目で、

fatal error,cannot continue :Expected STRING at line2 , col9

というエラーメッセージがでて、それ以降動作しないみたいです。

該当のソースコード

@charset "UTF-8";@import https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700;@import https://fonts.googleapis.com/earlyaccess/notosansjapanese.css;html{color:#000;background:#fff}blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:after,q:before{content:''}

ミニファイ化されたｃｓｓの冒頭の一部分です。

試したこと

pretty diff 以外にもSYNCERというツールも使ってみましたが、できませんでした。

補足情報（FW/ツールのバージョンなど）

整形後にでてくるコードはこんな感じです。
@charset "UTF-8";
@import https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700;

UTF-8までは改行され動作しているみたいですが、
fatal error,cannot continue :Expected STRING at line2 , col9
ですので、２行目のhttpsの最初のところに問題があるようなのですが、よくわかりません。

どなたかどうしたら解決できるかわかる方いらっしゃいましたら、教えてください。

Answer 1

@import記述が間違っておりますので、正しく書き換えてあげれば整形ツールを使用することができるようになります。

@importの書き方

@import url("cssファイル名");

参考：https://techacademy.jp/magazine/13018

修正後のminify化されたCSS

@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700);@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);html{color:#000;background:#fff}blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:after,q:before{content:''}

整形ツールにかけた際のコード

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
html {
  color: #000;
  background: #fff
}

blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
  margin: 0;
  padding: 0
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

fieldset, img {
  border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: 400
}

ol, ul {
  list-style: none
}

caption, th {
  text-align: left
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: 400
}

q:after, q:before {
  content: ''
}

整形に使用したサイト：https://lab.syncer.jp/Tool/CSS-PrettyPrint/

Comments

[shunsaku87]

ありがとうございます！解決しました！