@salty-css/react 0.1.0-alpha.33 → 0.1.0-alpha.35

package/README.md

@@ -617,6 +617,8 @@ And note: steps 2 & 3 are just to show how get new components up and running, st
 - **Next.js 15:** In `next.config.ts` add import for salty plugin `import { withSaltyCss } from '@salty-css/next';` and then add `withSaltyCss` to wrap your nextConfig export like so `export default withSaltyCss(nextConfig);`
 - **Next.js 14 and older:** In `next.config.js` add import for salty plugin `const { withSaltyCss } = require('@salty-css/next');` and then add `withSaltyCss` to wrap your nextConfig export like so `module.exports = withSaltyCss(nextConfig);`
 
+Both Webpack and Turbopack are supported. `withSaltyCss` auto-detects which bundler Next.js is using (`next dev --turbopack` sets `process.env.TURBOPACK=1`), so no extra config is required. To force a specific bundler, pass `{ bundler: 'webpack' | 'turbopack' }` as the second argument.
+
 4. Make sure that `salty.config.ts` and `next.config.ts` are in the same folder!
 5. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
 6. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.

package/element-factory-Ccd9WJOa.js

@@ -0,0 +1,68 @@
+import { forwardRef as C, createElement as N } from "react";
+import { dashCase as p } from "@salty-css/core/util";
+import { parseVariableTokens as g } from "@salty-css/core/parsers";
+function K(i) {
+  var n, e, t = "";
+  if (typeof i == "string" || typeof i == "number") t += i;
+  else if (typeof i == "object") if (Array.isArray(i)) {
+    var d = i.length;
+    for (n = 0; n < d; n++) i[n] && (e = K(i[n])) && (t && (t += " "), t += e);
+  } else for (e in i) i[e] && (t && (t += " "), t += e);
+  return t;
+}
+function A() {
+  for (var i, n, e = 0, t = "", d = arguments.length; e < d; e++) (i = arguments[e]) && (n = K(i)) && (t && (t += " "), t += n);
+  return t;
+}
+const R = ["passProps"], z = (i, n = "", e = {}, t) => {
+  const j = C(({
+    extend: o = i,
+    element: S = e.element,
+    className: O = "",
+    children: $,
+    passProps: u = e.passProps,
+    _vks: l = /* @__PURE__ */ new Set(),
+    ...r
+  }, w) => {
+    const f = { passProps: u };
+    e.attr && Object.assign(f, e.attr), t && Object.assign(f, t), e.defaultProps && Object.assign(r, e.defaultProps), r && Object.assign(f, r);
+    const b = /* @__PURE__ */ new Set([...n.split(" "), ...O.split(" ")]), y = typeof o == "function" || typeof o == "object", h = y && "isStyled" in o, E = y ? o : S || o;
+    if (!E) throw new Error("No element provided");
+    const m = f.style || {};
+    f.style || (f.style = m), Object.entries(m).forEach(([s, a]) => {
+      const c = g(a);
+      c && (m[s] = c.transformed);
+    }), e.propValueKeys && e.propValueKeys.forEach((s) => {
+      const a = `css-${s}`, c = r[a];
+      if (c === void 0) return;
+      const v = `--props-${p(s)}`;
+      m[v] = c, l && l.add(a);
+    }), e.variantKeys && e.variantKeys.forEach((s) => {
+      const [a, c] = s.split("=");
+      r[a] !== void 0 ? (b.add(`${a}-${r[a]}`), l && l.add(a)) : c !== void 0 && b.add(`${a}-${c}`);
+    }), l && (!y || !h) ? l.forEach((s) => {
+      if (!u) return delete f[s];
+      if (u !== !0 && !u.includes(s))
+        return delete f[s];
+    }) : h && Object.assign(f, { _vks: l }), h || R.forEach((s) => delete f[s]);
+    const V = A(...b);
+    return N(
+      E,
+      {
+        element: y ? S : void 0,
+        className: V,
+        ref: w,
+        ...f
+      },
+      $
+    );
+  });
+  return Object.assign(j, {
+    isStyled: !0,
+    className: n,
+    toString: () => `.${e.hash}`
+  }), j;
+};
+export {
+  z as e
+};

package/element-factory-CgP5yEab.cjs

