feat: Add CSS tolerant parsing mode (eslint#78)

Author: nzakas

package-lock.json

@@ -38,7 +38,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-markdown": "^6.2.5",
     "@codemirror/language": "^6.10.3",
-    "@eslint/css": "^0.1.0",
+    "@eslint/css": "^0.2.0",
     "@eslint/js": "^9.9.0",
     "@eslint/json": "^0.4.1",
     "@eslint/markdown": "^6.1.1",

package.json

@@ -10,9 +10,14 @@ import { ErrorState } from "../error-boundary";
 export const CssAst: FC = () => {
 	const { code, cssOptions, viewModes } = useExplorer();
 	const { astView } = viewModes;
-	const { cssMode } = cssOptions;
+	const { cssMode, tolerant } = cssOptions;
 	const language = css.languages[cssMode];
-	const result = language.parse({ body: code.css });
+	const result = language.parse(
+		{ body: code.css },
+		{
+			languageOptions: { tolerant },
+		},
+	);
 
 	if (!result.ok) {
 		const message = parseError(result.errors[0]);

src/components/ast/css-ast.tsx

@@ -67,7 +67,21 @@ const MarkdownPanel: React.FC = () => {
 };
 
 const CssPanel: React.FC = () => {
-	return null;
+	const explorer = useExplorer();
+	const { cssOptions, setCssOptions } = explorer;
+	const { tolerant } = cssOptions;
+	return (
+		<div className="flex items-center gap-1.5">
+			<Switch
+				id="tolerant"
+				checked={tolerant}
+				onCheckedChange={(value: boolean) => {
+					setCssOptions({ ...cssOptions, tolerant: value });
+				}}
+			/>
+			<Label htmlFor="tolerant">Tolerant Parsing</Label>
+		</div>
+	);
 };
 
 const JavaScriptPanel = () => {

src/components/options.tsx

@@ -45,6 +45,7 @@ export type MarkdownOptions = {
 
 export type CssOptions = {
 	cssMode: CssMode;
+	tolerant: boolean;
 };
 
 export type PathIndex = {

src/hooks/use-explorer.ts

@@ -385,6 +385,7 @@ export const defaultMarkdownOptions: MarkdownOptions = {
 
 export const defaultCssOptions: CssOptions = {
 	cssMode: "css",
+	tolerant: false,
 };
 
 export const defaultPathIndex: PathIndex = {