@weser/styling 0.0.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present Robin Weser
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# @weser/context
+
+<img alt="npm version" src="https://badge.fury.io/js/@weser%2Fcontext.svg"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/@weser/context.svg"> <a href="https://bundlephobia.com/result?p=@weser/context@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@weser/context.svg"></a>
+
+## Installation
+
+```sh
+# npm
+npm i --save @weser/context
+# yarn
+yarn add @weser/context
+# pnpm
+pnpm add @weser/context
+```
+
+## Documentation
+
+### `createContext<T>`
+
+#### Parameters
+
+| Parameter    | Type      | Default | Description                                              |
+| ------------ | --------- | ------- | -------------------------------------------------------- |
+| defaultValue | `T`       | `null`  | The default value for when no provider is used           |
+| name         |  `string` | `""`    | (Optional) A name for the context used in error messages |
+
+```tsx
+import { createContext } from '@weser/context'
+
+type Theme = 'light' | 'dark'
+
+const [useTheme, ThemeProvider] = createContext<Theme>('light', 'theme')
+
+function App({ children }) {
+  return <ThemeProvider value="dark">{children}</ThemeProvider>
+}
+
+function Component() {
+  const theme = useTheme()
+
+  return (
+    <div style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}>
+      Hello
+    </div>
+  )
+}
+```
+
+## License
+
+@weser/context is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
+Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
+Created with ♥ by [@robinweser](http://weser.io).

package/dist/core/createRenderer.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+import { createHooks as baseCreateHooks } from '@css-hooks/react';
+import { WithHooks } from '@css-hooks/core';
+import { assignStyle } from 'css-in-js-utils';
+import { T_Fallback } from '../types.js';
+type Plugin<T> = (style: T) => T;
+type HookOptions<Hooks extends string> = Parameters<typeof baseCreateHooks<Hooks>>[0];
+type Config<T, Hooks extends string> = {
+    hooks: HookOptions<Hooks>;
+    fallbacks?: Array<T_Fallback>;
+    plugins?: Array<Plugin<T>>;
+    mergeStyle?: typeof assignStyle;
+};
+type Properties<T, Hooks> = Array<Properties<T, Hooks>> | WithHooks<Hooks, T> | undefined;
+type CSSFunction<T, Hooks> = (...style: Array<Properties<T, Hooks>>) => CSSProperties;
+export default function createRenderer<Hooks extends Record<string, string>, T extends Record<string, any> = CSSProperties>({ hooks, fallbacks, plugins, mergeStyle, }: Config<T, keyof Hooks & string>): [
+    string,
+    CSSFunction<T, keyof Hooks & string>
+];
+export {};

package/dist/core/createRenderer.js

@@ -0,0 +1,22 @@
+import { createHooks as baseCreateHooks } from '@css-hooks/react';
+import { assignStyle } from 'css-in-js-utils';
+import fallbackValuePlugin from './fallbackValuePlugin.js';
+import getFallbackCSS from './getFallbackCSS.js';
+export default function createRenderer({ hooks, fallbacks = [], plugins = [], mergeStyle = assignStyle, }) {
+    if (fallbacks.length > 0) {
+        plugins.unshift(fallbackValuePlugin(fallbacks));
+    }
+    const fallbackCSS = getFallbackCSS(fallbacks);
+    const [baseCSS, fn] = baseCreateHooks(hooks);
+    const staticCSS = [baseCSS, fallbackCSS].join('');
+    function css(...style) {
+        // we ignore the "Type instantiation is excessively deep and possibly infinite."
+        // @ts-ignore
+        const flattened = style.flat(Infinity);
+        const filtered = flattened.filter(Boolean);
+        const merged = mergeStyle({}, ...filtered);
+        const processed = plugins.reduce((processed, plugin) => plugin(processed), merged);
+        return fn(processed);
+    }
+    return [staticCSS, css];
+}

package/dist/core/fallbackValue.d.ts

@@ -0,0 +1,6 @@
+import type { T_Fallback } from '../types.js';
+export default function fallbackValue(property: T_Fallback['property'], values: T_Fallback['values'], match?: T_Fallback['match']): {
+    property: string | string[];
+    values: string[];
+    match: string | undefined;
+};

package/dist/core/fallbackValue.js

@@ -0,0 +1,7 @@
+export default function fallbackValue(property, values, match) {
+    return {
+        property,
+        values,
+        match,
+    };
+}

package/dist/core/fallbackValuePlugin.d.ts

@@ -0,0 +1,2 @@
+import { T_Fallback } from '../types.js';
+export default function fallbackValuePlugin(fallbacks?: Array<T_Fallback>): <T extends Record<string, any>>(style: T) => T;

package/dist/core/fallbackValuePlugin.js

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import isPlainObject from 'isobject';
+import getFallbackVariable from './getFallbackVariable.js';
+export default function fallbackValuePlugin(fallbacks = []) {
+    const fallbackMap = fallbacks.reduce((map, { property, values, match }) => {
+        // use the last value as a default matcher if no match is provided
+        const actualMatch = match || values[values.length - 1];
+        [].concat(property).forEach((prop) => {
+            map[prop] = actualMatch;
+        });
+        return map;
+    }, {});
+    return function resolveFallbackValue(style) {
+        for (let property in style) {
+            const value = style[property];
+            if (isPlainObject(value)) {
+                style[property] = resolveFallbackValue(value);
+            }
+            else {
+                const fallback = fallbackMap[property];
+                if (fallback && fallback === value) {
+                    style[property] =
+                        'var(' + getFallbackVariable(property, fallback) + ')';
+                }
+            }
+        }
+        return style;
+    };
+}

package/dist/core/getFallbackCSS.d.ts

@@ -0,0 +1,2 @@
+import { T_Fallback } from '../types.js';
+export default function getFallbackCSS(fallbacks: Array<T_Fallback>): string;

package/dist/core/getFallbackCSS.js

@@ -0,0 +1,26 @@
+import { hyphenateProperty } from 'css-in-js-utils';
+import getFallbackVariable from './getFallbackVariable.js';
+export default function getFallbackCSS(fallbacks) {
+    const rootCSS = fallbacks.reduce((css, { property, values = [], match }) => {
+        // use the last value as a default matcher if no match is provided
+        const actualMatch = match || values[values.length - 1];
+        return (css +
+            []
+                // @ts-ignore
+                .concat(property)
+                .map((prop) => `${getFallbackVariable(prop, actualMatch)}:;`)
+                .join(''));
+    }, '');
+    const supportsCSS = fallbacks.map(({ property, values = [], match }) => {
+        // use the last value as a default matcher if no match is provided
+        const actualMatch = match || values[values.length - 1];
+        return values
+            .map((value) => []
+            // @ts-ignore
+            .concat(property)
+            .map((prop) => `@supports (${hyphenateProperty(prop)}:${value}){:root{${getFallbackVariable(prop, actualMatch)}:${value}}}`)
+            .join(''))
+            .join('');
+    });
+    return (rootCSS ? `:root {${rootCSS}}` : '') + supportsCSS.join('');
+}

package/dist/core/getFallbackVariable.d.ts

@@ -0,0 +1 @@
+export default function getFallbackVariable(property: string, value: string): string;

package/dist/core/getFallbackVariable.js

@@ -0,0 +1,3 @@
+export default function getFallbackVariable(property, value) {
+    return '--' + property + '-' + value;
+}

package/dist/helpers/useCSSVariable.d.ts

@@ -0,0 +1 @@
+export default function useCSSVariable(): [`--${string}`, string];

package/dist/helpers/useCSSVariable.js

@@ -0,0 +1,6 @@
+import { useId } from 'react';
+export default function useCSSVariable() {
+    const id = useId();
+    const name = id.replace(/:/g, '_');
+    return [`--${name}`, `var(--${name})`];
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as createRenderer } from './core/createRenderer.js';
+export { default as fallbackValue } from './core/fallbackValue.js';
+export { default as responsiveValuePlugin, T_ResponsiveStyle, } from './plugins/responsiveValue.js';
+export { default as prefixerPlugin, fallbacks as prefixerFallbacks, } from './plugins/prefixer.js';
+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 useCSSVariable } from './helpers/useCSSVariable.js';
+export { T_Fallback, T_Style } from './types.js';

