Fix: Allow ranged location in css.

Fix webhintio#3130
sarvaje · Oct 18, 2019 · 0260698 · 0260698
1 parent 12d4a0c
commit 0260698
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 49 deletions.
diff --git a/packages/hint-compat-api/src/css.ts b/packages/hint-compat-api/src/css.ts
@@ -6,10 +6,10 @@ import intersection = require('lodash/intersection');
 import { vendor, AtRule, Rule, Declaration, ChildNode, ContainerBase } from 'postcss';
 
 import { HintContext } from 'hint/dist/src/lib/hint-context';
-import { IHint, ProblemLocation } from 'hint/dist/src/lib/types';
+import { IHint } from 'hint/dist/src/lib/types';
 import { StyleEvents } from '@hint/parser-css/dist/src/types';
 import { getUnsupportedDetails, UnsupportedBrowsers } from '@hint/utils-compat-data';
-import { getCSSCodeSnippet } from '@hint/utils/dist/src/report';
+import { getCSSCodeSnippet, getLocationFromNode } from '@hint/utils/dist/src/report';
 
 import { formatAlternatives } from './utils/alternatives';
 import { filterBrowsers, joinBrowsers } from './utils/browsers';
@@ -35,15 +35,6 @@ type Context = {
     walk: (ast: ContainerBase, context: Context) => void;
 };
 
