@cocreate/plugins 1.0.3 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.1.0](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.0.3...v1.1.0) (2026-01-15)
+
+
+### Features
+
+* add marker to indicate where css files will be inserted ([6b4b030](https://github.com/CoCreate-app/CoCreate-plugins/commit/6b4b0301acdabff19b8cca5968cc67619e417c92))
+
 ## [1.0.3](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.0.2...v1.0.3) (2025-12-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/plugins",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "CoCreate plugins",
   "author": "CoCreate LLC",
   "license": "AGPL-3.0",

package/src/index.js

@@ -172,6 +172,8 @@ const plugins = {
 
 // Global Cache for script promises to prevent race conditions and duplicate loads
 const scriptCache = new Map();
+// Cache the CSS marker once on load
+const cssMarker = typeof document !== 'undefined' ? document.querySelector('link[plugins]') : null;
 
 /**
  * Global Initialization Function
@@ -211,7 +213,29 @@ async function processPlugin(el) {
         if (pluginDef.css) pluginDef.css.forEach(href => {
             if (!document.querySelector(`link[href="${href}"]`)) {
                 const link = document.createElement("link");
-                link.rel = "stylesheet"; link.href = href; document.head.appendChild(link);
+                link.rel = "stylesheet"; 
+                link.href = href;
+                
+                // CSS INJECTION STRATEGY:
+                // 1. Priority: Check for a specific marker element <link plugin> 
+                //    (Cached globally in cssMarker)
+                
+                if (cssMarker) {
+                    // Insert before the marker
+                    cssMarker.parentNode.insertBefore(link, cssMarker);
+                } else {
+                    // 2. Fallback: Prepend before existing CSS
+                    // To allow custom CSS to easily override plugin defaults, we must ensure 
+                    // plugin CSS loads BEFORE user CSS.
+                    const firstStyle = document.head.querySelector('link[rel="stylesheet"], style');
+                    
+                    if (firstStyle) {
+                        document.head.insertBefore(link, firstStyle);
+                    } else {
+                        // If no CSS exists yet, appending is safe
+                        document.head.appendChild(link);
+                    }
+                }
             }
         });