CssSyntaxError on Vue files after stylelint v14 upgrade

[jhonatan-lopes]

After upgrading Wagtail-Kit's stylelint to version 14.X and stylelint-config-torchbox to version 2.0.3, Vue files started to spit out a CssSyntaxError. Running npm run lint:css (stylelint --report-needless-disables './wagtailkit_repo_name/static_src/sass' './wagtailkit_repo_name/static_src/javascript/vue_components'), we get:

wagtailkit_repo_name/static_src/javascript/vue_components/Hello.vue
 3:28  ✖  Unknown word  CssSyntaxError

1 problem (1 error, 0 warnings)

The problematic line contains the following:

    <p class="greeting">{{ greeting }} world</p>

It seems like other people have run into this before (stylelint/stylelint#5634 and stylelint/stylelint#3633) and their issues seemed to be related to stylelint's Vue configuration.

In fact, if we add a custom syntax rule for Vue files at .stylelintrc:

module.exports = {
    // See https://github.com/torchbox/stylelint-config-torchbox for rules.
    extends: 'stylelint-config-torchbox',
    overrides: [
        {
             // Ensure Vue files aren't treated solely as html or scss
            files: ["*.vue"],
            customSyntax: "postcss-html"
        },
    ],
};

and install/add postcss-html to our dev-dependencies, the error goes away.

Although the error started appearing after the v14 update, it is still present at stylelint v15 and the latest stylelint-config-torchbox versions.