-const getLocationFromNode = (node: ChildNode): ProblemLocation | undefined => {
-    const start = node.source && node.source.start;
-
-    return start && {
-        column: start.column - 1,
-        line: start.line - 1
-    };
-};
-
 const validateAtSupports = (node: AtRule, context: Context): void => {
     const supported = filterSupports(node.params, context.browsers);
 

diff --git a/packages/hint-css-prefix-order/src/hint.ts b/packages/hint-css-prefix-order/src/hint.ts
@@ -6,14 +6,15 @@
 import { vendor, Declaration, Rule } from 'postcss';
 
 import { HintContext } from 'hint/dist/src/lib/hint-context';
-import { IHint, ProblemLocation } from 'hint/dist/src/lib/types';
+import { IHint } from 'hint/dist/src/lib/types';
 import { debug as d } from '@hint/utils/dist/src/debug';
 import { getCSSCodeSnippet } from '@hint/utils/dist/src/report/get-css-code-snippet';
 
 import { StyleEvents, StyleParse } from '@hint/parser-css';
 
 import meta from './meta';
 import { getMessage } from './i18n.import';
+import { getLocationFromNode } from '@hint/utils/dist/src/report';
 
 const debug: debug.IDebugger = d(__filename);
 
@@ -22,32 +23,15 @@ type DeclarationPair = {
     unprefixed: Declaration;
 };
 
-/** Convert `NodeSource` details to a `ProblemLocation`. */
-const getLocation = (decl: Declaration): ProblemLocation => {
-    const start = decl.source && decl.source.start;
-
-    if (start) {
-        return {
-            column: start.column - 1,
-            line: start.line - 1
-        };
-    }
-
-    return {
-        column: 0,
-        line: 0
-    };
-};
-
 /** Determine if the order of a prefixed/unprefixed pair is valid. */
 const validatePair = (pair: Partial<DeclarationPair>): boolean => {
     // Valid if only prefixed or only unprefixed versions exist.
     if (!pair.lastPrefixed || !pair.unprefixed) {
         return false;
     }
 
-    const prefixedLocation = getLocation(pair.lastPrefixed);
-    const unprefixedLocation = getLocation(pair.unprefixed);
+    const prefixedLocation = getLocationFromNode(pair.lastPrefixed) || { column: 0, line: 0 };
+    const unprefixedLocation = getLocationFromNode(pair.unprefixed) || { column: 0, line: 0 };
 
     // Valid if last prefixed line is before unprefixed line.
     if (prefixedLocation.line < unprefixedLocation.line) {
@@ -126,7 +110,7 @@ export default class CssPrefixOrderHint implements IHint {
             ast.walkRules((rule) => {
                 for (const invalidPair of validateRule(rule)) {
                     const message = formatMessage(invalidPair);
-                    const location = getLocation(invalidPair.unprefixed);
+                    const location = getLocationFromNode(invalidPair.unprefixed);
                     const codeSnippet = getCSSCodeSnippet(invalidPair.unprefixed);
 
                     context.report(resource, message, { codeLanguage: 'css', codeSnippet, element, location });

diff --git a/packages/hint-scoped-svg-styles/package.json b/packages/hint-scoped-svg-styles/package.json
@@ -22,7 +22,6 @@
     "eslint-plugin-markdown": "^1.0.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^14.1.0",
-    "postcss": "^7.0.18",
     "rimraf": "^3.0.0",
     "typescript": "^3.6.3"
   },

diff --git a/packages/hint-scoped-svg-styles/src/hint.ts b/packages/hint-scoped-svg-styles/src/hint.ts
@@ -3,16 +3,16 @@
  */
 
 import { HintContext } from 'hint/dist/src/lib/hint-context';
-import { IHint, ProblemLocation } from 'hint/dist/src/lib/types';
+import { IHint } from 'hint/dist/src/lib/types';
 import { debug as d } from '@hint/utils/dist/src/debug';
 import { HTMLElement } from '@hint/utils/dist/src/dom/html';
 
 import { StyleEvents, StyleParse } from '@hint/parser-css';
 import { getCSSCodeSnippet } from '@hint/utils/dist/src/report/get-css-code-snippet';
-import { Rule } from 'postcss';
 
 import meta from './meta';
 import { getMessage } from './i18n.import';
+import { getLocationFromNode } from '@hint/utils/dist/src/report';
 
 const debug: debug.IDebugger = d(__filename);
 
@@ -43,19 +43,6 @@ const isOutsideParentSVG = (parentSVG: HTMLElement) => {
     };
 };
 
-const getLocation = (rule: Rule): ProblemLocation | null => {
-    const start = rule.source && rule.source.start;
-
-    if (start) {
-        return {
-            column: start.column - 1,
-            line: start.line - 1
-        };
-    }
-
-    return null;
-};
-
 /*
  * ------------------------------------------------------------------------------
  * Public
@@ -103,7 +90,7 @@ export default class ScopedSvgStylesHint implements IHint {
 
                     if (matchingElementsOutsideParentSVG.length) {
                         const message = formatRuleMessage(matchingElementsOutsideParentSVG.length);
-                        const location = getLocation(rule);
+                        const location = getLocationFromNode(rule);
                         const codeSnippet = getCSSCodeSnippet(rule);
 
                         context.report(resource, message, {

diff --git a/packages/utils/src/report/get-css-location-from-node.ts b/packages/utils/src/report/get-css-location-from-node.ts
@@ -0,0 +1,20 @@
+import { ChildNode } from 'postcss';
+import { ProblemLocation } from '../types/problems';
+
+export const getLocationFromNode = (node: ChildNode): ProblemLocation | undefined => {
+    const start = node.source && node.source.start;
+    const end = node.source && node.source.end;
+
+    const location: ProblemLocation | {} = {
+        ...start && {
+            column: start.column - 1,
+            line: start.line - 1
+        },
+        ...end && {
+            endColumn: end.column,
+            endLine: end.line
+        }
+    };
+
+    return (start || end) ? location as ProblemLocation : undefined;
+};
diff --git a/packages/utils/src/report/index.ts b/packages/utils/src/report/index.ts
@@ -1,2 +1,3 @@
 export * from './get-css-code-snippet';
 export * from './get-html-code-snippet';
+export * from './get-css-location-from-node';
diff --git a/packages/utils/src/types/problem-location.ts b/packages/utils/src/types/problem-location.ts
@@ -10,4 +10,8 @@ export type ProblemLocation = {
     elementId?: number;
     /** The line number relative to the element where a Problem is */
     elementLine?: number;
+    /** The zero-based column number where a Problem ends */
+    endColumn?: number;
+    /** The zero-based line number where a Problem ends */
+    endLine?: number;
 };