@katabatic/compiler 1.1.0 → 1.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@katabatic/compiler",
   "license": "MIT",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "repository": {
     "type": "git",

package/src/css-matcher.js

@@ -36,65 +36,69 @@ function matchSelectors(selectors, template) {
     if (selectors.length === 0) return false
 
     let result = false
-    walk(template, undefined, {
-        Element: (node, ctx) => {
-            ctx.next()
 
-            let scopedIdAttribute
-            let scopedClassAttribute
-            let scopedElement
+    function Visitor(node, ctx) {
+        ctx.next()
+
+        let scopedIdAttribute
+        let scopedClassAttribute
+        let scopedElement
 
-            let classAttribute
+        let classAttribute
 
-            for (const selector of selectors) {
-                switch (selector.type) {
-                    case 'TypeSelector':
-                        if (selector.name === node.name) {
-                            classAttribute ??= node.attributes.find((a) => a.name === 'class')
-                            scopedElement = node
-                            scopedClassAttribute = classAttribute
-                            break
-                        }
-                        return
-                    case 'PseudoClassSelector':
+        for (const selector of selectors) {
+            switch (selector.type) {
+                case 'TypeSelector':
+                    if (selector.name === node.name) {
                         classAttribute ??= node.attributes.find((a) => a.name === 'class')
                         scopedElement = node
                         scopedClassAttribute = classAttribute
                         break
-                    case 'IdSelector':
-                        const idAttribute = node.attributes.find((a) => a.name === 'id')
-                        if (idAttribute?.value[0].data === selector.name) {
-                            scopedIdAttribute = idAttribute
-                            break
-                        }
-                        return
-                    case 'ClassSelector':
-                        classAttribute ??= node.attributes.find((a) => a.name === 'class')
-                        const classes = classAttribute?.value[0].data.split(/\s+/)
-
-                        if (classes?.includes(selector.name)) {
-                            scopedClassAttribute = classAttribute
-                            break
-                        }
-                        return
-                }
-            }
+                    }
+                    return
+                case 'PseudoClassSelector':
+                    classAttribute ??= node.attributes.find((a) => a.name === 'class')
+                    scopedElement = node
+                    scopedClassAttribute = classAttribute
+                    break
+                case 'IdSelector':
+                    const idAttribute = node.attributes.find((a) => a.name === 'id')
+                    if (idAttribute?.value[0].data === selector.name) {
+                        scopedIdAttribute = idAttribute
+                        break
+                    }
+                    return
+                case 'ClassSelector':
+                    classAttribute ??= node.attributes.find((a) => a.name === 'class')
+                    const classes = classAttribute?.value[0].data.split(/\s+/)
 
-            if (scopedIdAttribute) {
-                scopedIdAttribute.metadata ??= {}
-                scopedIdAttribute.metadata.isScoped = true
-            }
-            if (scopedClassAttribute) {
-                scopedClassAttribute.metadata ??= {}
-                scopedClassAttribute.metadata.isScoped = true
-            }
-            if (scopedElement) {
-                scopedElement.metadata ??= {}
-                scopedElement.metadata.isScoped = true
+                    if (classes?.includes(selector.name)) {
+                        scopedClassAttribute = classAttribute
+                        break
+                    }
+                    return
             }
+        }
 
-            result = true
+        if (scopedIdAttribute) {
+            scopedIdAttribute.metadata ??= {}
+            scopedIdAttribute.metadata.isScoped = true
+        }
+        if (scopedClassAttribute) {
+            scopedClassAttribute.metadata ??= {}
+            scopedClassAttribute.metadata.isScoped = true
+        }
+        if (scopedElement) {
+            scopedElement.metadata ??= {}
+            scopedElement.metadata.isScoped = true
         }
+
+        result = true
+    }
+
+    walk(template, undefined, {
+        Element: Visitor,
+        CustomElement: Visitor
     })
     return result
 }

package/src/module-matcher.js

@@ -11,7 +11,29 @@ export function matchModule(name, index, template) {
 
                 result = true
             }
-        }
+        },
+        TypeSelector: (node, ctx) => {
+            if (node.name === name) {
+                node.metadata ??= {}
+                node.metadata.isModule = true
+                node.metadata.index = index
+
+                result = true
+            }
+        },
+        ...CssTree
     })
     return result
 }
