uknmr / stylelint-config

mediba config for stylelint

.stylelint-config {

/* stylelint config at mediba */
circle-ci: ;
travis-ci: ;
npm: ;
dev: ;

Installation:

$ yarn add @mediba/stylelint-config --dev

Usage:

Set your stylelint config.

{
  "extends": "@mediba/stylelint-config",
  "rules": {
    // If you customize rules, override here.
  }
}

With stylefmt:

$ yarn add stylefmt --dev

$ ./node_modules/.bin/stylefmt --help

Editor plugins:

• For Sublime Text
• For Atom
• For Vim
• For VS Code

Task Runner plugins:

• For Gulp
• For Webpack

As you like.

}

stylelint-config's Issues

Automated dependency update

PR出してくれるようなやつがいいな。

1x や 2x などの単位がエラーになる

  background-image: image-set(url('hoge') 1x, url('fuga') 2x);

http://caniuse.com/#feat=css-image-set

このプロジェクトを閉じます🙏

もう私はこの styleling-config を使用していません。
この config は mediba での教育的側面を持ったルールでした。

CSS in JS 向けにはメンテナンスしていなかったこと、並び順が一般には受け要られづらかったこともありなかなか受けいられなかったように思います（わたしはできるだけ外への影響が強いルールからあてていくこのルールが好きです）。

私自身も Tailwind CSS を始めとしたユーティリティ CSS 志向になってしまったため、stylelint をつかう機会が減りました。

つかって頂いた方、ありがとうございました🙏

どうやって親の変更に追従するのか

Watch の仕組みを考えよう

Follow v8.0.0

Release 8.0.0 · stylelint/stylelint

https://github.com/stylelint/stylelint/releases/tag/8.0.0

$ stylelint --fix で postcss-sorting の警告がでる

$ stylelint 'src/**/*.scss' --fix
postcss-sorting: order: Every item in the array must be an object with a "type" property, or one of keywords: custom-properties, dollar-variables, declarations, rules, at-rules.

使えるのは下記 keyword らしい…

• custom-properties
• dollar-variables
• declarations
• rules
• at-rules

https://github.com/mediba-system/stylelint-config/blob/a1918d956016c3a7ceef2fec7766b595ef865337/index.js#L107-L117

text-decoration-* 一考

https://www.w3.org/TR/css-text-decor-3/#line-decoration
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip
http://caniuse.com/#feat=text-decoration

@mediba/stylelint-config に rename する

npm の mediba Org に移行したのはいいが、stylelint-config-mediba の mediba が冗長になので rename したい。

• @mediba/styleling-config-mediba は deprecated に
  • npm 公式に deprecate してもらうかは要検討
  • とりあえずこれ https://docs.npmjs.com/cli/deprecate
• これと #6 対応したら v1 にしようかな…

Yarn から npm5 に移行する

本体が npm5 で管理しているので合わせたい。

https://github.com/stylelint/stylelint
https://github.com/stylelint/stylelint-config-recommended

unicode-range 一考

https://drafts.csswg.org/css-fonts/#descdef-unicode-range
https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face/unicode-range
http://caniuse.com/#feat=font-unicode-range

CircleCI 2.0 に追従できていない

https://circleci.com/gh/mediba-system/stylelint-config/56

• Node v4.2.6 で動いてテストがコケてる
• Yarn が使われていない

docker-image の指定方が変わったのか（あるいは端から間違っていた）と思う。
https://circleci.com/docs/2.0/language-javascript/
https://circleci.com/docs/2.0/circleci-images/#nodejs

Stylefmt の展開

作成後 Stylefmt の使い方を展開する。

Follow stylelint 7.11.0 and 7.11.1

Release 7.11.0 · stylelint/stylelint

https://github.com/stylelint/stylelint/releases/tag/7.11.0

Release 7.11.1 · stylelint/stylelint

https://github.com/stylelint/stylelint/releases/tag/7.11.1

プロパティの順序

できれば↓に合わせたいんだけど…
https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md

メンテ負荷上がりそうなので悩みどころ。アルファベット順が無難。

CI は Travis で回す

https://mediba-developers.slack.com/archives/C4Y2EJRCP/p1491965522985476

Flexbox 向けプロパティの並びを一考

// 外向きの関係性から記述していく。
// より他の要素と関連が高いものが上に来ている。

とするならば、
フレックスコンテナ向けプロパティより、フレックスアイテム向けプロパティが上にくるはず。

JavaScript の Linter を設定する

テストコードで JavaScript を使用しているため、Linter を設定する。