@weser/styling 0.0.12 → 0.0.13

package/dist/index.d.ts

@@ -5,5 +5,7 @@ export { default as prefixerPlugin, fallbacks as prefixerFallbacks, } from './pl
 export { default as debugPlugin } from './plugins/debug.js';
 export { default as enforceLonghandPlugin } from './plugins/enforceLonghand.js';
 export { default as sortPropertyPlugin } from './plugins/sortProperty.js';
+export { default as unitPlugin } from './plugins/unit.js';
+export { default as extendPlugin, T_ExtendStyle } from './plugins/extend.js';
 export { default as useCSSVariable } from './helpers/useCSSVariable.js';
 export { T_Fallback, T_Style } from './types.js';

package/dist/index.js

@@ -5,4 +5,6 @@ export { default as prefixerPlugin, fallbacks as prefixerFallbacks, } from './pl
 export { default as debugPlugin } from './plugins/debug.js';
 export { default as enforceLonghandPlugin } from './plugins/enforceLonghand.js';
 export { default as sortPropertyPlugin } from './plugins/sortProperty.js';
+export { default as unitPlugin } from './plugins/unit.js';
+export { default as extendPlugin } from './plugins/extend.js';
 export { default as useCSSVariable } from './helpers/useCSSVariable.js';

package/dist/plugins/extend.d.ts

@@ -0,0 +1,15 @@
+import { WithHooks } from '@css-hooks/core';
+type Extension<T, Hooks> = {
+    condition: boolean | undefined;
+    style: T_ExtendStyle<T, Hooks>;
+};
+export type T_ExtendStyle<T, Hooks> = WithHooks<keyof Hooks & string, T> & {
+    extend?: Extension<T, Hooks> | T_ExtendStyle<T, Hooks> | Array<Extension<T, Hooks>>;
+};
+type T_Extend = Record<string, any> & {
+    condition?: never;
+    style?: never;
+};
+export default function extendPlugin(): typeof extend;
+declare function extend<T extends T_Extend>(style: T): T;
+export {};

package/dist/plugins/extend.js

@@ -0,0 +1,59 @@
+import isPlainObject from 'isobject';
+import { assignStyle } from 'css-in-js-utils';
+export default function extendPlugin() {
+    return extend;
+}
+function extend(style) {
+    for (const property in style) {
+        const value = style[property];
+        if (property === 'extend') {
+            // @ts-ignore
+            const extensions = [].concat(value);
+            extensions.forEach((extension) => extendStyle(style, extension));
+            delete style[property];
+            // support nested extend as well
+        }
+        else if (isPlainObject(value)) {
+            // @ts-ignore
+            style[property] = extend(value);
+        }
+    }
+    return style;
+}
+function extendStyle(style, extension) {
+    // extend conditional style objects
+    if ('condition' in extension) {
+        if (extension.condition) {
+            assignStyle(style, extend(extension.style));
+        }
+    }
+    else {
+        // extend basic style objects
+        assignStyle(style, removeUndefined(extend(extension)));
+    }
+}
+function removeUndefined(style) {
+    for (const property in style) {
+        const value = style[property];
+        if (isPlainObject(value)) {
+            // @ts-ignore
+            style[property] = removeUndefined(value);
+        }
+        else if (Array.isArray(value)) {
+            style[property] = value.filter((item) => !isUndefinedValue(item));
+        }
+        else if (isUndefinedValue(value)) {
+            delete style[property];
+        }
+    }
+    return style;
+}
+const FALSY_REGEX = /undefined|null/;
+const URL_REGEX = /url/;
+function isUndefinedValue(value) {
+    return (value === undefined ||
+        value === null ||
+        (typeof value === 'string' &&
+            FALSY_REGEX.test(value) &&
+            !URL_REGEX.test(value)));
+}

package/dist/plugins/unit.d.ts

@@ -0,0 +1,4 @@
+import { T_RawStyle, T_Style } from '../types.js';
+type PropertyMap<T = T_RawStyle> = Partial<Record<keyof T, string>>;
+export default function unitPlugin<T = T_Style>(defaultUnit?: string, propertyMap?: PropertyMap, isUnitlessProperty?: (property: string) => boolean): (style: T) => T;
+export {};

package/dist/plugins/unit.js

@@ -0,0 +1,36 @@
+import { isUnitlessProperty as defaultIsUnitlessProperty } from 'css-in-js-utils';
+import isPlainObject from 'isobject';
+export default function unitPlugin(defaultUnit, propertyMap, isUnitlessProperty) {
+    return function unit(style) {
+        return addUnit(style, defaultUnit, propertyMap, isUnitlessProperty);
+    };
+}
+function addUnit(style, defaultUnit = 'px', propertyMap = {}, isUnitlessProperty = defaultIsUnitlessProperty) {
+    for (const property in style) {
+        if (!isUnitlessProperty(property)) {
+            const cssValue = style[property];
+            const propertyUnit = propertyMap[property] || defaultUnit;
+            if (isPlainObject(cssValue)) {
+                // @ts-ignore
+                style[property] = addUnit(cssValue, defaultUnit, propertyMap, isUnitlessProperty);
+            }
+            else if (Array.isArray(cssValue)) {
+                // @ts-ignore
+                style[property] = cssValue.map((val) => addUnitIfNeeded(val, propertyUnit));
+            }
+            else {
+                style[property] = addUnitIfNeeded(cssValue, propertyUnit);
+            }
+        }
+    }
+    return style;
+}
+function addUnitIfNeeded(value, propertyUnit) {
+    const valueType = typeof value;
+    if ((valueType === 'number' ||
+        (valueType === 'string' && value == parseFloat(value))) &&
+        value != 0) {
+        return value + propertyUnit;
+    }
+    return value;
+}

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/types.ts","../src/core/createrenderer.ts","../src/core/fallbackvalue.ts","../src/core/fallbackvalueplugin.ts","../src/core/getfallbackcss.ts","../src/core/getfallbackvariable.ts","../src/helpers/usecssvariable.ts","../src/modules/css-in-js-utils.d.ts","../src/modules/styles-debugger.d.ts","../src/plugins/debug.ts","../src/plugins/enforcelonghand.ts","../src/plugins/prefixer.ts","../src/plugins/responsivevalue.ts","../src/plugins/sortproperty.ts"],"version":"5.9.2"}
+{"root":["../src/index.ts","../src/types.ts","../src/core/createrenderer.ts","../src/core/fallbackvalue.ts","../src/core/fallbackvalueplugin.ts","../src/core/getfallbackcss.ts","../src/core/getfallbackvariable.ts","../src/helpers/usecssvariable.ts","../src/modules/css-in-js-utils.d.ts","../src/modules/styles-debugger.d.ts","../src/plugins/debug.ts","../src/plugins/enforcelonghand.ts","../src/plugins/extend.ts","../src/plugins/prefixer.ts","../src/plugins/responsivevalue.ts","../src/plugins/sortproperty.ts","../src/plugins/unit.ts"],"version":"5.9.2"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weser/styling",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Utils for styling with CSS hooks",
   "author": "Robin Weser <robin@weser.io>",
   "license": "MIT",
@@ -57,5 +57,5 @@
     "styles-debugger": "^1.0.0",
     "typescript": "^5.9.2"
   },
-  "gitHead": "8a4cafba91346a2a5bb4301317df661e176eb1d3"
+  "gitHead": "2e5430bd1d2f421a9ab85dff0918b89023f8039b"
 }