kss-modern 0.0.17 → 0.0.19

package/dist/node/lib/index.d.mts

@@ -25,7 +25,15 @@ interface in2Section {
     wrapper?: string;
     htmlclass?: string;
     bodyclass?: string;
-    sourceFileName: string;
+    source: {
+        css: {
+            file: string;
+            line: number;
+        };
+        markup?: {
+            file: string;
+        };
+    };
     previewFileName: string;
     fullpageFileName: string;
 }

package/dist/node/lib/index.d.ts

@@ -25,7 +25,15 @@ interface in2Section {
     wrapper?: string;
     htmlclass?: string;
     bodyclass?: string;
-    sourceFileName: string;
+    source: {
+        css: {
+            file: string;
+            line: number;
+        };
+        markup?: {
+            file: string;
+        };
+    };
     previewFileName: string;
     fullpageFileName: string;
 }

package/dist/node/lib/index.mjs

@@ -644,8 +644,8 @@ function extractMarkdownPath(input) {
   }
   return path2;
 }
-async function parse(text, config) {
-  const data = kssParser(text).sections.filter((section) => Boolean(section.reference));
+async function parse(input, config) {
+  const data = kssParser(input).sections.filter((section) => Boolean(section.reference));
   const overwrittenSectionsIds = [];
   const sortedData = data.sort((a, b) => {
     return a.reference.localeCompare(b.reference);
@@ -666,6 +666,34 @@ async function parse(text, config) {
       hasMarkdownDescription: true
     };
   }
+  function computeSource(section) {
+    const cssSource = section.source;
+    let sourceMarkup = void 0;
+    const hasExtractableMarkupFile = section.markup.includes('<insert-vite-pug src="');
+    if (hasExtractableMarkupFile) {
+      const regexModifierLine = /<insert-vite-pug src="(.+?)".*(?:[\n\r\u2028\u2029]\s*)?(modifierClass="(.+?)")? *><\/insert-vite-pug>/g;
+      const vitePugTags = section.markup.match(regexModifierLine);
+      if (!vitePugTags)
+        throw new Error("No Vite Pug tags found");
+      vitePugTags.forEach((vitePugTag) => {
+        let pugSourcePath = vitePugTag.match(/src="(.+?)"/)?.[1];
+        if (!pugSourcePath || !pugSourcePath.endsWith(".pug")) {
+          throw new Error("No or invalid Pug source path found");
+        }
+        pugSourcePath = path.join(config.contentDir, pugSourcePath);
+        sourceMarkup = {
+          file: pugSourcePath
+        };
+      });
+    }
+    return {
+      css: {
+        file: cssSource.filename,
+        line: cssSource.line
+      },
+      markup: sourceMarkup
+    };
+  }
   for await (const section of sortedData) {
     if (!section.reference)
       return;
@@ -696,7 +724,7 @@ async function parse(text, config) {
         wrapper: section.wrapper,
         htmlclass: section.htmlclass,
         bodyclass: section.bodyclass,
-        sourceFileName: section.source.filename,
+        source: computeSource(section),
         previewFileName: `preview-${section.reference}.html`,
         fullpageFileName: `fullpage-${section.reference}.html`
       };
@@ -732,7 +760,7 @@ async function parse(text, config) {
           wrapper: section.wrapper,
           htmlclass: section.htmlclass,
           bodyclass: section.bodyclass,
-          sourceFileName: section.source.filename,
+          source: computeSource(section),
           previewFileName: `preview-${section.reference}.html`,
           fullpageFileName: `fullpage-${section.reference}.html`
         });
@@ -761,7 +789,7 @@ async function parse(text, config) {
           htmlclass: section.htmlclass,
           bodyclass: section.bodyclass,
           sections: [],
-          sourceFileName: section.source.filename,
+          source: computeSource(section),
           previewFileName: `preview-${section.reference}.html`,
           fullpageFileName: `fullpage-${section.reference}.html`
         };
@@ -805,7 +833,7 @@ async function generateFullPageFile(data) {
         <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/fullpage-light.svg">
       `}
     ${data.ogImageUrl ? `<meta property="og:image" content="${data.ogImageUrl}">` : ""}
-    <script type="module" src="/styleguide-assets/client-fullpage-1rKiNQVN.js"><\/script>
+    <script type="module" src="/styleguide-assets/client-fullpage-DjIkCnMm.js"><\/script>
     ${computedStyleTags}
 </head>
 <body${data.page.bodyclass ? ` class="${data.page.bodyclass}"` : ""}>
@@ -1068,30 +1096,20 @@ ${html ?? ""}
   `;
 }
 function getMainContentRegular(section, config) {
-  let sourceFilePath = "";
-  if (config.mode === "development" && config.launchInEditor && section.markup.includes('<pug src="')) {
-    const regexModifierLine = /<pug src="(.+?)".*(?:[\n\r\u2028\u2029]\s*)?(modifierClass="(.+?)")? *><\/pug>/g;
-    const vitePugTags = section.markup.match(regexModifierLine);
-    if (!vitePugTags)
-      throw new Error("No Vite Pug tags found");
-    vitePugTags.forEach((vitePugTag) => {
-      const pugSourcePath = vitePugTag.match(/src="(.+?)"/)?.[1];
-      if (!pugSourcePath || !pugSourcePath.endsWith(".pug")) {
-        throw new Error("No or invalid Pug source path found");
-      }
-      sourceFilePath = pugSourcePath;
-    });
-  } else if (config.mode === "development" && section.sourceFileName) {
-    sourceFilePath = path.join(config.contentDir, section.sourceFileName);
-  }
-  const shouldLaunchInEditor = config.mode === "development" && config.launchInEditor && sourceFilePath;
-  let openInEditorPathPhpStorm = "";
-  let openInEditorPathVscode = "";
-  if (shouldLaunchInEditor) {
+  const openInEditorPaths = {
+    css: {},
+    html: {}
+  };
+  if (config.mode === "development" && config.launchInEditor) {
     const computedRootPath = config.launchInEditor && typeof config.launchInEditor === "object" && "rootDir" in config.launchInEditor ? config.launchInEditor.rootDir : process.cwd();
-    const computedFilePath = ensureStartingSlash(path.join(computedRootPath, sourceFilePath));
-    openInEditorPathPhpStorm = shouldLaunchInEditor ? `phpstorm://open?file=${computedFilePath}` : "";
-    openInEditorPathVscode = shouldLaunchInEditor ? `vscode://file//${computedFilePath}` : "";
+    const cssFilePath = ensureStartingSlash(path.join(computedRootPath, section.source.css.file));
+    openInEditorPaths.css.vscode = `vscode://file//${cssFilePath}:${section.source.css.line}`;
+    openInEditorPaths.css.phpstorm = `phpstorm://open?file=${cssFilePath}&line=${section.source.css.line}`;
+    if (section.source.markup && section.source.markup.file) {
+      const htmlFilePath = ensureStartingSlash(path.join(computedRootPath, section.source.markup.file));
+      openInEditorPaths.html.vscode = `vscode://file//${htmlFilePath}`;
+      openInEditorPaths.html.phpstorm = `phpstorm://open?file=${htmlFilePath}`;
+    }
   }
   const computeFigmaExternalLink = (url) => {
     if (!url)
@@ -1100,6 +1118,14 @@ function getMainContentRegular(section, config) {
     urlObj.hostname = "www.figma.com";
     return urlObj.toString();
   };
+  const phpstormOpenLinks = [
+    openInEditorPaths.css.phpstorm,
+    openInEditorPaths.html.phpstorm
+  ].filter(Boolean).join(",");
+  const vscodeOpenLinks = [
+    openInEditorPaths.css.vscode,
+    openInEditorPaths.html.vscode
+  ].filter(Boolean).join(",");
   const codePreviewMarkup = `
     <!-- Preview Box -->
     <div class="mt-4 overflow-hidden rounded-2xl border border-styleguide-border">
@@ -1144,39 +1170,41 @@ function getMainContentRegular(section, config) {
                             >
                         </a>` : ""}
                 
-                    ${openInEditorPathPhpStorm ? `<a
-                            class="hidden @md:inline-flex items-center group/phpstorm gap-1.5 p-4 desktop-device-only cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
-                            href="${openInEditorPathPhpStorm}"
-                        >
-                            <span class="hidden @2xl:inline-block">Open in</span>
-                            <span class="sr-only">PHPStorm</span>
-                            <img 
-                                src="styleguide-assets/icons/phpstorm.svg"
-                                width="70" 
-                                height="70" 
-                                class="size-4 saturate-0 group-hover/phpstorm:saturate-100 transition" 
-                                alt="PHPStorm Logo" 
-                                aria-hidden="true" 
-                            >
-                        </a>
-                      ` : ""}
-                    
-                    ${openInEditorPathVscode ? `<a
-                            class="hidden @md:inline-flex items-center group/vscode gap-1.5 p-4 desktop-device-only cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
-                            href="${openInEditorPathVscode}"
-                        >
-                            <span class="hidden @2xl:inline-block">Open in</span>
-                            <span class="sr-only">VsCode</span>
-                            <img 
-                                src="styleguide-assets/icons/vscode.svg"
-                                width="100" 
-                                height="100" 
-                                class="size-4 saturate-0 group-hover/vscode:saturate-100 transition" 
-                                alt="VsCode Logo" 
-                                aria-hidden="true" 
-                            >
-                        </a>
-                      ` : ""}
+                      ${phpstormOpenLinks.length > 0 ? `<a
+                                  class="hidden @md:inline-flex items-center group/phpstorm gap-1.5 p-4 desktop-device-only cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
+                                  href="#"
+                                  data-link-multiple="${phpstormOpenLinks}"
+                              >
+                                  <span class="hidden @2xl:inline-block">Open in</span>
+                                  <span class="sr-only">PHPStorm</span>
+                                  <img 
+                                      src="styleguide-assets/icons/phpstorm.svg"
+                                      width="70" 
+                                      height="70" 
+                                      class="size-4 saturate-0 group-hover/phpstorm:saturate-100 transition" 
+                                      alt="PHPStorm Logo" 
+                                      aria-hidden="true" 
+                                  >
+                              </a>
+                            ` : ""}
+                          
+                          ${vscodeOpenLinks.length > 0 ? `<a
+                                  class="hidden @md:inline-flex items-center group/vscode gap-1.5 p-4 desktop-device-only cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
+                                  href="#"
+                                  data-link-multiple="${vscodeOpenLinks}"
+                              >
+                                  <span class="hidden @2xl:inline-block">Open in</span>
+                                  <span class="sr-only">VsCode</span>
+                                  <img 
+                                      src="styleguide-assets/icons/vscode.svg"
+                                      width="100" 
+                                      height="100" 
+                                      class="size-4 saturate-0 group-hover/vscode:saturate-100 transition" 
+                                      alt="VsCode Logo" 
+                                      aria-hidden="true" 
+                                  >
+                              </a>
+                            ` : ""}
 
                     <button
                         class="inline-flex items-center gap-1.5 p-4 cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
@@ -1538,8 +1566,8 @@ async function generatePreviewFile(data) {
         <meta name="theme-color" content="${data.theme}">
         <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/preview-light.svg">
       `}
-    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-B8wkm2Af.css">
-    <script type="module" src="/styleguide-assets/client-CgJCvRoi.js"><\/script>
+    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-DDees9Y5.css">
+    <script type="module" src="/styleguide-assets/client-CHYLSUpU.js"><\/script>
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-300-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
@@ -1731,7 +1759,12 @@ globalThis.isWatchMode = false;
 async function buildStyleguide(config) {
   globalThis.styleguideConfiguration = config;
   const styleguideContentPaths = await glob(`${config.contentDir}/**/*.{css,scss}`);
-  const styleguideContent = (await Promise.all(styleguideContentPaths.map((file) => fs.readFile(file, "utf-8")))).join("\n");
+  const styleguideContent = await Promise.all(
+    styleguideContentPaths.map(async (filePath) => ({
+      path: filePath,
+      contents: await fs.readFile(filePath, "utf-8")
+    }))
+  );
   const rawParsedOutput = await parse(styleguideContent, config);
   if (!rawParsedOutput)
     throw new Error("Could not parse content");

package/dist/styleguide-assets/.vite/manifest.json

@@ -1,6 +1,6 @@
 {
-  "_main-BYXbx-16.js": {
-    "file": "main-BYXbx-16.js",
+  "_main-CTV8iVap.js": {
+    "file": "main-CTV8iVap.js",
     "name": "main",
     "dynamicImports": [
       "client/lib/html-validator.ts",
@@ -9,55 +9,55 @@
     ]
   },
   "client/fullpage.ts": {
-    "file": "client-fullpage-1rKiNQVN.js",
+    "file": "client-fullpage-DjIkCnMm.js",
     "name": "client-fullpage",
     "src": "client/fullpage.ts",
     "isEntry": true
   },
   "client/lib/clipboard.ts": {
-    "file": "clipboard-Dr_iJrxX.js",
+    "file": "clipboard-BX-6wcwn.js",
     "name": "clipboard",
     "src": "client/lib/clipboard.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_main-BYXbx-16.js"
+      "_main-CTV8iVap.js"
     ]
   },
   "client/lib/html-validator.ts": {
-    "file": "html-validator-D8B6CYwU.js",
+    "file": "html-validator-bX8Fj2mZ.js",
     "name": "html-validator",
     "src": "client/lib/html-validator.ts",
     "isDynamicEntry": true,
     "dynamicImports": [
-      "node_modules/html-validate/dist/es/browser.js"
+      "node_modules/html-validate/dist/esm/browser.js"
     ]
   },
   "client/lib/icons.ts": {
-    "file": "icons-_8qk0_-D.js",
+    "file": "icons-Bsi5dZux.js",
     "name": "icons",
     "src": "client/lib/icons.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_main-BYXbx-16.js"
+      "_main-CTV8iVap.js"
     ]
   },
   "client/main.ts": {
-    "file": "client-CgJCvRoi.js",
+    "file": "client-CHYLSUpU.js",
     "name": "client",
     "src": "client/main.ts",
     "isEntry": true,
     "imports": [
-      "_main-BYXbx-16.js"
+      "_main-CTV8iVap.js"
     ]
   },
-  "node_modules/html-validate/dist/es/browser.js": {
-    "file": "browser-zT2GwTFu.js",
+  "node_modules/html-validate/dist/esm/browser.js": {
+    "file": "browser-KlOfx-vG.js",
     "name": "browser",
-    "src": "node_modules/html-validate/dist/es/browser.js",
+    "src": "node_modules/html-validate/dist/esm/browser.js",
     "isDynamicEntry": true
   },
   "style.css": {
-    "file": "kss-modern-B8wkm2Af.css",
+    "file": "kss-modern-DDees9Y5.css",
     "src": "style.css"
   }
 }