Add support for astro component (ota-meshi#22)

* Add support astro component

* update

README.md

@@ -9,7 +9,7 @@
 > The shareable HTML (and HTML-like) config for [Stylelint].
 
 This config bundles the [`postcss-html` custom syntax](https://github.com/ota-meshi/postcss-html) and configures it.  
-If you use this config in your Stylelint config, HTML, XML, [Vue], [Svelte] and [PHP] files will be parsable. The Stylelint rules you have configured will be able to check these files.
+If you use this config in your Stylelint config, HTML, XML, [Vue], [Svelte], [Astro], and [PHP] files will be parsable. The Stylelint rules you have configured will be able to check these files.
 
 > **Requirements**
 >
@@ -59,6 +59,7 @@ If you want to enable parsing for only specific language, use each language conf
     "stylelint-config-html/xml",
     "stylelint-config-html/vue",
     "stylelint-config-html/svelte",
+    "stylelint-config-html/astro",
     "stylelint-config-html/php"
   ]
 }
@@ -84,6 +85,8 @@ Example **.vscode/settings.json**:
       "vue",
       // ↓ Add "svelte" language.
       "svelte",
+      // ↓ Add "astro" language.
+      "astro",
   ]
 ```
 
@@ -94,5 +97,6 @@ See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
 [Stylelint]: https://stylelint.io/
 [Vue]: https://v3.vuejs.org/guide/single-file-component.html
 [Svelte]: https://svelte.dev/docs#Component_format
+[Astro]: https://docs.astro.build/core-concepts/astro-components/
 [PHP]: https://www.php.net/manual/en/intro-whatis.php
 [PostCss]: https://github.com/postcss/postcss

astro.js

@@ -0,0 +1,14 @@
+"use strict";
+
+const extensions = [
+  // https://github.com/withastro/language-tools/blob/main/packages/vscode/package.json
+  ".astro",
+];
+module.exports = {
+  overrides: [
+    {
+      files: extensions.flatMap((ext) => [`*${ext}`, `**/*${ext}`]),
+      customSyntax: "postcss-html",
+    },
+  ],
+};

index.js

@@ -6,6 +6,7 @@ module.exports = {
     require.resolve("./vue.js"),
     require.resolve("./php.js"),
     require.resolve("./svelte.js"),
+    require.resolve("./astro.js"),
     require.resolve("./xml.js"),
   ],
 };

package.json

@@ -17,6 +17,7 @@
     "html.js",
     "vue.js",
     "svelte.js",
+    "astro.js",
     "php.js",
     "xml.js"
   ],

tests/fixtures/integrations/stylelint/package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "description": "",
   "devDependencies": {
-    "postcss-html": "^1.0.1",
+    "postcss-html": "^1.5.0",
     "stylelint": "^14.0.0-0",
     "stylelint-config-html": "file:../../../../",
     "stylelint-config-recommended": "^6.0.0-0"

tests/fixtures/integrations/stylelint/src/invalid.astro

@@ -0,0 +1,6 @@
+---
+let value, input, style, bar
+const foo = 100 <input &&( style="color: #fff;" )&& bar > 42
+---
+
+<input class={`${value > 100 ? 'over-100' : ''}`} style="color: #00;" />

tests/fixtures/integrations/stylelint/src/invalid.svelte

@@ -0,0 +1,4 @@
+<script>
+	let value
+</script>
+<input class:over-100={  ((value > 100) )  } bind:value={value} style="color: #ff">

tests/fixtures/integrations/stylelint/src/valid.astro

@@ -0,0 +1,6 @@
+---
+let value, input, style, bar
+const foo = 100 <input &&( style="color: #ff;" )&& bar > 42
+---
+
+<input class={`${value > 100 ? 'over-100' : ''}`} style="color: #000;" />

tests/lib/index.js

@@ -29,6 +29,9 @@ describe("Integration with stylelint", () => {
   it("should lint without errors with svelte", () => {
     cp.execSync(`${STYLELINT} src/valid.svelte`, { stdio: "inherit" });
   });
+  it("should lint without errors with astro", () => {
+    cp.execSync(`${STYLELINT} src/valid.astro`, { stdio: "inherit" });
+  });
   it("should lint without errors with php", () => {
     cp.execSync(`${STYLELINT} src/valid.php`, { stdio: "inherit" });
   });
@@ -37,15 +40,31 @@ describe("Integration with stylelint", () => {
       cp.execSync(`${STYLELINT} src/invalid.html`, { stdio: "inherit" });
       fail("Expect an error, but without errors");
     } catch {
-      // Expected!s
+      // Expected!
     }
   });
   it("should lint with errors with vue", () => {
     try {
       cp.execSync(`${STYLELINT} src/invalid.vue`, { stdio: "inherit" });
       fail("Expect an error, but without errors");
     } catch {
-      // Expected!s
+      // Expected!
+    }
+  });
+  it("should lint with errors with svelte", () => {
+    try {
+      cp.execSync(`${STYLELINT} src/invalid.svelte`, { stdio: "inherit" });
+      fail("Expect an error, but without errors");
+    } catch {
+      // Expected!
+    }
+  });
+  it("should lint with errors with astro", () => {
+    try {
+      cp.execSync(`${STYLELINT} src/invalid.astro`, { stdio: "inherit" });
+      fail("Expect an error, but without errors");
+    } catch {
+      // Expected!
     }
   });
 });