@cocreate/plugins 1.0.3 → 1.1.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.1.1](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.1.0...v1.1.1) (2026-02-09)
+
+
+### Bug Fixes
+
+* change init function to default export and update parameter handling ([654b623](https://github.com/CoCreate-app/CoCreate-plugins/commit/654b623760446cbd9db55cc216e25a07fe7865e3))
+
+# [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.1",
   "description": "CoCreate plugins",
   "author": "CoCreate LLC",
   "license": "AGPL-3.0",

package/src/index.js

@@ -172,13 +172,15 @@ 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
  * Processes one or more elements to attach plugins.
  * @param {HTMLElement|NodeList|Array} elements - Element, or Collection of Elements
  */
-export function init(elements) {
+ function init(elements) {
     if (!elements) return;
 
     let collection = [];
@@ -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);
+                    }
+                }
             }
         });
 
@@ -327,10 +351,10 @@ function executeGenericPlugin(el, name) {
  * - $anime.stagger(100)
  */
 function processParams(el, params) {
-    if (typeof params === 'string' && params.startsWith('$')) {
+    if (typeof params === 'string' && params.startsWith('\u0024')) {
         try {
             // 1. Check for Method Call: $root.path.to.func(arg)
-            const callMatch = params.match(/^\$([^.]+)\.(.+)\((.*)\)$/);
+            const callMatch = params.match(/^\u0024([^.]+)\.(.+)\((.*)\)$/);
             if (callMatch) {
                 const [_, root, path, arg] = callMatch;
                 const obj = (root === 'this') ? el : window[root];
@@ -347,7 +371,7 @@ function processParams(el, params) {
             }
             
             // 2. Check for Property Access: $root.path.to.prop or just $root
-            const propMatch = params.match(/^\$([^.]+)(?:\.(.+))?$/);
+            const propMatch = params.match(/^\u0024([^.]+)(?:\.(.+))?$/);
             if (propMatch) {
                 const [_, root, path] = propMatch;
                 const obj = (root === 'this') ? el : window[root];
@@ -386,4 +410,6 @@ Observer.init({
 // Auto-init for existing elements
 if (typeof document !== 'undefined') {
     init(document.querySelectorAll("[plugin]"));
-}
+}
+
+export default { init }