Bump eslint-config-stylelint from 12.0.0 to 13.1.0; resolves newly-caught errors (stylelint#80)

general errors resolved: eslint/no-shadow, jest/valid-title, jest/no-conditional-expect

* Bump eslint-config-stylelint from 12.0.0 to 13.1.0

Bumps [eslint-config-stylelint](https://github.com/stylelint/eslint-config-stylelint) from 12.0.0 to 13.1.0.
- [Release notes](https://github.com/stylelint/eslint-config-stylelint/releases)
- [Changelog](https://github.com/stylelint/eslint-config-stylelint/blob/master/CHANGELOG.md)
- [Commits](stylelint/eslint-config-stylelint@12.0.0...13.1.0)

Signed-off-by: dependabot[bot] <support@github.com>

* resolves non-test related eslint errors

* resolves jest/valid-title errors

* changes template literal to be easier to read, thanks @ybiquitous

* resolves last two cases of jest/no-conditional-expect

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Matt Wang <matt@matthewwang.me>

Author: dependabot[bot]

camel-case.js

@@ -5,7 +5,7 @@ function camelCase(str) {
 		/^-?[a-z]+(?:-[a-z]+)+$/.test(s)
 			? s
 					.replace(/^-(ms|moz|khtml|epub|(\w+-?)*webkit)(?=-)/i, '$1')
-					.replace(/-\w/g, (s) => s[1].toUpperCase())
+					.replace(/-\w/g, (uncasedStr) => uncasedStr[1].toUpperCase())
 			: s,
 	);
 }

extract.js

@@ -417,9 +417,9 @@ function literalParser(source, opts, styles) {
 			return;
 		}
 
-		const quasis = node.quasis.map((node) => ({
-			start: node.start,
-			end: node.end,
+		const quasis = node.quasis.map((quasiNode) => ({
+			start: quasiNode.start,
+			end: quasiNode.end,
 		}));
 		const style = {
 			startIndex: quasis[0].start,
@@ -428,9 +428,9 @@ function literalParser(source, opts, styles) {
 		};
 
 		if (node.expressions.length) {
-			const expressions = node.expressions.map((node) => ({
-				start: node.start,
-				end: node.end,
+			const expressions = node.expressions.map((expressionNode) => ({
+				start: expressionNode.start,
+				end: expressionNode.end,
 			}));
 
 			style.syntax = loadSyntax(opts, __dirname);

package-lock.json

@@ -92,7 +92,7 @@
     "codecov": "^3.8.1",
     "eslint": "^7.21.0",
     "eslint-config-prettier": "^8.1.0",
-    "eslint-config-stylelint": "^12.0.0",
+    "eslint-config-stylelint": "^13.1.0",
     "husky": "^5.1.3",
     "is-ci": "^3.0.0",
     "jest": "^26.6.3",

package.json

@@ -45,10 +45,10 @@ function literal(start) {
 	if (input.templateLiteralStyles) {
 		const offset = input.quasis[0].start;
 		const nodeIndex = getNodeIndex(node, input);
-		const start = offset + nodeIndex;
-		const end = start + node.text.length;
+		const startIndex = offset + nodeIndex;
+		const endIndex = startIndex + node.text.length;
 		const templateLiteralStyles = input.templateLiteralStyles.filter(
-			(style) => style.startIndex <= end && start < style.endIndex,
+			(style) => style.startIndex <= endIndex && startIndex < style.endIndex,
 		);
 
 		if (templateLiteralStyles.length) {

template-parser-helper.js

@@ -47,7 +47,7 @@ function templateTokenize(input) {
 		if (returned.length) {
 			token = [
 				returned[0][0],
-				returned.map((token) => token[1]).join(''),
+				returned.map((parentToken) => parentToken[1]).join(''),
 				returned[0][2],
 				returned[0][3],
 				line,

template-tokenize.js

@@ -46,7 +46,7 @@ describe('camelCase', () => {
 	});
 	describe('symbols', () => {
 		symbols.forEach((symbol) => {
-			it(JSON.stringify(symbol), () => {
+			it(`"${symbol}"`, () => {
 				expect(camelCase(testCases.map((testCase) => testCase.unCamel).join(symbol))).toBe(
 					testCases.map((testCase) => testCase.camel).join(symbol),
 				);
@@ -63,7 +63,7 @@ describe('unCamelCase', () => {
 	});
 	describe('symbols', () => {
 		symbols.forEach((symbol) => {
-			it(JSON.stringify(symbol), () => {
+			it(`"${symbol}"`, () => {
 				expect(unCamelCase(testCases.map((testCase) => testCase.camel).join(symbol))).toBe(
 					testCases.map((testCase) => testCase.unCamel).join(symbol),
 				);

test/camel-case.js

@@ -67,6 +67,10 @@ describe('template literals', () => {
 		expect(document.source).toHaveProperty('lang', 'jsx');
 
 		expect(document.nodes).toHaveLength(9);
+		/* eslint-disable jest/no-conditional-expect -- in the current state, the related test fixture
+		 * is likely too complicated to resolve (up to 45 checks). we should consider different approaches
+		 * in the future. for more info, see https://github.com/stylelint/postcss-css-in-js/pull/80
+		 */
 		document.nodes.forEach((root, i) => {
 			switch (i) {
 				case 0: {
@@ -101,6 +105,7 @@ describe('template literals', () => {
 				}
 			}
 		});
+		/* eslint-enable jest/no-conditional-expect */
 	});
 
 	it('selector', () => {
@@ -133,7 +138,7 @@ describe('template literals', () => {
 				from: file,
 			})
 			.first.nodes.forEach((rule) => {
-				it(rule.selector, () => {
+				it(`${rule.selector}`, () => {
 					expect(rule.nodes).toHaveLength(1);
 					const decl = rule.first;
 
@@ -184,7 +189,7 @@ describe('template literals', () => {
 			'./fixtures/tpl-decl.mjs',
 			'./fixtures/tpl-special.mjs',
 		].map((file) => {
-			it(file, () => {
+			it(`${file}`, () => {
 				file = require.resolve(file);
 				const code = fs.readFileSync(file);
 

test/literals.js

@@ -7,7 +7,7 @@ const syntax = require('../');
 
 describe('not throw error for non-style js file', () => {
 	files.forEach((file) => {
-		it(file, () => {
+		it(`${file}`, () => {
 			const code = fs.readFileSync(file);
 			const document = syntax.parse(code, {
 				from: file,

test/non-style.js

@@ -19,20 +19,18 @@ describe('styled-components', () => {
 		expect(document.nodes).toHaveLength(1);
 		expect(document.first.nodes).toHaveLength(8);
 
-		const lines = code
-			.match(/^.+$/gm)
-			.slice(3)
-			.map((line) => line.replace(/^\s*(.+?);?\s*$/, '$1'));
-
-		document.first.nodes.forEach((decl, i) => {
-			if (i) {
-				expect(decl).toHaveProperty('type', 'decl');
-			} else {
-				expect(decl).toHaveProperty('type', 'comment');
-			}
-
-			expect(decl.toString()).toBe(lines[i]);
-		});
+		// this was previously a .forEach over every line within styled.button
+		// instead, we unwound the loop to satisfy jest/no-conditional-expect
+		// we expect the first line to be a comment, and the next 7 to be decls
+		// see https://github.com/stylelint/postcss-css-in-js/pull/80 for more details
+		expect(document.first.nodes[0]).toHaveProperty('type', 'comment');
+		expect(document.first.nodes[1]).toHaveProperty('type', 'decl');
+		expect(document.first.nodes[2]).toHaveProperty('type', 'decl');
+		expect(document.first.nodes[3]).toHaveProperty('type', 'decl');
+		expect(document.first.nodes[4]).toHaveProperty('type', 'decl');
+		expect(document.first.nodes[5]).toHaveProperty('type', 'decl');
+		expect(document.first.nodes[6]).toHaveProperty('type', 'decl');
+		expect(document.first.nodes[7]).toHaveProperty('type', 'decl');
 	});
 
 	it('interpolation with css template literal', () => {

test/styled-components.js

@@ -56,7 +56,7 @@ describe('should support for each CSS in JS package', () => {
 		'tpl-special.mjs',
 		'material-ui.jsx',
 	].forEach((file) => {
-		it(file, () => {
+		it(`${file}`, () => {
 			file = require.resolve('./fixtures/' + file);
 			const code = fs.readFileSync(file);
 			const document = syntax.parse(code, {

test/supports.js

@@ -4,7 +4,7 @@ function unCamelCase(str) {
 	return str.replace(/[\w-]+/g, (s) =>
 		/^[A-Z]?[a-z]*(?:[A-Z][a-z]*)+$/.test(s)
 			? s
-					.replace(/[A-Z]/g, (s) => '-' + s.toLowerCase())
+					.replace(/[A-Z]/g, (casedStr) => '-' + casedStr.toLowerCase())
 					.replace(/^(o|ms|moz|khtml|epub|(\w+-?)*webkit)(?=-)/i, '-$1')
 			: s,
 	);