package/dist/index.js

@@ -0,0 +1,8 @@
+export { default as createRenderer } from './core/createRenderer.js';
+export { default as fallbackValue } from './core/fallbackValue.js';
+export { default as responsiveValuePlugin, } from './plugins/responsiveValue.js';
+export { default as prefixerPlugin, fallbacks as prefixerFallbacks, } from './plugins/prefixer.js';
+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 useCSSVariable } from './helpers/useCSSVariable.js';

package/dist/modules/fela.d.ts

@@ -0,0 +1,126 @@
+declare module 'fela-plugin-bidi' {
+  import { T_Style } from '@weser/styling'
+
+  export default function bidi<T = T_Style>(
+    direction?: 'ltr' | 'rtl'
+  ): (style: T) => T
+}
+
+declare module 'fela-plugin-custom-property' {
+  import { T_Style } from '@weser/styling'
+
+  export default function customProperty<P extends Record<string, any>>(
+    properties: P
+  ): (
+    style: Partial<{
+      [Property in keyof P]: Parameters<P[Property]>[0]
+    }>
+  ) => T_Style
+}
+
+declare module 'fela-plugin-expand-shorthand' {
+  import { T_Style } from '@weser/styling'
+
+  export default function expandShorthand<T = T_Style>(): (style: T) => T
+}
+
+declare module 'fela-plugin-extend' {
+  import { T_Style } from '@weser/styling'
+  import { WithHooks } from '@css-hooks/core'
+
+  type Extension<T, Hooks> = {
+    condition: boolean | undefined
+    style: ExtendStyle<T, Hooks>
+  }
+
+  export type ExtendStyle<T, Hooks> = WithHooks<keyof Hooks, T> & {
+    extend?: Extension<T, Hooks> | Array<Extension<T, Hooks>>
+  }
+
+  export default function extend<Hooks, T = T_Style>(): (
+    style: ExtendStyle<T, Hooks>
+  ) => T_Style
+}
+
+declare module 'fela-plugin-hover-media' {
+  import { T_Style } from '@weser/styling'
+
+  export default function hoverMedia(): (style: T_Style) => T_Style
+}
+
+declare module 'fela-plugin-important' {
+  import { T_Style } from '@weser/styling'
+
+  export default function important(): (style: T_Style) => T_Style
+}
+
+declare module 'fela-plugin-isolation' {
+  import { T_RawStyle, T_Style } from '@weser/styling'
+
+  type Config = {
+    exclude: Array<keyof T_RawStyle>
+  }
+  export default function isolation<T = T_Style>(
+    config?: Config
+  ): (style: T) => T
+}
+
+declare module 'fela-plugin-kebab-case' {
+  import { T_Style } from '@weser/styling'
+
+  export default function kebabCase<T = T_Style>(): (style: T) => T
+}
+
+declare module 'fela-plugin-logger' {
+  import { T_Style } from '@weser/styling'
+
+  export default function logger<T = T_Style>(): (style: T) => T
+}
+
+declare module 'fela-plugin-rtl' {
+  import { T_Style } from '@weser/styling'
+
+  export default function rtl<T = T_Style>(
+    direction?: 'ltr' | 'rtl'
+  ): (style: T) => T
+}
+
+declare module 'fela-plugin-unit' {
+  import { T_RawStyle, T_Style } from '@weser/styling'
+
+  type Unit =
+    | 'ch'
+    | 'em'
+    | 'ex'
+    | 'rem'
+    | 'vh'
+    | 'vw'
+    | 'vmin'
+    | 'vmax'
+    | 'px'
+    | 'cm'
+    | 'mm'
+    | 'in'
+    | 'pc'
+    | 'pt'
+    | 'mozmm'
+
+  export default function unit<T = T_Style>(
+    unit?: Unit,
+    unitPerProperty?: { [P in keyof T_RawStyle]: Unit },
+    isUnitlessProperty?: (property: string) => boolean
+  ): (style: T) => T
+}
+
+declare module 'fela-plugin-validator' {
+  import { T_Style } from '@weser/styling'
+
+  type Config = {
+    logInvalid?: boolean
+    deleteInvalid?: boolean
+    useCSSLint?: boolean
+  }
+  export default function validator<T = T_Style>(
+    config?: Config
+  ): (style: T) => T
+}

