整个项目的初衷,是为了让小程序支持使用 CSScomb 来格式化 WXSS、ACSS 这些文件。其实借助 Prettier 的 override 功能就能很好的对我们的小程序样式文件进行格式化。
但是 Prettier 没有 CSS 属性的排序功能,所以写一个 Demo 来实现 WXSS 的格式化和排序。
PS: 可能是为了满足自己的强迫症,哈哈。
思路可看以下两篇文章:
# clone project
$ git clone git@github.com:toFrankie/csscomb-mini.git
# install dependencies
$ yarn
# format
$ yarn lint
详情看 gulpfile.js
的方法 csscombPlugin
。
--path
表示符合 glob 文件匹配模式的路径,多个路径是用,
隔开,并用单引号'
括起来。还有我限制了仅支持项目下的文件。--ext
表示扩展名,如.css
、.wxss
等。(此选项目前没什么用,保留下来后续优化用)
若对 Glob 模式不了解,可看 Glob 详解。
{
"scripts": {
"csscomb:mini": "gulp csscombMini --path '<filepath>' --ext <extension>"
}
}
例如:
- 匹配所有 wxss 文件:
"gulp csscombMini --path './**/*.wxss'"
- 匹配个别文件:
"gulp csscombMini --path 'miniprogram/app.wxss,miniprogram/pages/index/index.wxss'"
- 当 gulp csscombMini 中不传参(path)时,是不处理,还是处理所有文件?
- 关于 CSScomb 在 VS Code 的配置可参考:GentleHwang/csscomb-config-custom