clampography 2.0.0-beta.1 → 2.0.0-beta.11

package/src/convert.js

@@ -0,0 +1,185 @@
+#!/usr/bin/env bun
+
+/**
+ * Converts base.css to base.js format with preserved comments
+ * https://claude.ai/chat/90dedd98-3e31-4831-a620-c35d6523b836
+ */
+
+import { readFileSync, writeFileSync } from "fs";
+import { resolve } from "path";
+
+// Configuration
+const INPUT_FILE = "base.css";
+const OUTPUT_FILE = "base.js";
+
+/**
+ * Parse CSS content into structured data
+ */
+function parseCSS(css) {
+  const result = {};
+  const lines = css.split("\n");
+  let currentContext = result;
+  let contextStack = [result];
+  let currentSelector = null;
+  let inAtLayer = false;
+  let buffer = "";
+  let commentBuffer = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+
+    // Skip empty lines
+    if (!line) {
+      if (commentBuffer.length > 0) {
+        commentBuffer.push("");
+      }
+      continue;
+    }
+
+    // Capture comments
+    if (line.startsWith("/*")) {
+      const commentLines = [line];
+      while (i < lines.length && !lines[i].includes("*/")) {
+        i++;
+        commentLines.push(lines[i].trim());
+      }
+      commentBuffer.push(...commentLines);
+      continue;
+    }
+
+    // Handle @layer
+    if (line.startsWith("@layer")) {
+      const match = line.match(/@layer\s+(\w+)/);
+      if (match) {
+        inAtLayer = true;
+        currentContext["@layer base"] = {};
+        contextStack.push(currentContext["@layer base"]);
+        currentContext = currentContext["@layer base"];
+      }
+      continue;
+    }
+
+    // Handle opening brace (new rule)
+    if (line.includes("{") && !line.includes("}")) {
+      const selector = line.replace("{", "").trim();
+
+      // Store comments before selector
+      if (commentBuffer.length > 0) {
+        currentContext[`__comment_${Object.keys(currentContext).length}`] =
+          commentBuffer.join("\n");
+        commentBuffer = [];
+      }
+
+      currentContext[selector] = {};
+      contextStack.push(currentContext[selector]);
+      currentContext = currentContext[selector];
+      currentSelector = selector;
+      continue;
+    }
+
+    // Handle closing brace
+    if (line === "}") {
+      contextStack.pop();
+      currentContext = contextStack[contextStack.length - 1];
+      currentSelector = null;
+      continue;
+    }
+
+    // Handle properties
+    if (line.includes(":") && currentSelector) {
+      let [prop, ...valueParts] = line.split(":");
+      let value = valueParts.join(":").trim();
+
+      // Remove semicolon and inline comments
+      const inlineComment = value.match(/\/\*.*?\*\//);
+      if (inlineComment) {
+        value = value.replace(inlineComment[0], "").trim();
+      }
+      value = value.replace(";", "").trim();
+
+      prop = prop.trim();
+
+      // Store inline comment separately if exists
+      if (inlineComment && inlineComment[0]) {
+        currentContext[`__inline_comment_${prop}`] = inlineComment[0];
+      }
+
+      currentContext[prop] = value;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Convert parsed CSS to JS object string
+ */
+function toJSObject(obj, indent = 0) {
+  const spaces = "  ".repeat(indent);
+  const lines = [];
+
+  for (const [key, value] of Object.entries(obj)) {
+    // Handle comments
+    if (key.startsWith("__comment_")) {
+      const comment = value.split("\n").map((line) => `${spaces}${line}`).join(
+        "\n",
+      );
+      lines.push(comment);
+      continue;
+    }
+
+    if (key.startsWith("__inline_comment_")) {
+      continue; // Skip inline comments in first pass
+    }
+
+    if (typeof value === "object" && !Array.isArray(value)) {
+      // It's a nested object (selector)
+      lines.push(`${spaces}"${key}": {`);
+      lines.push(toJSObject(value, indent + 1));
+      lines.push(`${spaces}},`);
+    } else {
+      // It's a property
+      const formattedValue = value.includes('"') || value.includes("'")
+        ? `"${value.replace(/"/g, '\\"')}"`
+        : `"${value}"`;
+
+      // Check for inline comment
+      const inlineCommentKey = `__inline_comment_${key}`;
+      const inlineComment = obj[inlineCommentKey];
+      const comment = inlineComment ? ` ${inlineComment}` : "";
+
+      lines.push(`${spaces}"${key}": ${formattedValue},${comment}`);
+    }
+  }
+
+  return lines.join("\n");
+}
+
+/**
+ * Main conversion function
+ */
+function convertCSStoJS(cssContent) {
+  const parsed = parseCSS(cssContent);
+  const jsContent = `export default {\n${
+    toJSObject(parsed["@layer base"] || parsed, 1)
+  }\n};\n`;
+  return jsContent;
+}
+
+// Main execution
+try {
+  console.log(`📖 Reading ${INPUT_FILE}...`);
+  const cssContent = readFileSync(resolve(INPUT_FILE), "utf-8");
+
+  console.log("⚙️ Converting CSS to JS...");
+  const jsContent = convertCSStoJS(cssContent);
+
+  console.log(`💾 Writing ${OUTPUT_FILE}...`);
+  writeFileSync(resolve(OUTPUT_FILE), jsContent, "utf-8");
+
+  console.log("✅ Conversion complete!");
+  console.log(`📄 Output: ${OUTPUT_FILE}`);
+} catch (error) {
+  console.error("❌ Error:", error.message);
+  process.exit(1);
+}

package/src/extra.js

@@ -1,34 +1,170 @@
+/**
+ * Extra opinionated styles and coloring.
+ * Applies colors to the structural base elements.
+ */
+
 export default {
+  // --- Basic Coloring (Applying theme variables) ---
+  "body": {
+    "background-color": "oklch(var(--clampography-background))",
+    "color": "oklch(var(--clampography-text))",
+  },
+
+  ":where(h1, h2, h3, h4, h5, h6)": {
+    "color": "oklch(var(--clampography-heading))",
+  },
+
+  "a": {
+    "color": "oklch(var(--clampography-link))",
+  },
+
+  // Lists
+  "ul > li::before": {
+    "background-color": "oklch(var(--clampography-primary))", // Bullet points
+  },
+
+  "ol > li::before": {
+    "color": "oklch(var(--clampography-secondary))", // Numbers
+  },
+
+  // Inline Code
+  ":where(code, kbd, samp)": {
+    "background-color": "oklch(var(--clampography-surface))",
+    "color": "oklch(var(--clampography-heading))",
+    "border": "1px solid oklch(var(--clampography-border))",
+    "border-radius": "0.25rem",
+    "padding": "0.125rem var(--spacing-xs)",
+  },
+
+  // Keyboard input - vertical alignment
+  "kbd": {
+    transform: "translateY(-0.15em)",
+  },
+
+  // Preformatted Code Blocks
+  "pre": {
+    "background-color": "oklch(var(--clampography-surface))",
+    "border": "1px solid oklch(var(--clampography-border))",
+    "border-radius": "0.375rem",
+    "padding": "1rem",
+  },
+
+  // Tables
+  "table": {
+    "padding": "var(--spacing-sm)",
+    "border": "1px solid oklch(var(--clampography-border))",
+  },
+
+  "th": {
+    "color": "oklch(var(--clampography-heading))",
+  },
+
+  "th, td": {
+    "border": "1px solid oklch(var(--clampography-border))",
+  },
+
+  "thead th": {
+    "border-bottom-width": "2px",
+  },
+
+  // Zebra striping for table rows
+  "tbody tr:nth-child(even)": {
+    "background-color": "oklch(var(--clampography-surface))",
+  },
+
+  // Captions & Muted text
+  "caption, figcaption, .muted": {
+    "color": "oklch(var(--clampography-muted))",
+  },
+
+  // Horizontal Rule (Thematic)
   "hr": {
     "height": "1px",
     "border-width": "0",
-    "margin-top": "3rem", /* my-12 (12 * 0.25rem) */
-    "margin-bottom": "3rem", /* my-12 */
-    "background-color": "var(--clampography-secondary)",
+    "margin-top": "3rem",
+    "margin-bottom": "3rem",
+    "background-color": "oklch(var(--clampography-border))",
   },
 
+  // --- Opinionated Extras ---
+
+  // Styled Blockquote
   "blockquote": {
     "border-left-width": "4px",
-    "border-color": "var(--clampography-primary)",
-    "padding-left": "1rem", /* pl-4 */
-    "padding-top": "0.5rem", /* py-2 */
-    "padding-bottom": "0.5rem", /* py-2 */
-    "padding-right": "0.5rem", /* pr-2 */
+    "border-left-color": "oklch(var(--clampography-primary))",
+    "background-color": "oklch(var(--clampography-surface))",
+    "padding": "1rem",
+    "border-radius": "0.25rem",
+    "font-style": "italic",
+    "color": "oklch(var(--clampography-heading))",
   },
 
+  // Styled Links (Enhanced)
   "a": {
-    "color": "var(--clampography-link)",
-    "font-weight": "700", /* font-bold */
-    "letter-spacing": "0.025em", /* tracking-wide */
+    "font-weight": "700",
+    "letter-spacing": "0.025em",
     "text-decoration-line": "underline",
-    "text-decoration-thickness": "2px", /* decoration-2 */
-    "text-underline-offset": "4px", /* underline-offset-4 */
+    "text-decoration-thickness": "2px",
+    "text-underline-offset": "4px",
     "transition-property": "color, text-decoration-color",
-    "transition-duration": "150ms", /* duration-150 */
+    "transition-duration": "150ms",
   },
 
   "a:hover": {
-    // Używamy zmiennej zdefiniowanej w themes.js (bez prefixu --color-)
-    "text-decoration-color": "var(--clampography-primary)",
+    "text-decoration-color": "oklch(var(--clampography-primary))",
+  },
+
+  // Mark
+  "mark": {
+    "background-color": "oklch(var(--clampography-primary))",
+    "color": "oklch(var(--clampography-background))",
+    "padding": "0.125rem var(--spacing-xs)",
+    "border-radius": "0.25rem",
+  },
+
+  // Deleted Text
+  "del": {
+    "text-decoration-color": "oklch(var(--clampography-secondary))",
+    "text-decoration-thickness": "2px",
+  },
+
+  // Buttons - All types
+  ":where(button, [type='button'], [type='reset'], [type='submit'])": {
+    "padding": "var(--spacing-xs) var(--spacing-sm)",
+    "border": "1px solid oklch(var(--clampography-border))",
+    "border-radius": "0.375rem", // ← Rounded corners
+  },
+
+  // Inputs - All types
+  ":where(input:not([type='checkbox'], [type='radio']), textarea, select)": {
+    "padding": "var(--spacing-xs) var(--spacing-sm)",
+    "border": "1px solid oklch(var(--clampography-border))",
+    "border-radius": "0.375rem", // ← Rounded corners
+  },
+
+  // Fieldset
+  "fieldset": {
+    "border": "1px solid oklch(var(--clampography-border))",
+    "border-radius": "0.375rem",
+  },
+
+  "legend": {
+    "color": "oklch(var(--clampography-heading))",
+  },
+
+  // Details
+  "details": {
+    "border": "1px solid oklch(var(--clampography-border))",
+    "border-radius": "0.375rem",
+    "padding": "0.5rem",
+  },
+
+  "summary": {
+    "color": "oklch(var(--clampography-heading))",
+  },
+
+  "details[open] > summary": {
+    "border-bottom": "1px solid oklch(var(--clampography-border))",
+    "padding-bottom": "0.5rem",
   },
 };

package/src/index.js

@@ -3,99 +3,133 @@ import { themes as builtInThemes } from "./themes.js";
 import baseStyles from "./base.js";
 import extraStyles from "./extra.js";
 
+/**
+ * Helper to resolve boolean options from CSS configuration.
+ * CSS values often come as strings ("true"/"false"), which are both truthy in JS.
+ */
+const resolveBool = (value, defaultValue) => {
+  if (value === "false" || value === false) return false;
+  if (value === "true" || value === true) return true;
+  return defaultValue;
+};
+
 /**
  * Main plugin function.
  */
-export default plugin.withOptions((options = {}) => {
-  return ({ addBase }) => {
-    // 1. Load Base and Extra styles
-    const includeBase = options.base ?? true;
-    const includeExtra = options.extra ?? false;
-
-    if (includeBase) addBase(baseStyles);
-    if (includeExtra) addBase(extraStyles);
-
-    // 2. Parse themes configuration
-    let configThemes = options.themes;
-
-    // Default values
-    let themesToInclude = [];
-    let defaultThemeName = "light";
-    let prefersDarkTheme = false;
-    let rootSelector = options.root ?? ":root";
-
-    // Normalize input to an array of strings
-    // CSS might pass this as a single long string separated by commas
-    let rawThemeList = [];
-
-    if (typeof configThemes === "string") {
-      if (configThemes.trim() === "all") {
-        // Special case: themes: all
-        rawThemeList = Object.keys(builtInThemes);
-      } else if (configThemes.trim() === "false") {
-        rawThemeList = [];
+export default plugin.withOptions(
+  (options = {}) => {
+    return ({ addBase }) => {
+      // 1. Load Base and Extra styles
+      // We use the helper to correctly parse "false" string from CSS
+      const includeBase = resolveBool(options.base, true); // Default: true
+      const includeExtra = resolveBool(options.extra, false); // Default: false
+
+      includeBase && addBase(baseStyles);
+      includeExtra && addBase(extraStyles);
+
+      // 2. Parse themes configuration
+      let configThemes = options.themes;
+      let themesToInclude = [];
+      let defaultThemeName = null;
+      let prefersDarkTheme = false;
+      let rootSelector = options.root ?? ":root";
+
+      // Normalize input to an array of strings
+      let rawThemeList = [];
+
+      if (typeof configThemes === "string") {
+        if (["all", "true", "yes"].includes(configThemes.trim())) {
+          // Special case: themes: all
+          rawThemeList = Object.keys(builtInThemes);
+        } else if (["false", "none", "no"].includes(configThemes.trim())) {
+          // Explicitly disabled themes
+          rawThemeList = [];
+        } else {
+          rawThemeList = configThemes.split(",");
+        }
+      } else if (Array.isArray(configThemes)) {
+        rawThemeList = configThemes;
       } else {
-        // Split by comma: "light --default, dark --prefersdark"
-        rawThemeList = configThemes.split(",");
-      }
-    } else if (Array.isArray(configThemes)) {
-      rawThemeList = configThemes;
-    } else {
-      // Default fallback if nothing provided
-      rawThemeList = ["light", "dark"];
-    }
-
-    // 3. Process the list and look for flags (--default, --prefersdark)
-    // If "all" was used, we don't look for flags (we use default light/dark logic) unless implemented otherwise.
-    // Here we focus on the explicit list.
-
-    rawThemeList.forEach((rawItem) => {
-      let themeName = rawItem.trim();
-
-      // Ignore empty entries
-      if (!themeName) return;
-
-      // Check for --default flag
-      if (themeName.includes("--default")) {
-        themeName = themeName.replace("--default", "").trim();
-        defaultThemeName = themeName;
+        // Default behavior: NO themes loaded automatically.
+        // User must specify themes to load them.
+        rawThemeList = [];
       }
 
-      // Check for --prefersdark flag (case insensitive just in case)
-      if (themeName.toLowerCase().includes("--prefersdark")) {
-        themeName = themeName.replace(/--prefersdark/i, "").trim();
-        prefersDarkTheme = themeName;
+      // 3. Process the list and look for flags (--default, --prefersdark)
+      rawThemeList.forEach((rawItem) => {
+        let themeName = rawItem.trim();
+
+        // Ignore empty entries
+        if (!themeName) return;
+
+        // Check for --default flag
+        if (themeName.includes("--default")) {
+          themeName = themeName.replace("--default", "").trim();
+          defaultThemeName = themeName;
+        }
+
+        // Check for --prefersdark flag
+        if (themeName.toLowerCase().includes("--prefersdark")) {
+          themeName = themeName.replace(/--prefersdark/i, "").trim();
+          prefersDarkTheme = themeName;
+        }
+
+        // Check if theme exists in the database
+        if (builtInThemes[themeName]) {
+          themesToInclude.push(themeName);
+        }
+      });
+
+      // If list is empty after filtering, stop here
+      if (
+        themesToInclude.length === 0 && !defaultThemeName && !prefersDarkTheme
+      ) return;
+
+      // 4. Generate CSS
+      const themeStyles = {};
+
+      // A. Default theme (:root)
+      if (defaultThemeName && builtInThemes[defaultThemeName]) {
+        themeStyles[rootSelector] = builtInThemes[defaultThemeName];
       }
 
-      // Check if theme exists in the database
-      if (builtInThemes[themeName]) {
-        themesToInclude.push(themeName);
+      // B. Theme for prefers-color-scheme: dark
+      if (prefersDarkTheme && builtInThemes[prefersDarkTheme]) {
+        themeStyles["@media (prefers-color-scheme: dark)"] = {
+          [rootSelector]: builtInThemes[prefersDarkTheme],
+        };
       }
-    });
-
-    // If list is empty after filtering, stop here
-    if (themesToInclude.length === 0) return;
-
-    // 4. Generate CSS
-    const themeStyles = {};
-
-    // A. Default theme (:root)
-    if (builtInThemes[defaultThemeName]) {
-      themeStyles[rootSelector] = builtInThemes[defaultThemeName];
-    }
-
-    // B. Theme for prefers-color-scheme: dark
-    if (prefersDarkTheme && builtInThemes[prefersDarkTheme]) {
-      themeStyles["@media (prefers-color-scheme: dark)"] = {
-        [rootSelector]: builtInThemes[prefersDarkTheme],
-      };
-    }
-
-    // C. Scoped styles [data-theme="..."]
-    themesToInclude.forEach((themeName) => {
-      themeStyles[`[data-theme="${themeName}"]`] = builtInThemes[themeName];
-    });
-
-    addBase(themeStyles);
-  };
-});
+
+      // C. Scoped styles [data-theme="..."]
+      themesToInclude.forEach((themeName) => {
+        themeStyles[`[data-theme="${themeName}"]`] = builtInThemes[themeName];
+      });
+
+      addBase(themeStyles);
+    };
+  },
+  // Theme extension - enables utilities like bg-surface, text-heading, etc.
+  (options = {}) => {
+    return {
+      theme: {
+        extend: {
+          colors: {
+            background: "oklch(var(--clampography-background) / <alpha-value>)",
+            border: "oklch(var(--clampography-border) / <alpha-value>)",
+            error: "oklch(var(--clampography-error) / <alpha-value>)",
+            heading: "oklch(var(--clampography-heading) / <alpha-value>)",
+            info: "oklch(var(--clampography-info) / <alpha-value>)",
+            link: "oklch(var(--clampography-link) / <alpha-value>)",
+            muted: "oklch(var(--clampography-muted) / <alpha-value>)",
+            primary: "oklch(var(--clampography-primary) / <alpha-value>)",
+            secondary: "oklch(var(--clampography-secondary) / <alpha-value>)",
+            success: "oklch(var(--clampography-success) / <alpha-value>)",
+            surface: "oklch(var(--clampography-surface) / <alpha-value>)",
+            text: "oklch(var(--clampography-text) / <alpha-value>)",
+            warning: "oklch(var(--clampography-warning) / <alpha-value>)",
+          },
+        },
+      },
+    };
+  },
+);