fix: doesn't apply commented styles (#2321)

Co-authored-by: zede <[email protected]>

Author: Sdju

packages/slidev/node/syntax/transform/in-page-css.ts

@@ -1,17 +1,20 @@
 import type { MarkdownTransformContext } from '@slidev/types'
-import { getCodeBlocks } from './utils'
+import { getCodeBlocks, getCommentBlocks } from './utils'
 
 /**
  * Transform <style> in markdown to scoped style with page selector
  */
 export function transformPageCSS(ctx: MarkdownTransformContext) {
   const codeBlocks = getCodeBlocks(ctx.s.original)
+  const commentBlocks = getCommentBlocks(ctx.s.original)
 
   ctx.s.replace(
     /(\n<style[^>]*>)([\s\S]+?)(<\/style>)/g,
     (full, start, css, end, index) => {
       if (codeBlocks.isInsideCodeblocks(index))
         return full
+      if (commentBlocks.isInsideCommentBlocks(index))
+        return ``
       if (!start.includes('scoped'))
         start = start.replace('<style', '<style scoped')
       return `${start}\n${css}${end}`

packages/slidev/node/syntax/transform/slot-sugar.ts

@@ -1,11 +1,12 @@
 import type { MarkdownTransformContext } from '@slidev/types'
-import { getCodeBlocks } from './utils'
+import { getCodeBlocks, getCommentBlocks } from './utils'
 
 export function transformSlotSugar(
   ctx: MarkdownTransformContext,
 ) {
   const linesWithNewline = ctx.s.original.split(/(\r?\n)/g)
   const codeBlocks = getCodeBlocks(ctx.s.original)
+  const commentBlocks = getCommentBlocks(ctx.s.original)
 
   const lines: string[] = []
   for (let i = 0; i < linesWithNewline.length; i += 2) {
@@ -20,7 +21,7 @@ export function transformSlotSugar(
   lines.forEach((line) => {
     const start = offset
     offset += line.length
-    if (codeBlocks.isInsideCodeblocks(offset))
+    if (codeBlocks.isInsideCodeblocks(offset) || commentBlocks.isInsideCommentBlocks(offset))
       return
     const match = line.match(/^::\s*([\w.\-:]+)\s*::(\s*)$/)
     if (match) {

packages/slidev/node/syntax/transform/utils.ts

@@ -25,6 +25,28 @@ export function getCodeBlocks(md: string) {
   }
 }
 
+export function getCommentBlocks(md: string) {
+  const commentBlocks = Array
+    .from(md.matchAll(/<!--[\s\S]*?-->/g))
+    .map((m) => {
+      const start = m.index!
+      const end = m.index! + m[0].length
+      const startLine = md.slice(0, start).match(/\n/g)?.length || 0
+      const endLine = md.slice(0, end).match(/\n/g)?.length || 0
+      return [start, end, startLine, endLine]
+    })
+
+  return {
+    commentBlocks,
+    isInsideCommentBlocks(idx: number) {
+      return commentBlocks.some(([s, e]) => s <= idx && idx <= e)
+    },
+    isLineInsideCommentBlocks(line: number) {
+      return commentBlocks.some(([, , s, e]) => s <= line && line <= e)
+    },
+  }
+}
+
 /**
  * Escape `{{` in code block to prevent Vue interpret it, #99, #1316
  */