@salty-css/react 0.0.1-alpha.224 → 0.0.1-alpha.226

package/README.md

@@ -4,7 +4,7 @@
 
 Is there anything saltier than CSS in frontend web development? Salty CSS is built to provide better developer experience for developers looking for performant and feature rich CSS-in-JS solutions.
 
-[Get started](#get-started) | [API](#api) | [Website](https://salty-css.dev/) | [GitHub](https://github.com/margarita-form/salty-css) | [NPM](https://www.npmjs.com/package/@salty-css/core)
+[Get started](#get-started) | [API](#api) | [Discord](https://discord.gg/R6kr4KxMhP) | [Website](https://salty-css.dev/) | [GitHub](https://github.com/margarita-form/salty-css) | [NPM](https://www.npmjs.com/package/@salty-css/core)
 
 ## Features
 
@@ -16,7 +16,13 @@ Is there anything saltier than CSS in frontend web development? Salty CSS is bui
 
 ## Get started
 
-Fastest way to get started with any framework is `npx salty-css init [directory]` command
+Fastest way to get started with any framework is
+
+```bash
+npx salty-css init [directory]
+```
+
+Other guides:
 
 - Next.js → [Next.js guide](#nextjs) + [Next.js example app](https://github.com/margarita-form/salty-css-website)
 - React + Vite → [React + Vite guide](#react--vite) + [React example code](#code-examples)
@@ -82,6 +88,7 @@ export const Component = styled('div', {
     // Add additional default props for the component (eg, id and other html element attributes)
   },
   passProps: true, // Pass variant props to the rendered element / parent component (default: false)
+  priority: 1, // Override automatic priotity layer with a custom value (0-8), higher is considered more important
 });
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.224",
+  "version": "0.0.1-alpha.226",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -62,7 +62,7 @@
     }
   },
   "dependencies": {
-    "@salty-css/core": "^0.0.1-alpha.224",
+    "@salty-css/core": "^0.0.1-alpha.226",
     "clsx": ">=2.x",
     "react": ">=19.x || >=18.3.x"
   }

package/styled.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./styles-generator-CD8r4Qz6.cjs"),g=require("./element-factory-DjYdX8Jd.cjs");class h extends m.StylesGenerator{constructor(e,t){super(t),this.tagName=e,this._params=t}get priority(){var e;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((e=this.tagName.generator)==null?void 0:e.priority)||0)+1:0}get clientProps(){const{element:e,variants:t={},compoundVariants:a=[],defaultVariants:d={},defaultProps:l={},passProps:u}=this.params,{callerName:y,isProduction:f}=this.buildContext,o=new Set([]),i=s=>{const r=d[s];r!==void 0?o.add(`${s}=${String(r)}`):o.add(s)};Object.keys(t).forEach(i),a.map(s=>Object.keys(s).forEach(i));const c=new Set([]);if(this.params.base){const s=JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);s&&s.forEach(r=>{const p=r.replace(/\{props\.([\w\d]+)\}/gi,"$1");p&&c.add(p)})}return{element:e,variantKeys:[...o],propValueKeys:[...c],passProps:u,defaultProps:l,attr:{"data-component-name":f?void 0:y}}}}const b=(n,e)=>{const t=new h(n,e),a=g.elementFactory(n,t.cssClassName,t.clientProps,{"data-unoptimized-client-component":!0});return Object.assign(a,{generator:t}),a};exports.styled=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./styles-generator-CD8r4Qz6.cjs"),h=require("./element-factory-DjYdX8Jd.cjs");class g extends m.StylesGenerator{constructor(e,t){super(t),this.tagName=e,this._params=t}get priority(){var e;return this.params.priority?this.params.priority:typeof this.tagName=="function"||typeof this.tagName=="object"?(((e=this.tagName.generator)==null?void 0:e.priority)||0)+1:0}get clientProps(){const{element:e,variants:t={},compoundVariants:s=[],defaultVariants:d={},defaultProps:l={},passProps:u}=this.params,{callerName:y,isProduction:f}=this.buildContext,o=new Set([]),i=r=>{const a=d[r];a!==void 0?o.add(`${r}=${String(a)}`):o.add(r)};Object.keys(t).forEach(i),s.map(r=>Object.keys(r).forEach(i));const c=new Set([]);if(this.params.base){const r=JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);r&&r.forEach(a=>{const p=a.replace(/\{props\.([\w\d]+)\}/gi,"$1");p&&c.add(p)})}return{element:e,variantKeys:[...o],propValueKeys:[...c],passProps:u,defaultProps:l,attr:{"data-component-name":f?void 0:y}}}}const b=(n,e)=>{const t=new g(n,e),s=h.elementFactory(n,t.cssClassName,t.clientProps,{"data-unoptimized-client-component":!0});return Object.assign(s,{generator:t}),s};exports.styled=b;

package/styled.js

@@ -6,19 +6,19 @@ class g extends y {
   }
   get priority() {
     var e;
-    return typeof this.tagName == "function" || typeof this.tagName == "object" ? (((e = this.tagName.generator) == null ? void 0 : e.priority) || 0) + 1 : 0;
+    return this.params.priority ? this.params.priority : typeof this.tagName == "function" || typeof this.tagName == "object" ? (((e = this.tagName.generator) == null ? void 0 : e.priority) || 0) + 1 : 0;
   }
   get clientProps() {
-    const { element: e, variants: t = {}, compoundVariants: s = [], defaultVariants: d = {}, defaultProps: l = {}, passProps: f } = this.params, { callerName: m, isProduction: u } = this.buildContext, o = /* @__PURE__ */ new Set([]), i = (a) => {
-      const r = d[a];
-      r !== void 0 ? o.add(`${a}=${String(r)}`) : o.add(a);
+    const { element: e, variants: t = {}, compoundVariants: r = [], defaultVariants: d = {}, defaultProps: m = {}, passProps: f } = this.params, { callerName: l, isProduction: u } = this.buildContext, o = /* @__PURE__ */ new Set([]), i = (a) => {
+      const s = d[a];
+      s !== void 0 ? o.add(`${a}=${String(s)}`) : o.add(a);
     };
-    Object.keys(t).forEach(i), s.map((a) => Object.keys(a).forEach(i));
+    Object.keys(t).forEach(i), r.map((a) => Object.keys(a).forEach(i));
     const c = /* @__PURE__ */ new Set([]);
     if (this.params.base) {
       const a = JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);
-      a && a.forEach((r) => {
-        const p = r.replace(/\{props\.([\w\d]+)\}/gi, "$1");
+      a && a.forEach((s) => {
+        const p = s.replace(/\{props\.([\w\d]+)\}/gi, "$1");
         p && c.add(p);
       });
     }
@@ -27,20 +27,20 @@ class g extends y {
       variantKeys: [...o],
       propValueKeys: [...c],
       passProps: f,
-      defaultProps: l,
+      defaultProps: m,
       attr: {
-        "data-component-name": u ? void 0 : m
+        "data-component-name": u ? void 0 : l
       }
     };
   }
 }
 const v = (n, e) => {
-  const t = new g(n, e), s = h(n, t.cssClassName, t.clientProps, {
+  const t = new g(n, e), r = h(n, t.cssClassName, t.clientProps, {
     "data-unoptimized-client-component": !0
   });
-  return Object.assign(s, {
+  return Object.assign(r, {
     generator: t
-  }), s;
+  }), r;
 };
 export {
   v as styled