css-in-props 3.5.0 → 3.6.1

package/README.md

@@ -0,0 +1,68 @@
+# css-in-props
+
+CSS properties as component props for DOMQL elements. Transforms design-system-aware props into CSS classes via Emotion.
+
+## What it does
+
+- Transforms component props (`theme`, `color`, `background`, `border`, `shadow`, etc.) into resolved CSS
+- Resolves design system tokens (colors, spacing, typography, themes) from `@symbo.ls/scratch`
+- Handles media queries (`@dark`, `@mobileS`, etc.) and pseudo selectors (`:hover`, `:focus`) as prop prefixes
+- Generates Emotion CSS classes for optimized rendering
+
+## Theme prop
+
+The `theme` prop resolves theme definitions into CSS variables. Theme switching is handled entirely by CSS — no DOMQL re-renders needed.
+
+```javascript
+const Card = {
+  theme: 'primary',           // uses --theme-primary-* CSS vars
+  // themeModifier: 'dark',   // optional: force a specific scheme on this component
+}
+```
+
+When `globalTheme` is `'auto'` (default), CSS variables switch automatically via `prefers-color-scheme` media queries and `[data-theme]` selectors.
+
+## Props reference
+
+| Category | Props |
+|----------|-------|
+| Theme | `theme`, `color`, `background`, `backgroundColor`, `borderColor` |
+| Border | `border`, `borderLeft`, `borderTop`, `borderRight`, `borderBottom`, `outline` |
+| Shadow | `shadow`, `boxShadow`, `textShadow` |
+| Text | `textStroke` |
+| Image | `backgroundImage` |
+| Layout | `outlineOffset` |
+
+## Media and selector props
+
+Props can be prefixed with media queries or selectors:
+
+```javascript
+const Button = {
+  background: 'blue',
+  ':hover': { background: 'darkblue' },
+  '@mobileS': { padding: 'A' },
+  '.active': { background: 'green' }
+}
+```
+
+### `transformersByPrefix`
+
+The prefix-to-handler registry that powers media queries, selectors, conditionals, and variables. Each key is a single-character prefix that triggers a specific transformer when found at the start of a prop key:
+
+| Prefix | Handler | Example |
+|--------|---------|---------|
+| `@` | Media query | `@mobileS`, `@dark`, `@print` |
+| `:` | Pseudo selector | `:hover`, `:focus`, `:first-child` |
+| `[` | Attribute selector | `[disabled]`, `[data-active]` |
+| `>` | Child combinator | `> .child` |
+| `&` | Self selector | `&.active` |
+| `$` | Case conditional | `$isActive` |
+| `.` | Truthy conditional | `.visible` |
+| `!` | Falsy conditional | `!hidden` |
+| `-` | CSS variable | `--my-var` |
+| `*`, `+`, `~` | CSS combinators | `* div`, `+ .sibling`, `~ .general` |
+
+```javascript
+import { transformersByPrefix } from 'css-in-props'
+```

package/dist/cjs/_transform.js

@@ -18,63 +18,13 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var transform_exports = {};
 __export(transform_exports, {
-  extractCSSfromProps: () => extractCSSfromProps,
   transformClassname: () => transformClassname
 });
 module.exports = __toCommonJS(transform_exports);
 var import_utils = require("@domql/utils");
