Add no-parsing-error rule (#3)

Author: ota-meshi

README.md

@@ -93,6 +93,7 @@ Enforce all the rules in this category with:
 
 |    | Rule ID | Description |
 |:---|:--------|:------------|
+|  | [vue-scoped-css/no-parsing-error](./docs/rules/no-parsing-error.md) | Disallow parsing errors in `<style>` |
 |  | [vue-scoped-css/no-unused-selector](./docs/rules/no-unused-selector.md) | Reports selectors defined in Scoped CSS not used in `<template>`. |
 |  | [vue-scoped-css/require-scoped](./docs/rules/require-scoped.md) | Enforce the `<style>` tags to has the `scoped` attribute. |
 

docs/rules/README.md

@@ -28,6 +28,7 @@ Enforce all the rules in this category with:
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [vue-scoped-css/no-parsing-error](./no-parsing-error.md) | Disallow parsing errors in `<style>` |  |
 | [vue-scoped-css/no-unused-selector](./no-unused-selector.md) | Reports selectors defined in Scoped CSS not used in `<template>`. |  |
 | [vue-scoped-css/require-scoped](./require-scoped.md) | Enforce the `<style>` tags to has the `scoped` attribute. |  |
 

docs/rules/no-parsing-error.md

@@ -0,0 +1,33 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "vue-scoped-css/no-parsing-error"
+description: "Disallow parsing errors in `<style>`"
+---
+# vue-scoped-css/no-parsing-error
+
+> Disallow parsing errors in `<style>`
+
+- :gear: This rule is included in `"plugin:vue-scoped-css/recommended"` and `"plugin:vue-scoped-css/all"`.
+
+This rule reports syntax errors in `<style>`. 
+
+<eslint-code-block :rules="{'vue-scoped-css/no-parsing-error': ['error']}">
+
+```vue
+<style scoped>
+/* ✗ BAD */
+.item {
+</style>
+```
+
+</eslint-code-block>
+
+## :books: Further reading
+
+- None
+
+## Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-vue-scoped-css/blob/master/lib/rules/no-parsing-error.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-vue-scoped-css/blob/master/tests/lib/rules/no-parsing-error.js)

lib/rules/no-parsing-error.ts

@@ -0,0 +1,53 @@
+import { getStyleContexts, getCommentDirectivesReporter } from "../styles"
+import { RuleContext } from "../types"
+import { VCSSParsingError } from "../styles/ast"
+
+module.exports = {
+    meta: {
+        docs: {
+            description: "Disallow parsing errors in `<style>`",
+            category: "recommended",
+            default: "warn",
+            url:
+                "https://github.com/ota-meshi/eslint-plugin-vue-scoped-css/blob/v0.0.0/docs/rules/no-parsing-error.ts.md",
+        },
+        fixable: null,
+        messages: {},
+        schema: [],
+        type: "problem",
+    },
+    create(context: RuleContext) {
+        const styles = getStyleContexts(context).filter(style => !style.invalid)
+        if (!styles.length) {
+            return {}
+        }
+        const reporter = getCommentDirectivesReporter(context)
+
+        /**
+         * Reports the given node
+         * @param {ASTNode} node node to report
+         */
+        function report(node: VCSSParsingError) {
+            reporter.report({
+                node,
+                loc: node.loc.start,
+                message: "Parsing error: {{message}}.",
+                data: {
+                    message: node.message.endsWith(".")
+                        ? node.message.slice(0, -1)
+                        : node.message,
+                },
+            })
+        }
+
+        return {
+            "Program:exit"() {
+                for (const style of styles) {
+                    for (const node of style.cssNode?.errors || []) {
+                        report(node)
+                    }
+                }
+            },
+        }
+    },
+}

lib/styles/ast.ts

@@ -90,6 +90,7 @@ class HasParentNode<
  * The CSS Parsing Error.
  */
 export class VCSSParsingError extends Node<"VCSSParsingError"> {
+    public readonly message: string
     /**
      * constructor.
      * @param  {PostCSSDeclaration} node  The node.
@@ -106,9 +107,11 @@ export class VCSSParsingError extends Node<"VCSSParsingError"> {
         end: number,
         props: {
             lang: string
+            message: string
         },
     ) {
         super(node, "VCSSParsingError", loc, start, end, props.lang)
+        this.message = props.message
     }
 }
 
@@ -118,7 +121,7 @@ export class VCSSParsingError extends Node<"VCSSParsingError"> {
 export class VCSSStyleSheet extends Node<"VCSSStyleSheet"> {
     public nodes: VCSSNode[]
     public comments: VCSSCommentNode[]
-    public readonly errors: Node<string>[]
+    public readonly errors: VCSSParsingError[]
     /**
      * constructor.
      * @param  {PostCSSRoot} node  The node.
@@ -136,7 +139,7 @@ export class VCSSStyleSheet extends Node<"VCSSStyleSheet"> {
         props: {
             nodes?: VCSSNode[]
             comments?: VCSSCommentNode[]
-            errors?: Node<string>[]
+            errors?: VCSSParsingError[]
             lang: string
         },
     ) {

lib/styles/context/comment-directive/index.ts

@@ -2,6 +2,7 @@ import {
     LineAndColumnData,
     ReportDescriptor,
     RuleContext,
+    SourceLocation,
 } from "../../../types"
 import { StyleContext } from "../style"
 import { VCSSCommentNode } from "../../ast"
@@ -211,7 +212,7 @@ export class CommentDirectives {
         if (!loc) {
             return false
         }
-        const locStart = loc.start
+        const locStart = (loc as SourceLocation).start || loc
 
         const disableLine = this._disableLines[locStart.line]
         if (disableLine) {

lib/styles/parser/css-parser.ts

@@ -84,9 +84,9 @@ export class CSSParser {
                 errorIndex,
                 {
                     lang: this.lang,
+                    message,
                 },
             )
-            ;(errorNode as any).message = message
 
             const startIndex = sourceCode.getIndexFromLoc(offsetLocation)
             const endIndex = startIndex + css.length

lib/types.ts

@@ -74,9 +74,10 @@ export interface RuleContext {
     parserServices: ParserServices
 }
 export type ReportDescriptor = {
-    loc?: SourceLocation
+    loc?: SourceLocation | { line: number; column: number }
     node?: AST.HasLocation
     messageId?: string
+    message?: string
     data?: { [key: string]: any }
 }
 export interface SourceCode {

lib/utils/rules.ts

@@ -1,6 +1,11 @@
 import { Rule } from "../types"
 
 const baseRules = [
+    {
+        rule: require("../rules/no-parsing-error"),
+        ruleName: "no-parsing-error",
+        ruleId: "vue-scoped-css/no-parsing-error",
+    },
     {
         rule: require("../rules/no-unused-selector"),
         ruleName: "no-unused-selector",

tests/lib/rules/no-parsing-error.ts

@@ -0,0 +1,36 @@
+import { RuleTester } from "eslint"
+const rule = require("../../../lib/rules/no-parsing-error")
+
+const tester = new RuleTester({
+    parser: require.resolve("vue-eslint-parser"),
+    parserOptions: {
+        ecmaVersion: 2019,
+        sourceType: "module",
+    },
+})
+
+tester.run("no-parsing-error", rule, {
+    valid: [
+        `
+        <style scoped>
+        .item {}
+        </style>
+        `,
+    ],
+    invalid: [
+        {
+            code: `
+            <style scoped>
+            .item {
+            </style>
+            `,
+            errors: [
+                {
+                    message: "Parsing error: Unclosed block.",
+                    line: 3,
+                    column: 13,
+                },
+            ],
+        },
+    ],
+})