package/dist/plugins/debug.d.ts

@@ -0,0 +1,5 @@
+import { Config } from 'styles-debugger';
+import { T_Style } from '../types.js';
+export default function debugPlugin<T = T_Style>(autoActive?: boolean, config?: Config): (style: T & {
+    debug?: boolean;
+}) => any;

package/dist/plugins/debug.js

@@ -0,0 +1,14 @@
+import { CreateStylesDebugger as createStylesDebugger, } from 'styles-debugger';
+export default function debugPlugin(autoActive = true, config = {}) {
+    const debugStyle = createStylesDebugger(config);
+    return function debug(style) {
+        if (autoActive || style?.debug) {
+            const { debug, ...rest } = style;
+            return {
+                ...rest,
+                ...debugStyle(),
+            };
+        }
+        return style;
+    };
+}

package/dist/plugins/enforceLonghand.d.ts

@@ -0,0 +1,4 @@
+import { T_Style } from '../types.js';
+type BorderMode = 'none' | 'longhand' | 'directional';
+export default function enforceLonghandPlugin<T extends Record<string, any> = T_Style>(borderMode?: BorderMode): (style: T) => T;
+export {};

package/dist/plugins/enforceLonghand.js

@@ -0,0 +1,107 @@
+import sortProperty from './sortProperty.js';
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function getPropertyPriority({ borderLonghand, borderDirectional, borderDirectionalLonghand, }) {
+    const propertyPriority = {
+        marginLeft: 2,
+        marginRight: 2,
+        marginTop: 2,
+        marginBottom: 2,
+        marginInline: 2,
+        marginBlock: 2,
+        marginInlineStart: 3,
+        marginInlineEnd: 3,
+        marginBlockStart: 3,
+        marginBlockEnd: 3,
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingBottom: 2,
+        paddingTop: 2,
+        paddingInline: 2,
+        paddingBlock: 2,
+        paddingInlineStart: 3,
+        paddingInlineEnd: 3,
+        paddingBlockStart: 3,
+        paddingBlockEnd: 3,
+        flexWrap: 2,
+        flexShrink: 2,
+        flexBasis: 2,
+        backgroundColor: 2,
+        backgroundRepeat: 2,
+        backgroundPosition: 2,
+        backgroundImage: 2,
+        backgroundOrigin: 2,
+        backgroundClip: 2,
+        backgroundSize: 2,
+        transitionProperty: 2,
+        transitionTimingFunction: 2,
+        transitionDuration: 2,
+        transitionDelay: 2,
+        animationDelay: 2,
+        animationDirection: 2,
+        animationDuration: 2,
+        animationFillMode: 2,
+        animationIterationCount: 2,
+        animationName: 2,
+        animationPlayState: 2,
+        animationTimingFunction: 2,
+        borderWidth: borderLonghand,
+        borderStyle: borderLonghand,
+        borderColor: borderLonghand,
+        // these conflict with the longhands above
+        borderTop: borderDirectional,
+        borderRight: borderDirectional,
+        borderBottom: borderDirectional,
+        borderLeft: borderDirectional,
+        borderTopWidth: borderDirectionalLonghand,
+        borderTopStyle: borderDirectionalLonghand,
+        borderTopColor: borderDirectionalLonghand,
+        borderRightWidth: borderDirectionalLonghand,
+        borderRightStyle: borderDirectionalLonghand,
+        borderRightColor: borderDirectionalLonghand,
+        borderBottomWidth: borderDirectionalLonghand,
+        borderBottomStyle: borderDirectionalLonghand,
+        borderBottomColor: borderDirectionalLonghand,
+        borderLeftWidth: borderDirectionalLonghand,
+        borderLeftStyle: borderDirectionalLonghand,
+        borderLeftColor: borderDirectionalLonghand,
+        borderBottomLeftRadius: 2,
+        borderBottomRightRadius: 2,
+        borderTopLeftRadius: 2,
+        borderTopRightRadius: 2,
+        borderImageOutset: 2,
+        borderImageRepeat: 2,
+        borderImageSlice: 2,
+        borderImageSource: 2,
+        borderImageWidth: 2,
+        columnWidth: 2,
+        columnCount: 2,
+        listStyleImage: 2,
+        listStylePosition: 2,
+        listStyleType: 2,
+        outlineWidth: 2,
+        outlineStyle: 2,
+        outlineColor: 2,
+        overflowX: 2,
+        overflowY: 2,
+        textDecorationLine: 2,
+        textDecorationStyle: 2,
+        textDecorationColor: 2,
+    };
+    // Add all possible vendor prefixes to all properties
+    // prefixerPlugin converts properties to prefixed ones like `WebkitBackgroundColor`
+    return Object.entries(propertyPriority).reduce((acc, [property, priority]) => {
+        // @ts-ignore
+        acc['Webkit' + capitalize(property)] = priority;
+        return acc;
+    }, propertyPriority);
+}
+export default function enforceLonghandPlugin(borderMode = 'none') {
+    const propertyPriority = getPropertyPriority({
+        borderDirectional: borderMode === 'directional' ? 3 : 2,
+        borderLonghand: borderMode === 'longhand' ? 3 : 2,
+        borderDirectionalLonghand: borderMode === 'none' ? 3 : 4,
+    });
+    return sortProperty(propertyPriority);
+}