-var import_atoms = require("@symbo.ls/atoms");
-var import_props = require("./props");
-var import_defaults = require("./props/defaults");
-const transformClassname = (element, restProps = {}) => {
-  const classCss = {};
-  const { props, classlist: elementClass } = element;
+var import_transform = require("./transform");
+const transformClassname = (element) => {
+  const { props } = element;
   if (!(0, import_utils.isObject)(props)) return;
-  for (const key in props) {
-    const setter = import_atoms.keySetters[key.slice(0, 1)];
-    const hasCSS = elementClass[key];
-    if (setter) setter(key, props[key], classCss, element, true);
-    else if ((0, import_utils.isFunction)(hasCSS)) {
-      const stack = hasCSS(element, element.state, element.context);
-      const exec = (0, import_utils.isArray)(stack) ? stack.reduce((a, c) => {
-        return (0, import_utils.merge)(a, c);
-      }, {}) : stack;
-      (0, import_utils.deepMerge)(classCss, exec);
-    } else if (key === "style") {
-      (0, import_utils.deepMerge)(classCss, props[key]);
-    } else restProps[key] = props[key];
-  }
-  return classCss;
-};
-const extractCSSfromProps = (element) => {
-  const { props: defProps } = element;
-  const css = {};
-  const props = {};
-  for (const key in defProps) {
-    const val = defProps[key];
-    const mediaProp = import_atoms.keySetters[key.slice(0, 1)];
-    if (mediaProp) {
-      mediaProp(key, defProps[key], css, element, true);
-      continue;
-    }
-    const preprop = import_props.CSS_PROPS_REGISTRY[key];
-    if (preprop) {
-      const stack = preprop(element, element.state, element.context);
-      const exec = (0, import_utils.isArray)(stack) ? stack.reduce((a, c) => {
-        return (0, import_utils.merge)(a, c);
-      }, {}) : stack;
-      (0, import_utils.deepMerge)(css, exec);
-      continue;
-    }
-    if (key === "style") {
-      (0, import_utils.deepMerge)(css, defProps[key]);
-      continue;
-    }
-    if (import_defaults.DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
-      css[key] = val;
-      continue;
-    }
-    props[key] = val;
-  }
-  return { css, props };
+  return (0, import_transform.useCssInProps)(props, element);
 };

package/dist/cjs/props/theme.js

@@ -31,16 +31,11 @@ const getSystemGlobalTheme = ({ context, state }) => {
 const THEME_PROPS = {
   theme: (val, element) => {
     const { props } = element;
-    const globalTheme = getSystemGlobalTheme(element);
     if (!val) return;
-    const hasSubtheme = val.includes(" ") && !val.includes("@");
-    const globalThemeForced = `@${props.themeModifier || globalTheme}`;
-    if (hasSubtheme) {
-      const themeAppliedInVal = val.split(" ");
-      themeAppliedInVal.splice(1, 0, globalThemeForced);
-      return (0, import_scratch.getMediaTheme)(themeAppliedInVal);
-    } else if (val.includes("@{globalTheme}")) val.replace("@{globalTheme}", globalThemeForced);
-    return (0, import_scratch.getMediaTheme)(val, `@${props.themeModifier || globalTheme}`);
+    if (props.themeModifier) {
+      return (0, import_scratch.getMediaTheme)(val, `@${props.themeModifier}`);
+    }
+    return (0, import_scratch.getMediaTheme)(val);
   },
   color: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element);

package/dist/cjs/transform/index.js

@@ -16,3 +16,4 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var transform_exports = {};
 module.exports = __toCommonJS(transform_exports);
 __reExport(transform_exports, require("./executors"), module.exports);
+__reExport(transform_exports, require("./transformers"), module.exports);

package/dist/esm/_transform.js

@@ -1,60 +1,10 @@
-import { merge, deepMerge, isFunction, isObject, isArray } from "@domql/utils";
-import { keySetters } from "@symbo.ls/atoms";
-import { CSS_PROPS_REGISTRY } from "./props";
-import { DEFAULT_CSS_PROPERTIES_LIST } from "./props/defaults";
-const transformClassname = (element, restProps = {}) => {
-  const classCss = {};
-  const { props, classlist: elementClass } = element;
+import { isObject } from "@domql/utils";
+import { useCssInProps } from "./transform";
+const transformClassname = (element) => {
+  const { props } = element;
   if (!isObject(props)) return;
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)];
-    const hasCSS = elementClass[key];
-    if (setter) setter(key, props[key], classCss, element, true);
-    else if (isFunction(hasCSS)) {
-      const stack = hasCSS(element, element.state, element.context);
-      const exec = isArray(stack) ? stack.reduce((a, c) => {
-        return merge(a, c);
-      }, {}) : stack;
-      deepMerge(classCss, exec);
-    } else if (key === "style") {
-      deepMerge(classCss, props[key]);
-    } else restProps[key] = props[key];
-  }
-  return classCss;
-};
-const extractCSSfromProps = (element) => {
-  const { props: defProps } = element;
-  const css = {};
-  const props = {};
-  for (const key in defProps) {
-    const val = defProps[key];
-    const mediaProp = keySetters[key.slice(0, 1)];
-    if (mediaProp) {
-      mediaProp(key, defProps[key], css, element, true);
-      continue;
-    }
-    const preprop = CSS_PROPS_REGISTRY[key];
-    if (preprop) {
-      const stack = preprop(element, element.state, element.context);
-      const exec = isArray(stack) ? stack.reduce((a, c) => {
-        return merge(a, c);
-      }, {}) : stack;
-      deepMerge(css, exec);
-      continue;
-    }
-    if (key === "style") {
-      deepMerge(css, defProps[key]);
-      continue;
-    }
-    if (DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
-      css[key] = val;
-      continue;
-    }
-    props[key] = val;
-  }
-  return { css, props };
+  return useCssInProps(props, element);
 };
 export {
-  extractCSSfromProps,
   transformClassname
 };

package/dist/esm/props/theme.js

