@flow-os/style 0.0.71 → 0.0.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flow-os/style",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "license": "PolyForm-Shield-1.0.0",
   "type": "module",
   "publishConfig": {

package/src/features/s/index.ts

@@ -14,10 +14,18 @@ const BP_MAP: Record<string, string> = { mob: 'max-sm', tab: 'md', des: 'lg' };
 const BP_KEYS = ['base', 'mob', 'tab', 'des'] as const;
 const BP_KEYS_SET = new Set(BP_KEYS);
 
+import { tailwindToStyle, tailwindUnconverted } from '../tailwindUtils';
+
 function cssProp(js: string): string {
   return js.replace(/([A-Z])/g, '-$1').toLowerCase();
 }
 
+function extractInlineFromClasses(classes: string[]): { style: Record<string, string>; rest: string[] } {
+  const style = tailwindToStyle(classes);
+  const rest = tailwindUnconverted(classes);
+  return { style, rest };
+}
+
 function parseBreakpointString(str: string): string {
   const classes: string[] = [];
   let base = str;
@@ -38,8 +46,12 @@ function parseBreakpointString(str: string): string {
 
 export function resolveS(s: SValue): SResult {
   if (typeof s === 'string') {
-    const className = parseBreakpointString(s);
-    return { className: className || undefined };
+    const rawClasses = parseBreakpointString(s).split(/\s+/).filter(Boolean);
+    const { style, rest } = extractInlineFromClasses(rawClasses);
+    return {
+      ...(rest.length ? { className: rest.join(' ') } : {}),
+      ...(Object.keys(style).length ? { style } : {}),
+    };
   }
   if (s && typeof s === 'object') {
     const obj = s as Record<string, string | number | undefined>;

package/src/features/styleFlow/baseShorthand.ts

@@ -1,9 +1,12 @@
 /**
  * Parses shorthand CSS in base: '...' for styleFlow.
- * Format: prop value [value...] separated by ;
- * Examples: bg red; p 4; flex; c #fff
+ * Supports both:
+ * - Tailwind-style: flex flex-col p-4 m-2 w-full
+ * - Shorthand: p 4; c red; bg #fff
  */
 
+import { tailwindToStyle } from '../tailwindUtils';
+
 const SHORTHAND: Record<string, string> = {
   bg: 'background',
   background: 'background',
@@ -65,23 +68,20 @@ export function parseBaseShorthand(str: string): Record<string, string> {
     const tokens = part.split(/\s+/).filter(Boolean);
     if (tokens.length === 0) continue;
 
+    const twStyle = tailwindToStyle(tokens);
+    Object.assign(style, twStyle);
+
     const first = tokens[0].toLowerCase();
-    if (DISPLAY_TOKENS[first]) {
+    if (DISPLAY_TOKENS[first] && !twStyle.display) {
       style.display = DISPLAY_TOKENS[first];
       continue;
     }
-
-    const prop = SHORTHAND[first] ?? first.replace(/([A-Z])/g, '-$1').toLowerCase();
-    const values = tokens.slice(1);
-
-    if (values.length === 0) continue;
-    if (values.length === 1) style[prop] = toValue(values[0]);
-    else if (values.length === 2) {
-      style[prop] = `${toValue(values[0])} ${toValue(values[1])}`;
-    } else if (values.length === 4) {
-      style[prop] = values.map(toValue).join(' ');
-    } else {
-      style[prop] = values.map(toValue).join(' ');
+    if (first in SHORTHAND && tokens.length >= 2) {
+      const prop = SHORTHAND[first];
+      const values = tokens.slice(1);
+      if (values.length === 1) style[prop] = toValue(values[0]);
+      else if (values.length === 2) style[prop] = `${toValue(values[0])} ${toValue(values[1])}`;
+      else style[prop] = values.map(toValue).join(' ');
     }
   }
   return style;

package/src/features/tailwindUtils.ts

@@ -0,0 +1,261 @@
+/**
+ * Tailwind-like utilities → inline CSS.
+ * Works without Tailwind. Super short: flex flex-col p-4 m-2 w-full
+ */
+
+const SCALE: Record<number, string> = {
+  0: '0',
+  0.5: '0.125rem',
+  1: '0.25rem',
+  1.5: '0.375rem',
+  2: '0.5rem',
+  2.5: '0.625rem',
+  3: '0.75rem',
+  3.5: '0.875rem',
+  4: '1rem',
+  5: '1.25rem',
+  6: '1.5rem',
+  7: '1.75rem',
+  8: '2rem',
+  9: '2.25rem',
+  10: '2.5rem',
+  11: '2.75rem',
+  12: '3rem',
+  14: '3.5rem',
+  16: '4rem',
+  20: '5rem',
+  24: '6rem',
+  28: '7rem',
+  32: '8rem',
+  36: '9rem',
+  40: '10rem',
+  44: '11rem',
+  48: '12rem',
+  52: '13rem',
+  56: '14rem',
+  60: '15rem',
+  64: '16rem',
+  72: '18rem',
+  80: '20rem',
+  96: '24rem',
+};
+
+function scale(n: number): string {
+  return SCALE[n] ?? (n <= 96 ? `${n * 0.25}rem` : `${n}px`);
+}
+
+type Converter = (m: RegExpMatchArray) => [string, string] | [string, string, string, string] | null;
+
+const CONVERTERS: Array<{ re: RegExp; fn: Converter }> = [
+  // Display
+  { re: /^flex$/, fn: () => ['display', 'flex'] },
+  { re: /^inline-flex$/, fn: () => ['display', 'inline-flex'] },
+  { re: /^block$/, fn: () => ['display', 'block'] },
+  { re: /^inline-block$/, fn: () => ['display', 'inline-block'] },
+  { re: /^inline$/, fn: () => ['display', 'inline'] },
+  { re: /^grid$/, fn: () => ['display', 'grid'] },
+  { re: /^hidden$/, fn: () => ['display', 'none'] },
+
+  // Flex direction
+  { re: /^flex-row$/, fn: () => ['flexDirection', 'row'] },
+  { re: /^flex-row-reverse$/, fn: () => ['flexDirection', 'row-reverse'] },
+  { re: /^flex-col$/, fn: () => ['flexDirection', 'column'] },
+  { re: /^flex-col-reverse$/, fn: () => ['flexDirection', 'column-reverse'] },
+
+  // Flex wrap
+  { re: /^flex-wrap$/, fn: () => ['flexWrap', 'wrap'] },
+  { re: /^flex-nowrap$/, fn: () => ['flexWrap', 'nowrap'] },
+
+  // Flex grow/shrink
+  { re: /^flex-1$/, fn: () => ['flex', '1 1 0%'] },
+  { re: /^flex-auto$/, fn: () => ['flex', '1 1 auto'] },
+  { re: /^flex-none$/, fn: () => ['flex', 'none'] },
+  { re: /^flex-initial$/, fn: () => ['flex', '0 1 auto'] },
+  { re: /^grow$/, fn: () => ['flexGrow', '1'] },
+  { re: /^grow-0$/, fn: () => ['flexGrow', '0'] },
+  { re: /^shrink$/, fn: () => ['flexShrink', '1'] },
+  { re: /^shrink-0$/, fn: () => ['flexShrink', '0'] },
+
+  // Justify
+  { re: /^justify-start$/, fn: () => ['justifyContent', 'flex-start'] },
+  { re: /^justify-end$/, fn: () => ['justifyContent', 'flex-end'] },
+  { re: /^justify-center$/, fn: () => ['justifyContent', 'center'] },
+  { re: /^justify-between$/, fn: () => ['justifyContent', 'space-between'] },
+  { re: /^justify-around$/, fn: () => ['justifyContent', 'space-around'] },
+  { re: /^justify-evenly$/, fn: () => ['justifyContent', 'space-evenly'] },
+
+  // Align
+  { re: /^items-start$/, fn: () => ['alignItems', 'flex-start'] },
+  { re: /^items-end$/, fn: () => ['alignItems', 'flex-end'] },
+  { re: /^items-center$/, fn: () => ['alignItems', 'center'] },
+  { re: /^items-stretch$/, fn: () => ['alignItems', 'stretch'] },
+  { re: /^items-baseline$/, fn: () => ['alignItems', 'baseline'] },
+
+  // Self
+  { re: /^self-auto$/, fn: () => ['alignSelf', 'auto'] },
+  { re: /^self-start$/, fn: () => ['alignSelf', 'flex-start'] },
+  { re: /^self-end$/, fn: () => ['alignSelf', 'flex-end'] },
+  { re: /^self-center$/, fn: () => ['alignSelf', 'center'] },
+  { re: /^self-stretch$/, fn: () => ['alignSelf', 'stretch'] },
+
+  // Gap
+  { re: /^gap-(\d+(?:\.\d+)?)$/, fn: (m) => ['gap', scale(parseFloat(m[1]))] },
+  { re: /^gap-x-(\d+(?:\.\d+)?)$/, fn: (m) => ['columnGap', scale(parseFloat(m[1]))] },
+  { re: /^gap-y-(\d+(?:\.\d+)?)$/, fn: (m) => ['rowGap', scale(parseFloat(m[1]))] },
+
+  // Padding
+  { re: /^p-(\d+(?:\.\d+)?)$/, fn: (m) => ['padding', scale(parseFloat(m[1]))] },
+  { re: /^px-(\d+(?:\.\d+)?)$/, fn: (m) => ['paddingLeft', scale(parseFloat(m[1])), 'paddingRight', scale(parseFloat(m[1]))] },
+  { re: /^py-(\d+(?:\.\d+)?)$/, fn: (m) => ['paddingTop', scale(parseFloat(m[1])), 'paddingBottom', scale(parseFloat(m[1]))] },
+  { re: /^pt-(\d+(?:\.\d+)?)$/, fn: (m) => ['paddingTop', scale(parseFloat(m[1]))] },
+  { re: /^pr-(\d+(?:\.\d+)?)$/, fn: (m) => ['paddingRight', scale(parseFloat(m[1]))] },
+  { re: /^pb-(\d+(?:\.\d+)?)$/, fn: (m) => ['paddingBottom', scale(parseFloat(m[1]))] },
+  { re: /^pl-(\d+(?:\.\d+)?)$/, fn: (m) => ['paddingLeft', scale(parseFloat(m[1]))] },
+  { re: /^p-0$/, fn: () => ['padding', '0'] },
+  { re: /^px-0$/, fn: () => ['paddingLeft', '0', 'paddingRight', '0'] },
+  { re: /^py-0$/, fn: () => ['paddingTop', '0', 'paddingBottom', '0'] },
+
+  // Margin
+  { re: /^m-(\d+(?:\.\d+)?)$/, fn: (m) => ['margin', scale(parseFloat(m[1]))] },
+  { re: /^m-0$/, fn: () => ['margin', '0'] },
+  { re: /^mx-(\d+(?:\.\d+)?)$/, fn: (m) => ['marginLeft', scale(parseFloat(m[1])), 'marginRight', scale(parseFloat(m[1]))] },
+  { re: /^my-(\d+(?:\.\d+)?)$/, fn: (m) => ['marginTop', scale(parseFloat(m[1])), 'marginBottom', scale(parseFloat(m[1]))] },
+  { re: /^mt-(\d+(?:\.\d+)?)$/, fn: (m) => ['marginTop', scale(parseFloat(m[1]))] },
+  { re: /^mr-(\d+(?:\.\d+)?)$/, fn: (m) => ['marginRight', scale(parseFloat(m[1]))] },
+  { re: /^mb-(\d+(?:\.\d+)?)$/, fn: (m) => ['marginBottom', scale(parseFloat(m[1]))] },
+  { re: /^ml-(\d+(?:\.\d+)?)$/, fn: (m) => ['marginLeft', scale(parseFloat(m[1]))] },
+  { re: /^mx-auto$/, fn: () => ['marginLeft', 'auto', 'marginRight', 'auto'] },
+
+  // Width
+  { re: /^w-full$/, fn: () => ['width', '100%'] },
+  { re: /^w-screen$/, fn: () => ['width', '100vw'] },
+  { re: /^w-auto$/, fn: () => ['width', 'auto'] },
+  { re: /^w-(\d+(?:\.\d+)?)$/, fn: (m) => ['width', scale(parseFloat(m[1]))] },
+  { re: /^w-1\/2$/, fn: () => ['width', '50%'] },
+  { re: /^w-1\/3$/, fn: () => ['width', '33.333333%'] },
+  { re: /^w-2\/3$/, fn: () => ['width', '66.666667%'] },
+  { re: /^w-1\/4$/, fn: () => ['width', '25%'] },
+  { re: /^w-3\/4$/, fn: () => ['width', '75%'] },
+  { re: /^w-min$/, fn: () => ['width', 'min-content'] },
+  { re: /^w-max$/, fn: () => ['width', 'max-content'] },
+  { re: /^min-w-0$/, fn: () => ['minWidth', '0'] },
+  { re: /^min-w-full$/, fn: () => ['minWidth', '100%'] },
+  { re: /^max-w-full$/, fn: () => ['maxWidth', '100%'] },
+
+  // Height
+  { re: /^h-full$/, fn: () => ['height', '100%'] },
+  { re: /^h-screen$/, fn: () => ['height', '100vh'] },
+  { re: /^h-auto$/, fn: () => ['height', 'auto'] },
+  { re: /^h-(\d+(?:\.\d+)?)$/, fn: (m) => ['height', scale(parseFloat(m[1]))] },
+  { re: /^min-h-0$/, fn: () => ['minHeight', '0'] },
+  { re: /^min-h-full$/, fn: () => ['minHeight', '100%'] },
+  { re: /^min-h-screen$/, fn: () => ['minHeight', '100vh'] },
+
+  // Text
+  { re: /^text-left$/, fn: () => ['textAlign', 'left'] },
+  { re: /^text-center$/, fn: () => ['textAlign', 'center'] },
+  { re: /^text-right$/, fn: () => ['textAlign', 'right'] },
+  { re: /^text-justify$/, fn: () => ['textAlign', 'justify'] },
+  { re: /^font-bold$/, fn: () => ['fontWeight', '700'] },
+  { re: /^font-normal$/, fn: () => ['fontWeight', '400'] },
+  { re: /^font-medium$/, fn: () => ['fontWeight', '500'] },
+  { re: /^font-semibold$/, fn: () => ['fontWeight', '600'] },
+  { re: /^font-light$/, fn: () => ['fontWeight', '300'] },
+  { re: /^text-sm$/, fn: () => ['fontSize', '0.875rem'] },
+  { re: /^text-base$/, fn: () => ['fontSize', '1rem'] },
+  { re: /^text-lg$/, fn: () => ['fontSize', '1.125rem'] },
+  { re: /^text-xl$/, fn: () => ['fontSize', '1.25rem'] },
+  { re: /^text-2xl$/, fn: () => ['fontSize', '1.5rem'] },
+  { re: /^text-3xl$/, fn: () => ['fontSize', '1.875rem'] },
+  { re: /^text-xs$/, fn: () => ['fontSize', '0.75rem'] },
+  { re: /^text-\[#([0-9a-fA-F]{3,8})\]$/, fn: (m) => ['color', `#${m[1].length === 3 ? m[1].replace(/(.)/g, '$1$1') : m[1]}`] },
+  { re: /^text-#([0-9a-fA-F]{3,8})$/, fn: (m) => ['color', `#${m[1].length === 3 ? m[1].replace(/(.)/g, '$1$1') : m[1]}`] },
+  { re: /^text-white$/, fn: () => ['color', '#fff'] },
+  { re: /^text-black$/, fn: () => ['color', '#000'] },
+  { re: /^text-transparent$/, fn: () => ['color', 'transparent'] },
+
+  // Background
+  { re: /^bg-\[#([0-9a-fA-F]{3,8})\]$/, fn: (m) => ['background', `#${m[1].length === 3 ? m[1].replace(/(.)/g, '$1$1') : m[1]}`] },
+  { re: /^bg-#([0-9a-fA-F]{3,8})$/, fn: (m) => ['background', `#${m[1].length === 3 ? m[1].replace(/(.)/g, '$1$1') : m[1]}`] },
+  { re: /^bg-white$/, fn: () => ['background', '#fff'] },
+  { re: /^bg-black$/, fn: () => ['background', '#000'] },
+  { re: /^bg-transparent$/, fn: () => ['background', 'transparent'] },
+
+  // Border
+  { re: /^border$/, fn: () => ['borderWidth', '1px'] },
+  { re: /^border-0$/, fn: () => ['borderWidth', '0'] },
+  { re: /^border-2$/, fn: () => ['borderWidth', '2px'] },
+  { re: /^border-4$/, fn: () => ['borderWidth', '4px'] },
+  { re: /^rounded$/, fn: () => ['borderRadius', '0.25rem'] },
+  { re: /^rounded-sm$/, fn: () => ['borderRadius', '0.125rem'] },
+  { re: /^rounded-md$/, fn: () => ['borderRadius', '0.375rem'] },
+  { re: /^rounded-lg$/, fn: () => ['borderRadius', '0.5rem'] },
+  { re: /^rounded-xl$/, fn: () => ['borderRadius', '0.75rem'] },
+  { re: /^rounded-2xl$/, fn: () => ['borderRadius', '1rem'] },
+  { re: /^rounded-full$/, fn: () => ['borderRadius', '9999px'] },
+  { re: /^rounded-none$/, fn: () => ['borderRadius', '0'] },
+
+  // Position
+  { re: /^relative$/, fn: () => ['position', 'relative'] },
+  { re: /^absolute$/, fn: () => ['position', 'absolute'] },
+  { re: /^fixed$/, fn: () => ['position', 'fixed'] },
+  { re: /^sticky$/, fn: () => ['position', 'sticky'] },
+
+  // Overflow
+  { re: /^overflow-auto$/, fn: () => ['overflow', 'auto'] },
+  { re: /^overflow-hidden$/, fn: () => ['overflow', 'hidden'] },
+  { re: /^overflow-visible$/, fn: () => ['overflow', 'visible'] },
+  { re: /^overflow-scroll$/, fn: () => ['overflow', 'scroll'] },
+
+  // Opacity
+  { re: /^opacity-0$/, fn: () => ['opacity', '0'] },
+  { re: /^opacity-50$/, fn: () => ['opacity', '0.5'] },
+  { re: /^opacity-100$/, fn: () => ['opacity', '1'] },
+
+  // Cursor
+  { re: /^cursor-pointer$/, fn: () => ['cursor', 'pointer'] },
+  { re: /^cursor-default$/, fn: () => ['cursor', 'default'] },
+  { re: /^cursor-not-allowed$/, fn: () => ['cursor', 'not-allowed'] },
+
+  // Grid
+  { re: /^grid-cols-1$/, fn: () => ['gridTemplateColumns', 'repeat(1, minmax(0, 1fr))'] },
+  { re: /^grid-cols-2$/, fn: () => ['gridTemplateColumns', 'repeat(2, minmax(0, 1fr))'] },
+  { re: /^grid-cols-3$/, fn: () => ['gridTemplateColumns', 'repeat(3, minmax(0, 1fr))'] },
+  { re: /^grid-cols-4$/, fn: () => ['gridTemplateColumns', 'repeat(4, minmax(0, 1fr))'] },
+  { re: /^grid-rows-1$/, fn: () => ['gridTemplateRows', 'repeat(1, minmax(0, 1fr))'] },
+  { re: /^grid-rows-2$/, fn: () => ['gridTemplateRows', 'repeat(2, minmax(0, 1fr))'] },
+];
+
+function toCssProp(js: string): string {
+  return js.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+function classMatchesConverter(c: string): boolean {
+  return CONVERTERS.some(({ re }) => re.test(c));
+}
+
+export function tailwindToStyle(classes: string[]): Record<string, string> {
+  const style: Record<string, string> = {};
+  for (const c of classes) {
+    for (const { re, fn } of CONVERTERS) {
+      const m = c.match(re);
+      if (m) {
+        const result = fn(m);
+        if (result) {
+          if (result.length === 2) {
+            style[toCssProp(result[0])] = result[1];
+          } else {
+            style[toCssProp(result[0])] = result[1];
+            style[toCssProp(result[2])] = result[3];
+          }
+        }
+        break;
+      }
+    }
+  }
+  return style;
+}
+
+export function tailwindUnconverted(classes: string[]): string[] {
+  return classes.filter((c) => !classMatchesConverter(c));
+}