package/dist/plugins/prefixer.d.ts

@@ -0,0 +1,3 @@
+import { T_Fallback, T_Style } from '../types.js';
+export default function prefixerPlugin<T = T_Style>(): (style: T) => {};
+export declare const fallbacks: Array<T_Fallback>;

package/dist/plugins/prefixer.js

@@ -0,0 +1,89 @@
+import isObject from 'isobject';
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+const w = 'Webkit';
+const m = 'Moz';
+const prefixes = {
+    textEmphasisPosition: w,
+    textEmphasis: w,
+    textEmphasisStyle: w,
+    textEmphasisColor: w,
+    boxDecorationBreak: w,
+    maskImage: w,
+    maskMode: w,
+    maskRepeat: w,
+    maskPosition: w,
+    maskClip: w,
+    maskOrigin: w,
+    maskSize: w,
+    maskComposite: w,
+    mask: w,
+    maskBorderSource: w,
+    maskBorderMode: w,
+    maskBorderSlice: w,
+    maskBorderWidth: w,
+    maskBorderOutset: w,
+    maskBorderRepeat: w,
+    maskBorder: w,
+    maskType: w,
+    appearance: w,
+    userSelect: w,
+    backdropFilter: w,
+    clipPath: w,
+    hyphens: w,
+    textOrientation: w,
+    tabSize: m,
+    fontKerning: w,
+    textSizeAdjust: w,
+    textDecorationStyle: w,
+    textDecorationSkip: w,
+    textDecorationLine: w,
+    textDecorationColor: w,
+};
+export default function prefixerPlugin() {
+    return function addVendorPrefixes(style) {
+        const prefixed = {};
+        for (const property in style) {
+            const value = style[property];
+            if (isObject(value)) {
+                // @ts-ignore
+                prefixed[property] = addVendorPrefixes(value);
+            }
+            else {
+                // @ts-ignore
+                if (prefixes[property]) {
+                    // @ts-ignore
+                    prefixed[prefixes[property] + capitalize(property)] = value;
+                }
+                // @ts-ignore
+                prefixed[property] = value;
+            }
+        }
+        return prefixed;
+    };
+}
+export const fallbacks = [
+    {
+        property: [
+            'width',
+            'minWidth',
+            'maxWidth',
+            'height',
+            'minHeight',
+            'maxHeight',
+        ],
+        values: ['-webkit-min-content', 'min-content'],
+    },
+    {
+        property: [
+            'width',
+            'minWidth',
+            'maxWidth',
+            'height',
+            'minHeight',
+            'maxHeight',
+        ],
+        values: ['-webkit-max-content', 'max-content'],
+    },
+];