@@ -17,16 +17,11 @@ const getSystemGlobalTheme = ({ context, state }) => {
 const THEME_PROPS = {
   theme: (val, element) => {
     const { props } = element;
-    const globalTheme = getSystemGlobalTheme(element);
     if (!val) return;
-    const hasSubtheme = val.includes(" ") && !val.includes("@");
-    const globalThemeForced = `@${props.themeModifier || globalTheme}`;
-    if (hasSubtheme) {
-      const themeAppliedInVal = val.split(" ");
-      themeAppliedInVal.splice(1, 0, globalThemeForced);
-      return getMediaTheme(themeAppliedInVal);
-    } else if (val.includes("@{globalTheme}")) val.replace("@{globalTheme}", globalThemeForced);
-    return getMediaTheme(val, `@${props.themeModifier || globalTheme}`);
+    if (props.themeModifier) {
+      return getMediaTheme(val, `@${props.themeModifier}`);
+    }
+    return getMediaTheme(val);
   },
   color: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element);

package/dist/esm/transform/index.js

@@ -1 +1,2 @@
 export * from "./executors";
+export * from "./transformers";

package/dist/iife/index.js

@@ -38,9 +38,11 @@ var CssInProps = (() => {
     POSITION_PROPS: () => POSITION_PROPS,
     THEME_PROPS: () => THEME_PROPS,
     TIMING_PROPS: () => TIMING_PROPS,
+    applyTrueProps: () => applyTrueProps,
     exetuteClassPerComponent: () => exetuteClassPerComponent,
     getSystemGlobalTheme: () => getSystemGlobalTheme,
     transformEmotion: () => transformEmotion,
+    transformersByPrefix: () => transformersByPrefix,
     useCssInProps: () => useCssInProps,
     usePropsAsCSS: () => usePropsAsCSS,
     useSelectorsAsCSS: () => useSelectorsAsCSS
@@ -376,16 +378,11 @@ var CssInProps = (() => {
   var THEME_PROPS = {
     theme: (val, element) => {
       const { props } = element;
-      const globalTheme = getSystemGlobalTheme(element);
       if (!val) return;
-      const hasSubtheme = val.includes(" ") && !val.includes("@");
-      const globalThemeForced = `@${props.themeModifier || globalTheme}`;
-      if (hasSubtheme) {
-        const themeAppliedInVal = val.split(" ");
-        themeAppliedInVal.splice(1, 0, globalThemeForced);
-        return (0, import_scratch5.getMediaTheme)(themeAppliedInVal);
-      } else if (val.includes("@{globalTheme}")) val.replace("@{globalTheme}", globalThemeForced);
-      return (0, import_scratch5.getMediaTheme)(val, `@${props.themeModifier || globalTheme}`);
+      if (props.themeModifier) {
+        return (0, import_scratch5.getMediaTheme)(val, `@${props.themeModifier}`);
+      }
+      return (0, import_scratch5.getMediaTheme)(val);
     },
     color: (val, element) => {
       const globalTheme = getSystemGlobalTheme(element);

package/package.json

@@ -2,7 +2,7 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "3.5.0",
+  "version": "3.6.1",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -12,13 +12,15 @@
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "browser": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
-    }
+      "require": "./dist/cjs/index.js"
+    },
+    "./src/*": "./src/*.js",
+    "./src/props": "./src/props/index.js"
   },
   "source": "src/index.js",
-  "publishConfig": {},
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
     "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
@@ -33,11 +35,9 @@
     "src"
   ],
   "dependencies": {
-    "@domql/utils": "^3.5.0",
-    "@symbo.ls/atoms": "^3.5.0",
-    "@symbo.ls/emotion": "^3.5.0",
-    "@symbo.ls/scratch": "^3.5.0",
-    "smbls": "^3.5.0"
+    "@domql/utils": "^3.6.1",
+    "@symbo.ls/emotion": "^3.6.1",
+    "@symbo.ls/scratch": "^3.6.1"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "browser": "./dist/esm/index.js",

package/src/_transform.js

@@ -1,79 +1,10 @@
 'use strict'
 
-import { merge, deepMerge, isFunction, isObject, isArray } from '@domql/utils'
-import { keySetters } from '@symbo.ls/atoms'
-
-import { CSS_PROPS_REGISTRY } from './props'
-import { DEFAULT_CSS_PROPERTIES_LIST } from './props/defaults'
-
-export const transformClassname = (
-  element,
-  restProps = {}
-) => {
-  const classCss = {}
-  const { props, classlist: elementClass } = element
+import { isObject } from '@domql/utils'
+import { useCssInProps } from './transform'
 
+export const transformClassname = (element) => {
+  const { props } = element
   if (!isObject(props)) return
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    const hasCSS = elementClass[key]
-
-    if (setter) setter(key, props[key], classCss, element, true)
-    else if (isFunction(hasCSS)) {
-      const stack = hasCSS(element, element.state, element.context)
-      const exec = isArray(stack)
-        ? stack.reduce((a, c) => {
-          return merge(a, c)
-        }, {})
-        : stack
-      deepMerge(classCss, exec)
-    } else if (key === 'style') {
-      deepMerge(classCss, props[key])
-    } else restProps[key] = props[key]
-  }
-
-  return classCss
-}
-
-export const extractCSSfromProps = (element) => {
-  const { props: defProps } = element
-  const css = {}
-  const props = {}
-
-  for (const key in defProps) {
-    const val = defProps[key]
-
-    const mediaProp = keySetters[key.slice(0, 1)]
-    if (mediaProp) {
-      mediaProp(key, defProps[key], css, element, true)
-      continue
-    }
-
-    const preprop = CSS_PROPS_REGISTRY[key]
-    if (preprop) {
-      const stack = preprop(element, element.state, element.context)
-      const exec = isArray(stack)
-        ? stack.reduce((a, c) => {
-          return merge(a, c)
-        }, {})
-        : stack
-      deepMerge(css, exec)
-      continue
-    }
-
-    if (key === 'style') {
-      deepMerge(css, defProps[key])
-      continue
-    }
-
-    if (DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
-      css[key] = val
-      continue
-    }
-
-    props[key] = val
-  }
-
-  return { css, props }
+  return useCssInProps(props, element)
 }

package/src/props/theme.js

@@ -22,16 +22,15 @@ export const getSystemGlobalTheme = ({ context, state }) => {
 export const THEME_PROPS = {
   theme: (val, element) => {
     const { props } = element
-    const globalTheme = getSystemGlobalTheme(element)
     if (!val) return
-    const hasSubtheme = val.includes(' ') && !val.includes('@')
-    const globalThemeForced = `@${props.themeModifier || globalTheme}`
-    if (hasSubtheme) {
-      const themeAppliedInVal = val.split(' ')
-      themeAppliedInVal.splice(1, 0, globalThemeForced)
-      return getMediaTheme(themeAppliedInVal)
-    } else if (val.includes('@{globalTheme}')) val.replace('@{globalTheme}', globalThemeForced)
-    return getMediaTheme(val, `@${props.themeModifier || globalTheme}`)
+
+    // themeModifier explicitly forces a scheme on this component
+    if (props.themeModifier) {
+      return getMediaTheme(val, `@${props.themeModifier}`)
+    }
+
+    // CSS vars handle dark/light switching — no modifier needed, no DOMQL re-render
+    return getMediaTheme(val)
   },
 
   color: (val, element) => {

package/src/transform/index.js

@@ -1,3 +1,4 @@
 'use strict'
 
 export * from './executors'
+export * from './transformers'

package/dist/cjs/registry.js

@@ -1,39 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var registry_exports = {};
-__export(registry_exports, {
-  CSS_PREPROCS_DEFAULTS: () => CSS_PREPROCS_DEFAULTS,
-  CSS_PROPS_REGISTRY: () => CSS_PROPS_REGISTRY
-});
-module.exports = __toCommonJS(registry_exports);
-var import_utils = require("@domql/utils");
-var preprocs = __toESM(require("./props"), 1);
-var import_atoms = require("@symbo.ls/atoms");
-const CSS_PROPS_REGISTRY = (0, import_utils.mergeArray)([import_atoms.Text]).class;
-const CSS_PREPROCS_DEFAULTS = (0, import_utils.mergeArray)(Object.values(preprocs));

package/dist/esm/registry.js

@@ -1,9 +0,0 @@
-import { mergeArray } from "@domql/utils";
-import * as preprocs from "./props";
-import { Text } from "@symbo.ls/atoms";
-const CSS_PROPS_REGISTRY = mergeArray([Text]).class;
-const CSS_PREPROCS_DEFAULTS = mergeArray(Object.values(preprocs));
-export {
-  CSS_PREPROCS_DEFAULTS,
-  CSS_PROPS_REGISTRY
-};

package/src/registry.js

@@ -1,10 +0,0 @@
-'use strict'
-
-import { mergeArray } from '@domql/utils'
-import * as preprocs from './props'
-
-import { Text } from '@symbo.ls/atoms'
-
-// TODO: due to recent updates inherit from BOX instead
-export const CSS_PROPS_REGISTRY = mergeArray([Text]).class
-export const CSS_PREPROCS_DEFAULTS = mergeArray(Object.values(preprocs))