@@ -0,0 +1 @@
+"use strict";const K=require("react"),C=require("@salty-css/core/util"),N=require("@salty-css/core/parsers");function O(s){var n,e,t="";if(typeof s=="string"||typeof s=="number")t+=s;else if(typeof s=="object")if(Array.isArray(s)){var o=s.length;for(n=0;n<o;n++)s[n]&&(e=O(s[n]))&&(t&&(t+=" "),t+=e)}else for(e in s)s[e]&&(t&&(t+=" "),t+=e);return t}function g(){for(var s,n,e=0,t="",o=arguments.length;e<o;e++)(s=arguments[e])&&(n=O(s))&&(t&&(t+=" "),t+=n);return t}const A=["passProps"],F=(s,n="",e={},t)=>{const o=({extend:u=s,element:S=e.element,className:$="",children:w,passProps:d=e.passProps,_vks:l=new Set,...r},V)=>{const f={passProps:d};e.attr&&Object.assign(f,e.attr),t&&Object.assign(f,t),e.defaultProps&&Object.assign(r,e.defaultProps),r&&Object.assign(f,r);const b=new Set([...n.split(" "),...$.split(" ")]),y=typeof u=="function"||typeof u=="object",h=y&&"isStyled"in u,E=y?u:S||u;if(!E)throw new Error("No element provided");const m=f.style||{};f.style||(f.style=m),Object.entries(m).forEach(([i,a])=>{const c=N.parseVariableTokens(a);c&&(m[i]=c.transformed)}),e.propValueKeys&&e.propValueKeys.forEach(i=>{const a=`css-${i}`,c=r[a];if(c===void 0)return;const v=`--props-${C.dashCase(i)}`;m[v]=c,l&&l.add(a)}),e.variantKeys&&e.variantKeys.forEach(i=>{const[a,c]=i.split("=");r[a]!==void 0?(b.add(`${a}-${r[a]}`),l&&l.add(a)):c!==void 0&&b.add(`${a}-${c}`)}),l&&(!y||!h)?l.forEach(i=>{if(!d)return delete f[i];if(d!==!0&&!d.includes(i))return delete f[i]}):h&&Object.assign(f,{_vks:l}),h||A.forEach(i=>delete f[i]);const q=g(...b);return K.createElement(E,{element:y?S:void 0,className:q,ref:V,...f},w)},j=K.forwardRef(o);return Object.assign(j,{isStyled:!0,className:n,toString:()=>`.${e.hash}`}),j};exports.elementFactory=F;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.1.0-alpha.33",
+  "version": "0.1.0-alpha.35",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -64,10 +64,6 @@
       "import": "./helpers.js",
       "require": "./helpers.cjs"
     },
-    "./dynamic-styles": {
-      "import": "./dynamic-styles.js",
-      "require": "./dynamic-styles.cjs"
-    },
     "./runtime": {
       "import": "./runtime.js",
       "require": "./runtime.cjs"
@@ -78,7 +74,8 @@
     }
   },
   "dependencies": {
-    "@salty-css/core": "0.1.0-alpha.33",
+    "@salty-css/core": "0.1.0-alpha.35",
+    "@testing-library/react": "^16.3.2",
     "clsx": ">=2.x",
     "react": ">=19.x || >=18.3.x"
   },

package/styled-client.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./element-factory-BPI0pGIH.cjs"),n=(e,t,r)=>l.elementFactory(e,t,r);exports.styledClient=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./element-factory-CgP5yEab.cjs"),n=(e,t,r)=>l.elementFactory(e,t,r);exports.styledClient=n;

package/styled-client.js

@@ -1,4 +1,4 @@
-import { e as o } from "./element-factory-D5vMsSwp.js";
+import { e as o } from "./element-factory-Ccd9WJOa.js";
 const l = (e, t, r) => o(e, t, r);
 export {
   l as styledClient

package/styled.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@salty-css/core/generators"),s=require("./element-factory-BPI0pGIH.cjs"),c=(t,r)=>{const e=new o.StyledGenerator(t,r),n=s.elementFactory(t,e.cssClassName,e.clientProps,{"data-unoptimized-client-component":!0});return Object.assign(n,{generator:e}),n};exports.styled=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@salty-css/core/generators"),s=require("./element-factory-CgP5yEab.cjs"),c=(t,r)=>{const e=new o.StyledGenerator(t,r),n=s.elementFactory(t,e.cssClassName,e.clientProps,{"data-unoptimized-client-component":!0});return Object.assign(n,{generator:e}),n};exports.styled=c;

package/styled.js

@@ -1,5 +1,5 @@
 import { StyledGenerator as r } from "@salty-css/core/generators";