+
+export const CssTree = {
+    StyleSheet: CssTreeNodeFix,
+    SelectorList: CssTreeNodeFix,
+    Selector: CssTreeNodeFix,
+    PseudoClassSelector: CssTreeNodeFix
+}
+
+function CssTreeNodeFix(node, ctx) {
+    const children = node.children?.map((c) => ctx.visit(c)) ?? null
+    return { ...node, children }
+}

package/src/transform/index.js

@@ -19,6 +19,7 @@ import { CustomElement } from './visitors/CustomElement.js'
 import { AssignmentExpression } from './visitors/AssignmentExpression.js'
 import { PropertyDefinition } from './visitors/PropertyDefinition.js'
 import { PrivateIdentifier } from './visitors/PrivateIdentifier.js'
+import { TypeSelector } from './visitors/TypeSelector.js'
 
 const templateVisitors = {
     Template,
@@ -34,6 +35,7 @@ const templateVisitors = {
     IfBlock,
     EachBlock,
     Selector,
+    TypeSelector,
     ...CssTree
 }
 

package/src/transform/visitors/Program.js

@@ -18,9 +18,8 @@ export function Program(node, ctx) {
     stmts1.push(stmt)
 
     // style
-    const css = ctx.state.template.css
-    const style = css.length >= 0 ? `<style>${ctx.state.template.css.join('')}</style>` : ''
-    stmt = b.declaration('STYLE', b.literal(style))
+    const style = ctx.state.template.style
+    stmt = b.declaration('STYLE', b.template(style))
     stmts1.push(stmt)
 
     // $name

package/src/transform/visitors/Style.js

@@ -1,11 +1,20 @@
 import { generate } from 'css-tree'
-import { appendText } from '../../utils/template.js'
+import * as b from '../../builders.js'
+import { appendExpression, appendText } from '../../utils/template.js'
 
 export function Style(node, ctx) {
     node = ctx.next() ?? node
 
     const css = generate(node.content)
+    const style = css.length > 0 ? `<style>${css}</style>` : ''
+
+    // handle modules
+    const tokens = style.split(/(\$Module_\d+)/)
+    for (const token of tokens) {
+        token.startsWith('$Module_')
+            ? appendExpression(ctx.state.style, b.$name(token))
+            : appendText(ctx.state.style, token)
+    }
 
-    ctx.state.css.push(css)
     appendText(ctx.state.template, '<!-- -->')
 }

package/src/transform/visitors/Template.js

@@ -1,7 +1,7 @@
 import * as b from '../../builders.js'
 
 export function Template(node, ctx) {
-    const css = []
+    const style = { text: [''], expressions: [] }
     const template = { text: [''], expressions: [] }
     const init = { elem: [], text: [], binding: [] }
     const effects = []
@@ -11,7 +11,7 @@ export function Template(node, ctx) {
 
     ctx.visit(node.fragment, {
         ...ctx.state,
-        css,
+        style,
         template,
         init,
         effects,
@@ -40,5 +40,5 @@ export function Template(node, ctx) {
     const bodyStmt = [...stmts1, ...stmts2, stmt3]
     const block = b.$block(bodyStmt)
 
-    return { type: 'TemplateMod', metadata: node.metadata, css, template, block }
+    return { type: 'TemplateMod', metadata: node.metadata, style, template, block }
 }

package/src/transform/visitors/TypeSelector.js

@@ -0,0 +1,6 @@
+export function TypeSelector(node) {
+    if (node.metadata?.isModule) {
+        const name = `$Module_${node.metadata.index + 1}`
+        return { ...node, name }
+    }
+}