@jxsuite/compiler 0.22.0 → 0.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "Jx static HTML compiler, island detector, and site builder",
   "license": "MIT",
   "repository": {
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^15.3.5",
-    "@jxsuite/parser": "^0.22.0",
-    "@jxsuite/runtime": "^0.22.0",
+    "@jxsuite/parser": "^0.22.1",
+    "@jxsuite/runtime": "^0.22.1",
     "remark-gfm": "^4.0.1",
     "remark-stringify": "^11.0.0",
     "sharp": "^0.34.5",

package/src/shared.js

@@ -518,11 +518,11 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
       for (const [key, val] of Object.entries(obj)) {
         if (val === null || typeof val !== "object" || Array.isArray(val)) continue;
         if (key.startsWith("@")) {
-          const query = key.startsWith("@--")
-            ? (mediaQueries[key.slice(1)] ?? key.slice(1))
-            : key.slice(1);
+          const atRule = key.startsWith("@--")
+            ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}`
+            : key;
           const mProps = toCSSText(val);
-          if (mProps) rules.push(`@media ${query} { ${selector} { ${mProps} } }`);
+          if (mProps) rules.push(`${atRule} { ${selector} { ${mProps} } }`);
           for (const [sel, sub] of Object.entries(/** @type {Record<string, unknown>} */ (val))) {
             if (sub === null || typeof sub !== "object" || Array.isArray(sub)) continue;
             if (sel.startsWith("@")) continue;
@@ -532,7 +532,7 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
                 ? `${selector}${sel}`
                 : `${selector} ${sel}`;
             const subProps = toCSSText(sub);
-            if (subProps) rules.push(`@media ${query} { ${resolved} { ${subProps} } }`);
+            if (subProps) rules.push(`${atRule} { ${resolved} { ${subProps} } }`);
           }
           continue;
         }
@@ -558,10 +558,12 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
         emitProjectRules(key, val);
       } else if (key.startsWith("@")) {
         // @media block at top level
-        const query = key.startsWith("@--")
-          ? (mediaQueries[key.slice(1)] ?? key.slice(1))
-          : key.slice(1);
-        rules.push(`@media ${query} { body { ${toCSSText(/** @type {object} */ (val))} } }`);
+        const atRule = key.startsWith("@--")
+          ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}`
+          : key.startsWith("@(")
+            ? `@media ${key.slice(1)}`
+            : key;
+        rules.push(`${atRule} { body { ${toCSSText(/** @type {object} */ (val))} } }`);
       }
     }
     // Collect CSS custom properties into :root {}
