Replace syntaxes with our forks (#4685)

docs/developer-guide/syntaxes.md

@@ -24,7 +24,7 @@ Fixing bugs in syntaxes can take time. stylelint can work around these bug by tu
 
 stylelint currently turns off autofix for sources that contain:
 
-- nested tagged template literals ([issue #4119](https://github.com/stylelint/stylelint/issues/4119))
+- ~~nested tagged template literals ([issue #4119](https://github.com/stylelint/stylelint/issues/4119))~~
 
 ### Add a workaround
 

lib/getPostcssResult.js

@@ -1,6 +1,5 @@
 'use strict';
 
-const dynamicRequire = require('./dynamicRequire');
 const fs = require('fs');
 const LazyResult = require('postcss/lib/lazy-result');
 const postcss = require('postcss');
@@ -45,7 +44,7 @@ module.exports = function (stylelint, options = {}) {
 			if (customSyntax) {
 				try {
 					// TODO TYPES determine which type has customSyntax
-					const useCustomSyntax = /** @type {any} */ dynamicRequire(customSyntax);
+					const useCustomSyntax = /** @type {any} */ require(customSyntax);
 
 					/*
 					 * PostCSS allows for syntaxes that only contain a parser, however,
@@ -67,10 +66,10 @@ module.exports = function (stylelint, options = {}) {
 			} else if (stylelint._options.syntax) {
 				/** @type {{[k: string]: string}} */
 				const syntaxes = {
-					'css-in-js': 'postcss-jsx',
+					'css-in-js': '@stylelint/postcss-css-in-js',
 					html: 'postcss-html',
 					less: 'postcss-less',
-					markdown: 'postcss-markdown',
+					markdown: '@stylelint/postcss-markdown',
 					sass: 'postcss-sass',
 					scss: 'postcss-scss',
 					sugarss: 'sugarss',
@@ -84,7 +83,7 @@ module.exports = function (stylelint, options = {}) {
 					);
 				}
 
-				syntax = dynamicRequire(syntaxFromOptions);
+				syntax = require(syntaxFromOptions);
 			} else if (
 				!(options.codeProcessors && options.codeProcessors.length) ||
 				(options.filePath && /\.(scss|sass|less)$/.test(options.filePath))
@@ -95,6 +94,8 @@ module.exports = function (stylelint, options = {}) {
 
 				syntax = autoSyntax({
 					css: cssSyntax(stylelint),
+					jsx: require('@stylelint/postcss-css-in-js'),
+					markdown: require('@stylelint/postcss-markdown'),
 				});
 			}
 
@@ -155,7 +156,7 @@ function readFile(filePath) {
  */
 function cssSyntax(stylelint) {
 	return {
-		parse: stylelint._options.fix ? dynamicRequire('postcss-safe-parser') : postcss.parse,
+		parse: stylelint._options.fix ? require('postcss-safe-parser') : postcss.parse,
 		stringify: postcss.stringify,
 	};
 }

lib/lintSource.js

@@ -257,47 +257,9 @@ function createEmptyPostcssResult(filePath) {
  * @param {PostcssResult} postcssResult
  * @returns {boolean}
  */
-function isFixCompatible({ stylelint, root }) {
+function isFixCompatible({ stylelint }) {
 	// Check for issue #2643
 	if (stylelint.disabledRanges.all.length) return false;
 
-	// Check for issue #4119
-	if (root && root.source && root.source.lang === 'jsx' && root.nodes) {
-		// Gather all locations of template literals
-		/**
-		 * @typedef TemplateLiteralLocation
-		 * @type {object}
-		 * @property {number} startLine - Start of the template literal.
-		 * @property {number} endLine - End of the template literal
-		 */
-		/** @type {Array<TemplateLiteralLocation>} */
-		const templateLiteralLocations = [];
-
-		root.nodes.forEach((n) => {
-			if (n.source && n.source.start && n.source.input.css !== undefined) {
-				templateLiteralLocations.push({
-					startLine: n.source.start.line,
-					endLine: n.source.start.line + n.source.input.css.split('\n').length,
-				});
-			}
-		});
-
-		// Compare all different template literal locations with eachother
-		for (const location1 of templateLiteralLocations) {
-			for (const location2 of templateLiteralLocations) {
-				// Make sure it's not the same template literal
-				if (location1 !== location2) {
-					// The first location should be before or after the second location.
-					// If not, it's not compatible.
-					if (
-						!(location1.endLine < location2.startLine || location2.endLine < location1.startLine)
-					) {
-						return false;
-					}
-				}
-			}
-		}
-	}
-
 	return true;
 }

lib/rules/indentation/__tests__/javascript.js

@@ -31,6 +31,28 @@ export default <img style=
     }
   }
 />;
+`,
+		},
+		{
+			code: `
+import styled, { css } from "styled-components";
+const Message = styled.p\`
+  padding: 10px;
+  \${(props) => css\`
+    color: #b02d00;
+  \`}
+\`;
+`,
+		},
+		{
+			code: `
+import styled, { css } from "styled-components";
+const Message = styled.p\`
+  padding: 10px;
+  \${(props) => css\`
+  color: #b02d00;
+  \`}
+\`;
 `,
 		},
 	],
@@ -50,6 +72,61 @@ export default <img style={{
 			line: 3,
 			column: 4,
 		},
+		{
+			code: `
+import styled, { css } from "styled-components";
+const Message = styled.p\`
+  padding: 10px;
+  \${(props) => css\`
+   color: #b02d00;
+  \`}
+\`;
+`,
+			fixed: `
+import styled, { css } from "styled-components";
+const Message = styled.p\`
+  padding: 10px;
+  \${(props) => css\`
+    color: #b02d00;
+  \`}
+\`;
+`,
+			message: messages.expected('4 spaces'),
+			line: 6,
+			column: 4,
+		},
+		{
+			code: `
+import styled, { css } from "styled-components";
+const Message = styled.p\`
+  padding: 10px;
+  \${(props) => css\`
+color: #b02d00;
+  \`}
+\`;
+`,
+			fixed: `
+import styled, { css } from "styled-components";
+const Message = styled.p\`
+padding: 10px;
+\${(props) => css\`
+color: #b02d00;
+  \`}
+\`;
+`,
+			warnings: [
+				{
+					message: messages.expected('0 spaces'),
+					line: 4,
+					column: 3,
+				},
+				{
+					message: messages.expected('0 spaces'),
+					line: 5,
+					column: 3,
+				},
+			],
+		},
 	],
 });
 

lib/rules/indentation/index.js

@@ -51,6 +51,11 @@ function rule(space, options = {}, context) {
 
 		// Cycle through all nodes using walk.
 		root.walk((node) => {
+			if (node.type === 'root') {
+				// Ignore nested template literals root in css-in-js lang
+				return;
+			}
+
 			const nodeLevel = indentationLevel(node);
 
 			// Cut out any * and _ hacks from `before`
@@ -74,7 +79,7 @@ function rule(space, options = {}, context) {
 			// it is some other kind of separation, checked by some separate rule
 			if (
 				(lastIndexOfNewline !== -1 ||
-					(isFirstChild && (!parent.document || parent.raws.beforeStart.endsWith('\n')))) &&
+					(isFirstChild && (!getDocument(parent) || parent.raws.beforeStart.endsWith('\n')))) &&
 				before.slice(lastIndexOfNewline + 1) !== expectedOpeningBraceIndentation
 			) {
 				if (context.fix) {
@@ -410,7 +415,7 @@ function rule(space, options = {}, context) {
 }
 
 function getRootBaseIndentLevel(root, baseIndentLevel, space) {
-	const document = root.document;
+	const document = getDocument(root);
 
 	if (!document) {
 		return 0;
@@ -428,6 +433,18 @@ function getRootBaseIndentLevel(root, baseIndentLevel, space) {
 	return indentLevel;
 }
 
+function getDocument(node) {
+	const document = node.document;
+
+	if (document) {
+		return document;
+	}
+
+	const root = node.root();
+
+	return root && root.document;
+}
+
 function inferDocIndentSize(document, space) {
 	let indentSize = document.source.indentSize;
 
@@ -549,12 +566,25 @@ function inferRootIndentLevel(root, baseIndentLevel, indentSize) {
 		if (after.endsWith('\n')) {
 			const document = root.document;
 
-			afterEnd = document.nodes[root.nodes.indexOf(root) + 1];
+			if (document) {
+				const nextRoot = document.nodes[document.nodes.indexOf(root) + 1];
 
-			if (afterEnd) {
-				afterEnd = afterEnd.raws.beforeStart;
+				if (nextRoot) {
+					afterEnd = nextRoot.raws.beforeStart;
+				} else {
+					afterEnd = document.raws.afterEnd;
+				}
 			} else {
-				afterEnd = document.raws.afterEnd;
+				// Nested root node in css-in-js lang
+				const parent = root.parent;
+
+				const nextRoot = parent.nodes[parent.nodes.indexOf(root) + 1];
+
+				if (nextRoot) {
+					afterEnd = nextRoot.raws.beforeStart;
+				} else {
+					afterEnd = root.raws.afterEnd;
+				}
 			}
 		} else {
 			afterEnd = after;