chore: patch for couldn't resolve parser "postcss"

[satoshiiiiii]

課題

commit しようとしたらhuskyがエラーを検知してコミットできず。

原因

エラーログによるとprettier-stylelint が吐いていたエラーによるとpostcss のparserが解決できていない模様です。 yarn lint しても同様のエラーが表示されます。 （下記のissueによるとParser postcss is renamed to css in v1.7.1, removed in v2.0.0.らしい）

husky > pre-commit (node v14.4.0)
[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for *.js
[STARTED] Running tasks for *.scss
[SKIPPED] No staged files match *.js
[STARTED] prettier-stylelint --write
[FAILED] prettier-stylelint --write [FAILED]
[FAILED] prettier-stylelint --write [FAILED]
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...

✖ prettier-stylelint --write:
prettier-stylelint [ERROR]: There was an error formatting "/Applications/MAMP/htdocs/static_html_skelton/dev/sass/object/component/_spnavi.scss"

Error: Couldn't resolve parser "postcss"
    at resolveParser (/Applications/MAMP/htdocs/static_html_skelton/node_modules/prettier/index.js:11343:15)
    at normalize$1 (/Applications/MAMP/htdocs/static_html_skelton/node_modules/prettier/index.js:11438:18)
    at formatWithCursor (/Applications/MAMP/htdocs/static_html_skelton/node_modules/prettier/index.js:15034:12)
    at /Applications/MAMP/htdocs/static_html_skelton/node_modules/prettier/index.js:51620:12
    at Object.format (/Applications/MAMP/htdocs/static_html_skelton/node_modules/prettier/index.js:51640:12)
    at /Applications/MAMP/htdocs/static_html_skelton/node_modules/prettier-stylelint/src/index.js:129:30
    at async Promise.all (index 0)

解決法

下記issueに該当するようなので、prettier-stylelint のupdateまでは一時的にパッチで解決することで対応できるようです。 https://github.com/prettier/prettier/issues/7999#issuecomment-626235798

1.プロジェクトルートに  patches/prettier-stylelint+0.4.2.patchを作成。

diff --git a/node_modules/prettier-stylelint/src/index.js b/node_modules/prettier-stylelint/src/index.js
index 124c00d..a6f12ec 100644
--- a/node_modules/prettier-stylelint/src/index.js
+++ b/node_modules/prettier-stylelint/src/index.js
@@ -60,7 +60,7 @@ resolveConfig.resolve = (stylelintConfig, prettierOptions = {}) => {
             prettierOptions.tabWidth = indentation;
         }
     }
-    prettierOptions.parser = 'postcss';
+    prettierOptions.parser = 'css';
     debug('prettier %O', prettierOptions);
     debug('linter %O', stylelintConfig);

2.package.json のscripts 以下を追加

  "scripts": {
    "postinstall": "patch-package"

3.patch-packageを追加

yarn add --dev patch-package

4.いつもどおりyarn install

yarn install

ここま一式のファイル/記述のコミットになります。

yarn install後、エラーが表示されたらエラーログ中の以下を実行すればOKです。

patch -p1 -i patches/prettier-stylelint+0.4.2.patch
npx patch-package prettier-stylelint

以上です。

[YuzuruSano]

@satoshiiiiii ありがとう〜。なるほど、parserの名前が変わった、というか統合になるのかなこれ。 ひとまずパッチで凌いでみましょうか、一旦マージします！