@@ -610,11 +612,13 @@ function emitNestedElement(selector, obj, rules, mediaQueries) {
   for (const [key, val] of Object.entries(obj)) {
     if (val === null || typeof val !== "object" || Array.isArray(val)) continue;
     if (key.startsWith("@")) {
-      const query = key.startsWith("@--")
-        ? (mediaQueries[key.slice(1)] ?? key.slice(1))
-        : key.slice(1);
+      const atRule = key.startsWith("@--")
+        ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}`
+        : key.startsWith("@(")
+          ? `@media ${key.slice(1)}`
+          : key;
       const mProps = toCSSText(val);
-      if (mProps) rules.push(`@media ${query} { ${selector} { ${mProps} } }`);
+      if (mProps) rules.push(`${atRule} { ${selector} { ${mProps} } }`);
       for (const [sel, sub] of Object.entries(/** @type {Record<string, unknown>} */ (val))) {
         if (sub === null || typeof sub !== "object" || Array.isArray(sub)) continue;
         if (sel.startsWith("@")) continue;
@@ -624,7 +628,7 @@ function emitNestedElement(selector, obj, rules, mediaQueries) {
             ? `${selector}${sel}`
             : `${selector} ${sel}`;
         const subProps = toCSSText(sub);
-        if (subProps) rules.push(`@media ${query} { ${resolved} { ${subProps} } }`);
+        if (subProps) rules.push(`${atRule} { ${resolved} { ${subProps} } }`);
       }
       continue;
     }
@@ -688,10 +692,13 @@ export function collectStyles(
     for (const [prop, val] of Object.entries(def.style)) {
       if (val === null || typeof val !== "object" || Array.isArray(val)) continue;
       if (prop.startsWith("@")) {
-        const query = prop.startsWith("@--")
-          ? (mediaQueries[prop.slice(1)] ?? prop.slice(1))
-          : prop.slice(1);
-        rules.push(`@media ${query} { ${selector} { ${toCSSText(val)} } }`);
+        const atRule = prop.startsWith("@--")
+          ? `@media ${mediaQueries[prop.slice(1)] ?? prop.slice(1)}`
+          : prop.startsWith("@(")
+            ? `@media ${prop.slice(1)}`
+            : prop;
+        const atBaseProps = toCSSText(val);
+        if (atBaseProps) rules.push(`${atRule} { ${selector} { ${atBaseProps} } }`);
         for (const [sel, nestedRules] of Object.entries(
           /** @type {Record<string, unknown>} */ (val),
         )) {
@@ -703,7 +710,7 @@ export function collectStyles(
             : sel.startsWith(":") || sel.startsWith(".") || sel.startsWith("[")
               ? `${selector}${sel}`
               : `${selector} ${sel}`;
-          rules.push(`@media ${query} { ${resolved} { ${toCSSText(nestedRules)} } }`);
+          rules.push(`${atRule} { ${resolved} { ${toCSSText(nestedRules)} } }`);
         }
       } else {
         const resolved = prop.startsWith("&")
@@ -1038,10 +1045,12 @@ export function buildComponentCSS(tagName, styleDef, doc = null, mediaQueries =
 
     for (const [prop, val] of Object.entries(styleDef)) {
       if (prop.startsWith("@")) {
-        const query = prop.startsWith("@--")
-          ? (mediaQueries[prop.slice(1)] ?? prop.slice(1))
-          : prop.slice(1);
-        rules.push(`@media ${query} { ${tagName} { ${toCSSText(/** @type {object} */ (val))} } }`);
+        const atRule = prop.startsWith("@--")
+          ? `@media ${mediaQueries[prop.slice(1)] ?? prop.slice(1)}`
+          : prop.startsWith("@(")
+            ? `@media ${prop.slice(1)}`
+            : prop;
+        rules.push(`${atRule} { ${tagName} { ${toCSSText(/** @type {object} */ (val))} } }`);
       } else if (
         prop.startsWith(":") ||
         prop.startsWith(".") ||

package/src/site/site-build.js

@@ -134,7 +134,7 @@ export async function buildSite(projectRoot, options = {}) {
     for (const file of componentFiles) {
       try {
         const componentPath = resolve(componentsDir, file);
-        const result = await compileElement(componentPath);
+        const result = await compileElement(componentPath, { $media: projectConfig.$media });
         for (const f of result.files) {
           const outName = f.path.includes("/")
             ? /** @type {string} */ (f.path.split("/").pop())

package/src/targets/compile-element.js

@@ -16,7 +16,7 @@ import { escapeHtml, tagNameToClassName, isSchemaOnly, collectStyles } from "../
  * @returns {Promise<{ files: { path: string; content: string; tagName: string }[] }>}
  */
 export async function compileElement(sourcePath, opts = {}) {
-  const { resolveElementPath } = /** @type {JxMutableNode} */ (opts);
+  const { resolveElementPath, $media: optsMedia } = /** @type {JxMutableNode} */ (opts);
   /** @type {{ path: string; content: string; tagName: string }[]} */
   const files = [];
   /** @type {Set<string>} */
@@ -82,6 +82,9 @@ export async function compileElement(sourcePath, opts = {}) {
     }
 
     const className = tagNameToClassName(tagName);
+    if (optsMedia) {
+      doc.$media = { ...optsMedia, ...doc.$media };
+    }
     const jsContent = emitElementModule(doc, className, elementImports);
     const outputPath = filePath ? filePath.replace(/\.json$/, ".js") : `${tagName}.js`;
     files.push({ path: outputPath, content: jsContent, tagName });