-import { e as s } from "./element-factory-D5vMsSwp.js";
+import { e as s } from "./element-factory-Ccd9WJOa.js";
 const i = (t, o) => {
   const e = new r(t, o), n = s(t, e.cssClassName, e.clientProps, {
     "data-unoptimized-client-component": !0

package/clsx-C11secjj.cjs

@@ -1 +0,0 @@
-"use strict";function i(r){var f,n,t="";if(typeof r=="string"||typeof r=="number")t+=r;else if(typeof r=="object")if(Array.isArray(r)){var s=r.length;for(f=0;f<s;f++)r[f]&&(n=i(r[f]))&&(t&&(t+=" "),t+=n)}else for(n in r)r[n]&&(t&&(t+=" "),t+=n);return t}function o(){for(var r,f,n=0,t="",s=arguments.length;n<s;n++)(r=arguments[n])&&(f=i(r))&&(t&&(t+=" "),t+=f);return t}exports.clsx=o;

package/clsx-OuTLNxxd.js

@@ -1,16 +0,0 @@
-function a(r) {
-  var f, n, t = "";
-  if (typeof r == "string" || typeof r == "number") t += r;
-  else if (typeof r == "object") if (Array.isArray(r)) {
-    var o = r.length;
-    for (f = 0; f < o; f++) r[f] && (n = a(r[f])) && (t && (t += " "), t += n);
-  } else for (n in r) r[n] && (t && (t += " "), t += n);
-  return t;
-}
-function i() {
-  for (var r, f, n = 0, t = "", o = arguments.length; n < o; n++) (r = arguments[n]) && (f = a(r)) && (t && (t += " "), t += f);
-  return t;
-}
-export {
-  i as c
-};

package/dynamic-styles.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("@salty-css/core/css/dynamic-styles"),u=require("./clsx-C11secjj.cjs"),g=require("react"),S=async({as:n,scope:r,styles:t,...c})=>{if(n){const a=l=>typeof n=="string"?g.createElement(n,l):n(l);if(!t)return e.jsx(a,{...c});const i=s.getDynamicStylesClassName(t),m=await s.getDynamicStylesCss(t,r||`.${i}`),o={...c,className:u.clsx(i,c.className)};return e.jsxs(e.Fragment,{children:[e.jsx("style",{children:m}),e.jsx(a,{...o})]})}if(!t)return null;const y=await s.getDynamicStylesCss(t,r);return e.jsx("style",{children:y})};Object.defineProperty(exports,"getDynamicStylesClassName",{enumerable:!0,get:()=>s.getDynamicStylesClassName});Object.defineProperty(exports,"getDynamicStylesCss",{enumerable:!0,get:()=>s.getDynamicStylesCss});exports.DynamicStyles=S;

package/dynamic-styles.d.ts

@@ -1,15 +0,0 @@
-import { BaseStyles } from '@salty-css/core/types';
-import { getDynamicStylesClassName, getDynamicStylesCss } from '@salty-css/core/css/dynamic-styles';
-import { HTMLAttributes } from 'react';
-export { getDynamicStylesClassName, getDynamicStylesCss };
-type AnyComponent = (...args: any[]) => React.ReactNode;
-interface DynamicStylesProps extends HTMLAttributes<HTMLElement> {
-    styles?: BaseStyles;
-    scope?: string;
-    as?: string | AnyComponent;
-}
-/**
- * Add any dynamic styles to your app with a custom scope.
- * Note: this works only with server components.
- */
-export declare const DynamicStyles: ({ as, scope, styles, ...rest }: DynamicStylesProps) => Promise<import("react/jsx-runtime").JSX.Element | null>;

package/dynamic-styles.js

@@ -1,24 +0,0 @@
-import { jsx as n, jsxs as f, Fragment as p } from "react/jsx-runtime";
-import { getDynamicStylesClassName as g, getDynamicStylesCss as o } from "@salty-css/core/css/dynamic-styles";
-import { getDynamicStylesClassName as w, getDynamicStylesCss as E } from "@salty-css/core/css/dynamic-styles";
-import { c as u } from "./clsx-OuTLNxxd.js";
-import { createElement as x } from "react";
-const d = async ({ as: e, scope: r, styles: t, ...s }) => {
-  if (e) {
-    const c = (a) => typeof e == "string" ? x(e, a) : e(a);
-    if (!t) return /* @__PURE__ */ n(c, { ...s });
-    const m = g(t), l = await o(t, r || `.${m}`), y = { ...s, className: u(m, s.className) };
-    return /* @__PURE__ */ f(p, { children: [
-      /* @__PURE__ */ n("style", { children: l }),
-      /* @__PURE__ */ n(c, { ...y })
-    ] });
-  }
-  if (!t) return null;
-  const i = await o(t, r);
-  return /* @__PURE__ */ n("style", { children: i });
-};
-export {
-  d as DynamicStyles,
-  w as getDynamicStylesClassName,
-  E as getDynamicStylesCss
-};

package/element-factory-BPI0pGIH.cjs

@@ -1 +0,0 @@
-"use strict";const S=require("react"),C=require("./clsx-C11secjj.cjs"),N=require("@salty-css/core/util"),F=require("@salty-css/core/parsers"),R=["passProps"],v=(E,y="",t={},m)=>{const K=({extend:l=E,element:h=t.element,className:O="",children:$,passProps:f=t.passProps,_vks:c=new Set,...a},w)=>{const s={passProps:f};t.attr&&Object.assign(s,t.attr),m&&Object.assign(s,m),t.defaultProps&&Object.assign(a,t.defaultProps),a&&Object.assign(s,a);const o=new Set([...y.split(" "),...O.split(" ")]),d=typeof l=="function"||typeof l=="object",r=d&&"isStyled"in l,j=d?l:h||l;if(!j)throw new Error("No element provided");const u=s.style||{};s.style||(s.style=u),Object.entries(u).forEach(([e,i])=>{const n=F.parseVariableTokens(i);n&&(u[e]=n.transformed)}),t.propValueKeys&&t.propValueKeys.forEach(e=>{const i=`css-${e}`,n=a[i];if(n===void 0)return;const q=`--props-${N.dashCase(e)}`;u[q]=n,c&&c.add(i)}),t.variantKeys&&t.variantKeys.forEach(e=>{const[i,n]=e.split("=");a[i]!==void 0?(o.add(`${i}-${a[i]}`),c&&c.add(i)):n!==void 0&&o.add(`${i}-${n}`)}),c&&(!d||!r)?c.forEach(e=>{if(!f)return delete s[e];if(f!==!0&&!f.includes(e))return delete s[e]}):r&&Object.assign(s,{_vks:c}),r||R.forEach(e=>delete s[e]);const V=C.clsx(...o);return S.createElement(j,{element:d?h:void 0,className:V,ref:w,...s},$)},b=S.forwardRef(K);return Object.assign(b,{isStyled:!0,className:y,toString:()=>`.${t.hash}`}),b};exports.elementFactory=v;

package/element-factory-D5vMsSwp.js

@@ -1,56 +0,0 @@
-import { forwardRef as V, createElement as C } from "react";
-import { c as N } from "./clsx-OuTLNxxd.js";
-import { dashCase as R } from "@salty-css/core/util";
-import { parseVariableTokens as p } from "@salty-css/core/parsers";
-const q = ["passProps"], B = (S, m = "", t = {}, y) => {
-  const b = V(({
-    extend: c = S,
-    element: h = t.element,
-    className: E = "",
-    children: K,
-    passProps: l = t.passProps,
-    _vks: n = /* @__PURE__ */ new Set(),
-    ...a
-  }, O) => {
-    const s = { passProps: l };
-    t.attr && Object.assign(s, t.attr), y && Object.assign(s, y), t.defaultProps && Object.assign(a, t.defaultProps), a && Object.assign(s, a);
-    const r = /* @__PURE__ */ new Set([...m.split(" "), ...E.split(" ")]), o = typeof c == "function" || typeof c == "object", u = o && "isStyled" in c, j = o ? c : h || c;
-    if (!j) throw new Error("No element provided");
-    const d = s.style || {};
-    s.style || (s.style = d), Object.entries(d).forEach(([e, i]) => {
-      const f = p(i);
-      f && (d[e] = f.transformed);
-    }), t.propValueKeys && t.propValueKeys.forEach((e) => {
-      const i = `css-${e}`, f = a[i];
-      if (f === void 0) return;
-      const w = `--props-${R(e)}`;
-      d[w] = f, n && n.add(i);
-    }), t.variantKeys && t.variantKeys.forEach((e) => {
-      const [i, f] = e.split("=");
-      a[i] !== void 0 ? (r.add(`${i}-${a[i]}`), n && n.add(i)) : f !== void 0 && r.add(`${i}-${f}`);
-    }), n && (!o || !u) ? n.forEach((e) => {
-      if (!l) return delete s[e];
-      if (l !== !0 && !l.includes(e))
-        return delete s[e];
-    }) : u && Object.assign(s, { _vks: n }), u || q.forEach((e) => delete s[e]);
-    const $ = N(...r);
-    return C(
-      j,
-      {
-        element: o ? h : void 0,
-        className: $,
-        ref: O,
-        ...s
-      },
-      K
-    );
-  });
-  return Object.assign(b, {
-    isStyled: !0,
-    className: m,
-    toString: () => `.${t.hash}`
-  }), b;
-};
-export {
-  B as e
-};