docs-svelte-kit/src/lib/footer/Footer.svelte

@@ -42,7 +42,7 @@
     <div class="edit-link">
       <a
         href="https://github.com/ota-meshi/eslint-plugin-svelte/edit/main/docs/{markdownPath(
-          $page.path,
+          $page.url.pathname,
         )}"
         target="_blank"
         rel="noopener noreferrer">Edit this page</a

docs-svelte-kit/src/lib/sidemenu/UlMenu.svelte

@@ -1,6 +1,6 @@
 <script>
   import { page } from "$app/stores"
-  import { isActive } from "../utils.js"
+  import { isActive, stripBaseUrl } from "../utils.js"
   import { base as baseUrl } from "$app/paths"
   export let children
   export let level = 1
@@ -17,8 +17,8 @@
           class="sidebar-menu-item-title"
           class:active={item.active ||
             (item.path && isActive(item.path, $page))}
-          href="{baseUrl}{item.path || `${$page.path}#${item.id}`}"
-          >{item.title}</a
+          href="{baseUrl}{item.path ||
+            `${stripBaseUrl($page.url.pathname)}#${item.id}`}">{item.title}</a
         >
       {:else}
         <span class="sidebar-menu-item-title">{item.title}</span>

docs-svelte-kit/src/lib/utils.js

@@ -3,6 +3,15 @@ import { rules } from "../../../src/utils/rules.ts"
 import { readable, writable } from "svelte/store"
 // eslint-disable-next-line node/no-missing-import -- ignore
 import { page } from "$app/stores"
+// eslint-disable-next-line node/no-missing-import -- ignore
+import { base as baseUrl } from "$app/paths"
+
+export function stripBaseUrl(path) {
+  if (path.startsWith(baseUrl)) {
+    return path.slice(baseUrl.length)
+  }
+  return path
+}
 
 const svelteRules = rules.filter((rule) => !rule.meta.deprecated)
 
@@ -53,10 +62,13 @@ const SIDE_MENU = {
 }
 
 export function isActive(path, $page) {
-  return markdownPath($page.path) === markdownPath(path)
+  return markdownPath($page.url.pathname) === markdownPath(path)
 }
 
 export function markdownPath(path) {
+  // eslint-disable-next-line no-param-reassign -- ignore
+  path = stripBaseUrl(path)
+
   let normalized = path === "/" ? "README" : path.replace(/^\/|\/$/g, "")
   return `${normalized}.md`
 }
