Fix column position for *-no-important rules

lib/rules/declaration-no-important/__tests__/index.js

@@ -19,21 +19,21 @@ testRule({
 			description: 'with !important',
 			message: messages.rejected,
 			line: 1,
-			column: 18,
+			column: 17,
 		},
 		{
 			code: 'a { color: pink ! important; }',
 			description: 'with ! important',
 			message: messages.rejected,
 			line: 1,
-			column: 19,
+			column: 17,
 		},
 		{
 			code: 'a { color: pink!important; }',
 			description: 'with value!important',
 			message: messages.rejected,
 			line: 1,
-			column: 17,
+			column: 16,
 		},
 	],
 });

lib/rules/declaration-no-important/index.js

@@ -1,8 +1,10 @@
 'use strict';
 
+const getImportantPosition = require('../../utils/getImportantPosition');
 const report = require('../../utils/report');
 const ruleMessages = require('../../utils/ruleMessages');
 const validateOptions = require('../../utils/validateOptions');
+const { assert } = require('../../utils/validateTypes');
 
 const ruleName = 'declaration-no-important';
 
@@ -28,10 +30,14 @@ const rule = (primary) => {
 				return;
 			}
 
+			const pos = getImportantPosition(decl.toString());
+
+			assert(pos);
+
 			report({
 				message: messages.rejected,
 				node: decl,
-				word: 'important',
+				index: pos.index,
 				result,
 				ruleName,
 			});

lib/rules/keyframe-declaration-no-important/__tests__/index.js

@@ -33,49 +33,49 @@ testRule({
 			description: 'with !important',
 			message: messages.rejected,
 			line: 1,
-			column: 44,
+			column: 43,
 		},
 		{
 			code: '@-webkit-keyframes important { from { margin: 1px !important; } }',
 			description: 'with !important',
 			message: messages.rejected,
 			line: 1,
-			column: 52,
+			column: 51,
 		},
 		{
 			code: '@-WEBKIT-KEYFRAMES important { from { margin: 1px !important; } }',
 			description: 'with !important',
 			message: messages.rejected,
 			line: 1,
-			column: 52,
+			column: 51,
 		},
 		{
 			code: '@keyframes important { from { margin: 1px!important; } }',
 			description: 'with !important',
 			message: messages.rejected,
 			line: 1,
-			column: 43,
+			column: 42,
 		},
 		{
 			code: '@keyframes important { from { margin: 1px ! important; } }',
 			description: 'with !important',
 			message: messages.rejected,
 			line: 1,
-			column: 45,
+			column: 43,
 		},
 		{
 			code: '@kEyFrAmEs important { from { margin: 1px !important; } }',
 			description: 'with !important',
 			message: messages.rejected,
 			line: 1,
-			column: 44,
+			column: 43,
 		},
 		{
 			code: '@KEYFRAMES important { from { margin: 1px !important; } }',
 			description: 'with !important',
 			message: messages.rejected,
 			line: 1,
-			column: 44,
+			column: 43,
 		},
 	],
 });

lib/rules/keyframe-declaration-no-important/index.js

@@ -1,8 +1,10 @@
 'use strict';
 
+const getImportantPosition = require('../../utils/getImportantPosition');
 const report = require('../../utils/report');
 const ruleMessages = require('../../utils/ruleMessages');
 const validateOptions = require('../../utils/validateOptions');
+const { assert } = require('../../utils/validateTypes');
 
 const ruleName = 'keyframe-declaration-no-important';
 
@@ -29,10 +31,14 @@ const rule = (primary) => {
 					return;
 				}
 
+				const pos = getImportantPosition(decl.toString());
+
+				assert(pos);
+
 				report({
 					message: messages.rejected,
 					node: decl,
-					word: 'important',
+					index: pos.index,
 					result,
 					ruleName,
 				});

lib/utils/__tests__/getImportantPosition.test.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const getImportantPosition = require('../getImportantPosition');
+
+describe('getImportantPosition', () => {
+	it('returns a position of "!important"', () => {
+		expect(getImportantPosition('color: pink !important')).toEqual({ index: 12, endIndex: 22 });
+	});
+
+	it('returns a position of "!important" with upper-case', () => {
+		expect(getImportantPosition('color: pink !IMPORTANT')).toEqual({ index: 12, endIndex: 22 });
+	});
+
+	it('returns a position of "!important" including whitespaces', () => {
+		expect(getImportantPosition('color: pink !   important')).toEqual({ index: 12, endIndex: 25 });
+	});
+
+	it('returns a position of "!important" including whitespaces with upper-case', () => {
+		expect(getImportantPosition('color: pink !   IMPORTANT')).toEqual({ index: 12, endIndex: 25 });
+	});
+
+	it('returns undefined if no "!important"', () => {
+		expect(getImportantPosition('color: pink')).toBeUndefined();
+	});
+
+	it('returns undefined if just a "important"', () => {
+		expect(getImportantPosition('color: important')).toBeUndefined();
+	});
+
+	it('returns undefined if just a typo of "!important"', () => {
+		expect(getImportantPosition('color: !importanttt')).toBeUndefined();
+	});
+});

lib/utils/getImportantPosition.js

@@ -0,0 +1,17 @@
+'use strict';
+
+/**
+ * Returns a position of `!important` (or `! important` including whitespaces)
+ * from the specified CSS source code. If not found, returns `undefined`.
+ *
+ * @param {string} source
+ * @returns {{ index: number, endIndex: number } | undefined}
+ */
+module.exports = function getImportantPosition(source) {
+	const pattern = /!\s*important\b/gi;
+	const match = pattern.exec(source);
+
+	if (!match) return;
+
+	return { index: match.index, endIndex: pattern.lastIndex };
+};