clampography 2.0.0-beta.3 → 2.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clampography",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "description": "Fluid typography system based on CSS clamp() with optional themes and extra styles. A feature-rich alternative to Tailwind CSS Typography plugin.",
   "main": "src/index.js",
   "type": "module",

package/src/index.js

@@ -3,29 +3,42 @@ 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;
+    // 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
+
+    if (includeBase) {
+      addBase(baseStyles);
+    }
 
-    if (includeBase) addBase(baseStyles);
-    if (includeExtra) addBase(extraStyles);
+    if (includeExtra) {
+      addBase(extraStyles);
+    }
 
     // 2. Parse themes configuration
     let configThemes = options.themes;
-
-    // Default values
     let themesToInclude = [];
-    let defaultThemeName = "light";
+    let defaultThemeName = null;
     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") {
@@ -33,22 +46,20 @@ export default plugin.withOptions((options = {}) => {
         // Special case: themes: all
         rawThemeList = Object.keys(builtInThemes);
       } else if (configThemes.trim() === "false") {
+        // Explicitly disabled themes
         rawThemeList = [];
       } 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"];
+      // Default behavior: NO themes loaded automatically.
+      // User must specify themes to load them.
+      rawThemeList = [];
     }
 
     // 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();
 
@@ -61,7 +72,7 @@ export default plugin.withOptions((options = {}) => {
         defaultThemeName = themeName;
       }
 
-      // Check for --prefersdark flag (case insensitive just in case)
+      // Check for --prefersdark flag
       if (themeName.toLowerCase().includes("--prefersdark")) {
         themeName = themeName.replace(/--prefersdark/i, "").trim();
         prefersDarkTheme = themeName;
@@ -74,13 +85,15 @@ export default plugin.withOptions((options = {}) => {
     });
 
     // If list is empty after filtering, stop here
-    if (themesToInclude.length === 0) return;
+    if (
+      themesToInclude.length === 0 && !defaultThemeName && !prefersDarkTheme
+    ) return;
 
     // 4. Generate CSS
     const themeStyles = {};
 
     // A. Default theme (:root)
-    if (builtInThemes[defaultThemeName]) {
+    if (defaultThemeName && builtInThemes[defaultThemeName]) {
       themeStyles[rootSelector] = builtInThemes[defaultThemeName];
     }