package/dist/plugins/responsiveValue.d.ts

@@ -0,0 +1,7 @@
+import { T_Style } from '../types.js';
+type T_Responsive<T> = T | (T | undefined)[];
+export type T_ResponsiveStyle<T = T_Style> = {
+    [P in keyof T]: T_Responsive<T[P]>;
+};
+export default function responsiveValuePlugin<T = T_Style>(mediaQueries: Array<string>): (style: T) => T;
+export {};

package/dist/plugins/responsiveValue.js

@@ -0,0 +1,33 @@
+import isPlainObject from 'isobject';
+import { assignStyle } from 'css-in-js-utils';
+function resolveResponsiveValues(style, mediaQueries) {
+    for (const key in style) {
+        const property = key;
+        const value = style[property];
+        if (isPlainObject(value)) {
+            // @ts-ignore
+            style[property] = resolveResponsiveValues(value, mediaQueries);
+        }
+        if (Array.isArray(value)) {
+            const [defaultValue, ...mediaValues] = value;
+            // @ts-ignore
+            style[property] = defaultValue;
+            mediaQueries.slice(0, mediaValues.length).forEach((query, index) => {
+                if (mediaValues[index] !== null && mediaValues[index] !== undefined) {
+                    // @ts-ignore
+                    assignStyle(style, {
+                        [query]: {
+                            [property]: mediaValues[index],
+                        },
+                    });
+                }
+            });
+        }
+    }
+    return style;
+}
+export default function responsiveValuePlugin(mediaQueries) {
+    return function responsiveValue(style) {
+        return resolveResponsiveValues(style, mediaQueries);
+    };
+}