@@ -84,8 +96,9 @@ export const menuItems = readable([], function start(set) {
 function generateMenu($page, toc) {
   const result = []
   const [, menus] =
-    Object.entries(SIDE_MENU).find(([k]) => $page.path.startsWith(k)) ||
-    SIDE_MENU["/"]
+    Object.entries(SIDE_MENU).find(([k]) =>
+      stripBaseUrl($page.url.pathname).startsWith(k),
+    ) || SIDE_MENU["/"]
   for (const { path, title, children } of menus) {
     const active = isActive(path, $page)
     if (active) {

docs/__layout.svelte

@@ -3,8 +3,8 @@
   const docs = import.meta.glob("./**/*.md")
 
   /** @type {import('@sveltejs/kit').Load} */
-  export async function load({ page }) {
-    const markdown = `./${markdownPath(page.path)}`
+  export async function load({ url }) {
+    const markdown = `./${markdownPath(url.pathname)}`
     if (docs[markdown]) {
       return {
         props: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ota-meshi/eslint-plugin-svelte",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "publishConfig": {
     "access": "public"
   },
@@ -56,7 +56,7 @@
     "debug": "^4.3.1",
     "eslint-utils": "^3.0.0",
     "sourcemap-codec": "^1.4.8",
-    "svelte-eslint-parser": "^0.10.0"
+    "svelte-eslint-parser": "^0.11.0"
   },
   "peerDependencies": {
     "eslint": "^7.0.0 || ^8.0.0-0",
@@ -72,7 +72,7 @@
     "@babel/types": "^7.16.0",
     "@fontsource/fira-mono": "^4.5.0",
     "@ota-meshi/eslint-plugin": "^0.10.0",
-    "@ota-meshi/eslint-plugin-svelte": "^0.19.0",
+    "@ota-meshi/eslint-plugin-svelte": "^0.20.0",
     "@sindresorhus/slugify": "^2.1.0",
     "@sveltejs/adapter-static": "^1.0.0-next.21",
     "@sveltejs/kit": "^1.0.0-next.201",
@@ -118,8 +118,8 @@
     "semver": "^7.3.5",
     "stylelint": "^14.0.0",
     "stylelint-config-standard": "^24.0.0",
-    "svelte": "^3.37.0",
-    "svelte-adapter-ghpages": "0.0.1",
+    "svelte": "^3.46.1",
+    "svelte-adapter-ghpages": "0.0.2",
     "ts-node": "^10.0.0",
     "typescript": "^4.5.2",
     "vite-plugin-svelte-md": "^0.1.3",

src/rules/html-quotes.ts

@@ -148,17 +148,17 @@ export default createRule("html-quotes", {
     }
 
     /** Verify for standard attribute */
-    function verifyForValues(attr: AST.SvelteAttribute) {
+    function verifyForValues(
+      attr: AST.SvelteAttribute | AST.SvelteStyleDirective,
+    ) {
       const quoteAndRange = getAttributeValueQuoteAndRange(attr, sourceCode)
       verifyQuote(preferQuote, quoteAndRange)
     }
 
     /** Verify for dynamic attribute */
     function verifyForDynamicMustacheTag(
-      attr: AST.SvelteAttribute,
-      valueNode: AST.SvelteMustacheTag & {
-        kind: "text"
-      },
+      attr: AST.SvelteAttribute | AST.SvelteStyleDirective,
+      valueNode: AST.SvelteMustacheTagText,
     ) {
       const quoteAndRange = getAttributeValueQuoteAndRange(attr, sourceCode)
       const text = sourceCode.text.slice(...valueNode.range)
@@ -192,7 +192,9 @@ export default createRule("html-quotes", {
     }
 
     return {
-      SvelteAttribute(node) {
+      "SvelteAttribute, SvelteStyleDirective"(
+        node: AST.SvelteAttribute | AST.SvelteStyleDirective,
+      ) {
         if (
           node.value.length === 1 &&
           node.value[0].type === "SvelteMustacheTag"

src/rules/indent-helpers/svelte.ts

@@ -87,6 +87,7 @@ export function defineVisitor(context: IndentContext): NodeListener {
       node:
         | AST.SvelteAttribute
         | AST.SvelteDirective
+        | AST.SvelteStyleDirective
         | AST.SvelteSpecialDirective,
     ) {
       const keyToken = sourceCode.getFirstToken(node)
@@ -102,7 +103,11 @@ export function defineVisitor(context: IndentContext): NodeListener {
         ) {
           offsets.setOffsetToken(valueStartToken, 1, keyToken)
 
-          const values = node.type === "SvelteAttribute" ? node.value : []
+          const values =
+            node.type === "SvelteAttribute" ||
+            node.type === "SvelteStyleDirective"
+              ? node.value
+              : []
           // process quoted
           let processedValues = false
           if (valueStartToken.type === "Punctuator") {
@@ -134,6 +139,9 @@ export function defineVisitor(context: IndentContext): NodeListener {
     SvelteDirective(node: AST.SvelteDirective) {
       visitor.SvelteAttribute(node)
     },
+    SvelteStyleDirective(node: AST.SvelteStyleDirective) {
+      visitor.SvelteAttribute(node)
+    },
     SvelteSpecialDirective(node: AST.SvelteSpecialDirective) {
       visitor.SvelteAttribute(node)
     },

src/rules/max-attributes-per-line.ts

@@ -72,6 +72,7 @@ export default createRule("max-attributes-per-line", {
         attribute.type === "SvelteAttribute" ||
         attribute.type === "SvelteShorthandAttribute" ||
         attribute.type === "SvelteDirective" ||
+        attribute.type === "SvelteStyleDirective" ||
         attribute.type === "SvelteSpecialDirective"
       ) {
         name = sourceCode.text.slice(...attribute.key.range!)

src/rules/mustache-spacing.ts

@@ -193,6 +193,8 @@ export default createRule("mustache-spacing", {
         let option: OptionValue
         if (node.parent.type === "SvelteAttribute") {
           option = options.attributesAndProps
+        } else if (node.parent.type === "SvelteStyleDirective") {
+          option = options.directiveExpressions
         } else {
           option = options.textExpressions
         }

src/rules/no-useless-mustaches.ts

@@ -126,7 +126,10 @@ export default createRule("no-useless-mustaches", {
 
           const unescaped = text.replace(/\\([\s\S])/g, "$1")
 
-          if (node.parent.type === "SvelteAttribute") {
+          if (
+            node.parent.type === "SvelteAttribute" ||
+            node.parent.type === "SvelteStyleDirective"
+          ) {
             const div = sourceCode.text.slice(
               node.parent.key.range[1],
               node.parent.value[0].range[0],

src/utils/ast-utils.ts

@@ -239,6 +239,7 @@ export function getAttributeValueQuoteAndRange(
   attr:
     | SvAST.SvelteAttribute
     | SvAST.SvelteDirective
+    | SvAST.SvelteStyleDirective
     | SvAST.SvelteSpecialDirective,
   sourceCode: SourceCode,
 ): QuoteAndRange | null {
@@ -372,10 +373,11 @@ function getAttributeValueRangeTokens(
   attr:
     | SvAST.SvelteAttribute
     | SvAST.SvelteDirective
+    | SvAST.SvelteStyleDirective
     | SvAST.SvelteSpecialDirective,
   sourceCode: SourceCode,
 ) {
-  if (attr.type === "SvelteAttribute") {
+  if (attr.type === "SvelteAttribute" || attr.type === "SvelteStyleDirective") {
     if (!attr.value.length) {
       return null
     }

svelte-kit-import-hook.mjs

@@ -43,11 +43,7 @@ function ________adjustModule(m) {
       default: ________adjustModule(m.default)
     }
     for (const key of Object.keys(m.default)) {
-      if (typeof m.default[key] === 'function') {
-        result[key] = (...args) => m.default[key](...args);
-      } else {
-        result[key] = m.default[key]
-      }
+      result[key] = m.default[key]
     }
     return result
   }

svelte.config.js

@@ -16,6 +16,10 @@ esbuild.buildSync({
     "path",
     "cross-spawn",
     "prismjs",
+    "os",
+    "fs",
+    "stream",
+    "zlib",
     "./docs-svelte-kit/build-system/build.js",
   ],
 })

tests/fixtures/rules/html-quotes/invalid/test01-errors.json

@@ -21,7 +21,12 @@
   },
   {
     "message": "Unexpected to be enclosed by any quotes.",
-    "line": 16,
+    "line": 14,
+    "column": 20
+  },
+  {
+    "message": "Unexpected to be enclosed by any quotes.",
+    "line": 18,
     "column": 10
   }
 ]

tests/fixtures/rules/html-quotes/invalid/test01-input.svelte

@@ -10,6 +10,8 @@
 <input type="text" bind:value />
 <!-- prettier-ignore -->
 <input type='text' bind:value="{value}" />
+<!-- prettier-ignore -->
+<input style:color="{value}" />
 
 <img {src} alt="{name} dances." />
 <!-- prettier-ignore -->

tests/fixtures/rules/html-quotes/invalid/test01-output.svelte

@@ -10,6 +10,8 @@
 <input type="text" bind:value />
 <!-- prettier-ignore -->
 <input type="text" bind:value={value} />
+<!-- prettier-ignore -->
+<input style:color={value} />
 
 <img {src} alt="{name} dances." />
 <!-- prettier-ignore -->

tests/fixtures/rules/indent/invalid/style-directive01-errors.json

@@ -0,0 +1,107 @@
+[
+  {
+    "message": "Expected indentation of 2 spaces but found 0 spaces.",
+    "line": 8,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 2 spaces but found 0 spaces.",
+    "line": 13,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 14,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 15,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 6 spaces but found 0 spaces.",
+    "line": 16,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 8 spaces but found 0 spaces.",
+    "line": 17,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 6 spaces but found 0 spaces.",
+    "line": 18,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 19,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 2 spaces but found 0 spaces.",
+    "line": 24,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 25,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 26,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 6 spaces but found 0 spaces.",
+    "line": 27,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 28,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 2 spaces but found 0 spaces.",
+    "line": 33,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 34,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 35,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 2 spaces but found 0 spaces.",
+    "line": 40,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 41,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 42,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 6 spaces but found 0 spaces.",
+    "line": 43,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 4 spaces but found 0 spaces.",
+    "line": 44,
+    "column": 1
+  }
+]