package/dist/plugins/sortProperty.d.ts

@@ -0,0 +1,5 @@
+import { T_Style } from '../types.js';
+export type PropertyPriority<T = T_Style> = {
+    [Property in keyof T]: number;
+};
+export default function sortPropertyPlugin<T extends Record<string, any> = T_Style>(propertyPriority: PropertyPriority<T>): (style: T) => T;

package/dist/plugins/sortProperty.js

@@ -0,0 +1,23 @@
+import isPlainObject from 'isobject';
+export default function sortPropertyPlugin(propertyPriority) {
+    function getPriority(property) {
+        return propertyPriority[property] || 0;
+    }
+    return function sortProperty(style) {
+        return Object.keys(style)
+            .sort((a, b) => getPriority(a) - getPriority(b))
+            .reduce((out, property) => {
+            const value = style[property];
+            if (isPlainObject(value)) {
+                return {
+                    ...out,
+                    [property]: sortProperty(value),
+                };
+            }
+            return {
+                ...out,
+                [property]: value,
+            };
+        }, {});
+    };
+}

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +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"}

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+export type T_Fallback = {
+    property: string | Array<string>;
+    values: Array<string>;
+    match?: string;
+};
+type T_VariableStyle = {
+    [key: `--${string}`]: string | number;
+};
+type T_RawStyle = CSSProperties;
+export type T_Style = T_RawStyle & T_VariableStyle;
+export {};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@weser/styling",
+  "version": "0.0.9",
+  "description": "Utils for styling with CSS hooks",
+  "author": "Robin Weser <robin@weser.io>",
+  "license": "MIT",
+  "homepage": "https://github.com/robinweser/weser.git",
+  "repository": "https://github.com/robinweser/weser.git",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist/**"
+  ],
+  "browserslist": [
+    "IE >= 11",
+    "Firefox >= 60",
+    "Safari >= 11.1",
+    "Chrome >= 66",
+    "ChromeAndroid >= 66",
+    "iOS >= 11.3",
+    "Edge >= 15"
+  ],
+  "scripts": {
+    "setup": "pnpm build",
+    "clean": "rimraf dist",
+    "build": "tsc -b",
+    "dev": "pnpm build -w",
+    "test": "echo 1"
+  },
+  "keywords": [],
+  "dependencies": {
+    "css-in-js-utils": "^3.1.0",
+    "isobject": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@css-hooks/core": "^1.0.0",
+    "@css-hooks/react": "^1.0.0"
+  },
+  "optionalDependencies": {
+    "styles-debugger": "^1.0.0"
+  },
+  "devDependencies": {
+    "@css-hooks/core": "1.8.2",
+    "@css-hooks/react": "1.8.2",
+    "@types/react": "18.2.55",
+    "ava": "^6.1.3",
+    "react": "^19.1.0",
+    "rimraf": "^3.0.2",
+    "styles-debugger": "^1.0.0",
+    "typescript": "^5.9.2"
+  },
+  "gitHead": "abbfb42cee4e8bdbbd870bd1086ebc65b6074584"
+}