ui-box - npm Package Compare versions

Comparing version 5.3.0 to 5.4.0

dist/src/enhance-props.js

@@ -23,3 +23,3 @@ "use strict";
     for (const [property, value] of propsMap) {
-        const isSelectorOrChildProp = property === SELECTORS_PROP || parentProperty === SELECTORS_PROP;
+        const isSelectorOrChildProp = property === SELECTORS_PROP || parentProperty.length > 0;
         if (isObject(value) && isSelectorOrChildProp) {
@@ -26,0 +26,0 @@ const prop = property === 'selectors' ? '' : property;

dist/src/enhancers/index.d.ts

@@ -17,3 +17,5 @@ import * as animation from './animation';
 import * as resize from './resize';
+import * as selectors from './selectors';
 import * as spacing from './spacing';
+import * as svg from './svg';
 import * as text from './text';
@@ -23,3 +25,3 @@ import * as transform from './transform';
 import { PropValidators, PropEnhancers, PropAliases, PropTypesMapping } from '../types/enhancers';
-export { animation, background, borderRadius, borders, boxShadow, dimensions, flex, grid, interaction, layout, list, opacity, outline, overflow, position, resize, spacing, text, transform, transition };
+export { animation, background, borderRadius, borders, boxShadow, dimensions, flex, grid, interaction, layout, list, opacity, outline, overflow, position, resize, selectors, spacing, svg, text, transform, transition };
 export declare const propTypes: PropTypesMapping;
@@ -26,0 +28,0 @@ export declare const propNames: string[];

dist/src/enhancers/index.js

@@ -42,4 +42,8 @@ "use strict";
 exports.resize = resize;
+const selectors = __importStar(require("./selectors"));
+exports.selectors = selectors;
 const spacing = __importStar(require("./spacing"));
 exports.spacing = spacing;
+const svg = __importStar(require("./svg"));
+exports.svg = svg;
 const text = __importStar(require("./text"));
@@ -51,6 +55,6 @@ exports.text = text;
 exports.transition = transition;
-exports.propTypes = Object.assign({}, animation.propTypes, background.propTypes, borderRadius.propTypes, borders.propTypes, boxShadow.propTypes, dimensions.propTypes, flex.propTypes, grid.propTypes, interaction.propTypes, layout.propTypes, list.propTypes, opacity.propTypes, outline.propTypes, overflow.propTypes, position.propTypes, resize.propTypes, spacing.propTypes, text.propTypes, transform.propTypes, transition.propTypes);
+exports.propTypes = Object.assign({}, animation.propTypes, background.propTypes, borderRadius.propTypes, borders.propTypes, boxShadow.propTypes, dimensions.propTypes, flex.propTypes, grid.propTypes, interaction.propTypes, layout.propTypes, list.propTypes, opacity.propTypes, outline.propTypes, overflow.propTypes, position.propTypes, resize.propTypes, selectors.propTypes, spacing.propTypes, svg.propTypes, text.propTypes, transform.propTypes, transition.propTypes);
 exports.propNames = Object.keys(exports.propTypes);
-exports.propAliases = Object.assign({}, animation.propAliases, background.propAliases, borderRadius.propAliases, borders.propAliases, boxShadow.propAliases, dimensions.propAliases, flex.propAliases, grid.propAliases, interaction.propAliases, layout.propAliases, list.propAliases, opacity.propAliases, outline.propAliases, overflow.propAliases, position.propAliases, resize.propAliases, spacing.propAliases, text.propAliases, transform.propAliases, transition.propAliases);
-exports.propValidators = Object.assign({}, animation.propValidators, background.propValidators, borderRadius.propValidators, borders.propValidators, boxShadow.propValidators, dimensions.propValidators, flex.propValidators, grid.propValidators, interaction.propValidators, layout.propValidators, list.propValidators, opacity.propValidators, outline.propValidators, overflow.propValidators, position.propValidators, resize.propValidators, spacing.propValidators, text.propValidators, transform.propValidators, transition.propValidators);
-exports.propEnhancers = Object.assign({}, animation.propEnhancers, background.propEnhancers, borderRadius.propEnhancers, borders.propEnhancers, boxShadow.propEnhancers, dimensions.propEnhancers, flex.propEnhancers, grid.propEnhancers, interaction.propEnhancers, layout.propEnhancers, list.propEnhancers, opacity.propEnhancers, outline.propEnhancers, overflow.propEnhancers, position.propEnhancers, resize.propEnhancers, spacing.propEnhancers, text.propEnhancers, transform.propEnhancers, transition.propEnhancers);
+exports.propAliases = Object.assign({}, animation.propAliases, background.propAliases, borderRadius.propAliases, borders.propAliases, boxShadow.propAliases, dimensions.propAliases, flex.propAliases, grid.propAliases, interaction.propAliases, layout.propAliases, list.propAliases, opacity.propAliases, outline.propAliases, overflow.propAliases, position.propAliases, resize.propAliases, selectors.propAliases, spacing.propAliases, svg.propAliases, text.propAliases, transform.propAliases, transition.propAliases);
+exports.propValidators = Object.assign({}, animation.propValidators, background.propValidators, borderRadius.propValidators, borders.propValidators, boxShadow.propValidators, dimensions.propValidators, flex.propValidators, grid.propValidators, interaction.propValidators, layout.propValidators, list.propValidators, opacity.propValidators, outline.propValidators, overflow.propValidators, position.propValidators, resize.propValidators, selectors.propValidators, spacing.propValidators, svg.propValidators, text.propValidators, transform.propValidators, transition.propValidators);
+exports.propEnhancers = Object.assign({}, animation.propEnhancers, background.propEnhancers, borderRadius.propEnhancers, borders.propEnhancers, boxShadow.propEnhancers, dimensions.propEnhancers, flex.propEnhancers, grid.propEnhancers, interaction.propEnhancers, layout.propEnhancers, list.propEnhancers, opacity.propEnhancers, outline.propEnhancers, overflow.propEnhancers, position.propEnhancers, resize.propEnhancers, selectors.propEnhancers, spacing.propEnhancers, svg.propEnhancers, text.propEnhancers, transform.propEnhancers, transition.propEnhancers);

dist/src/get-class-name.js

@@ -23,3 +23,3 @@ "use strict";
     }
-    else if (selector || complexValue || value.includes('calc(')) {
+    else if (complexValue || value.includes('calc(')) {
         valueKey = hash_1.default(value);
@@ -33,4 +33,7 @@ }
     }
+    if (selector) {
+        valueKey = `${valueKey}_${hash_1.default(selector)}`;
+    }
     return `${PREFIX}${className}_${valueKey}`;
 }
 exports.default = getClassName;

dist/src/get-css.js

@@ -32,3 +32,3 @@ "use strict";
         const rulesString = rules.map(rule => `${rule.property}:${rule.value}`).join(';');
-        styles = `.${className}${selector}{${rulesString}}`;
+        styles = `${expandSelectors(className, selector)}{${rulesString}}`;
     }
@@ -38,3 +38,3 @@ else {
         styles = `
-.${className}${selector} {
+${expandSelectors(className, selector)} {
 ${rulesString}
@@ -46,1 +46,10 @@ }`;
 exports.default = getCss;
+const expandSelectors = (className, selector) => {
+    if (!selector.includes(',')) {
+        return `.${className}${selector}`;
+    }
+    return selector
+        .split(',')
+        .map(selectorPart => `.${className}${selectorPart}`)
+        .join(', ');
+};

dist/src/index.d.ts

@@ -8,3 +8,4 @@ import * as cache from './cache';
 export { configureSafeHref } from './utils/safeHref';
-export { BoxProps, BoxOwnProps, EnhancerProps, PropsOf, PolymorphicBoxProps, BoxComponent } from './types/box-types';
+export { CssProps, BoxCssProps, EnhancerProps, SelectorMap } from './types/enhancers';
+export { BoxProps, BoxOwnProps, PropsOf, PolymorphicBoxProps, BoxComponent } from './types/box-types';
 export { KeyframesPercentageKey, KeyframesPositionalKey, KeyframesTimeline, KeyframesTimelineKey } from './types/keyframes';
@@ -11,0 +12,0 @@ export { background, borderRadius, borders, boxShadow, dimensions, flex, interaction, layout, list, opacity, overflow, position, spacing, text, transform, propTypes, propNames, propAliases, propEnhancers } from './enhancers/index';

dist/src/types/box-types.d.ts

 import React from 'react';
 import { EnhancerProps } from './enhancers';
-export { EnhancerProps };
 export declare type Without<T, K> = Pick<T, Exclude<keyof T, K>>;
@@ -5,0 +4,0 @@ export declare type PropsOf<E extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<E, React.ComponentPropsWithRef<E>>;

dist/src/types/enhancers.d.ts

 import PropTypes from 'prop-types';
 import * as CSS from 'csstype';
 import { Rule } from '../prefixer';
-export declare type CssProps = Pick<CSS.StandardProperties, 'alignContent' | 'alignItems' | 'alignSelf' | 'animation' | 'animationDelay' | 'animationDirection' | 'animationDuration' | 'animationFillMode' | 'animationIterationCount' | 'animationName' | 'animationPlayState' | 'animationTimingFunction' | 'background' | 'backgroundBlendMode' | 'backgroundClip' | 'backgroundColor' | 'backgroundImage' | 'backgroundOrigin' | 'backgroundPosition' | 'backgroundRepeat' | 'backgroundSize' | 'border' | 'borderBottom' | 'borderBottomColor' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'borderBottomStyle' | 'borderBottomWidth' | 'borderColor' | 'borderLeft' | 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth' | 'borderRadius' | 'borderRight' | 'borderRightColor' | 'borderRightStyle' | 'borderRightWidth' | 'borderStyle' | 'borderTop' | 'borderTopColor' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderTopStyle' | 'borderTopWidth' | 'borderWidth' | 'bottom' | 'boxShadow' | 'boxSizing' | 'clear' | 'color' | 'columnGap' | 'content' | 'cursor' | 'display' | 'flex' | 'flexBasis' | 'flexDirection' | 'flexFlow' | 'flexGrow' | 'flexShrink' | 'flexWrap' | 'float' | 'font' | 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontVariant' | 'fontWeight' | 'gap' | 'grid' | 'gridArea' | 'gridAutoColumns' | 'gridAutoFlow' | 'gridAutoRows' | 'gridColumn' | 'gridColumnEnd' | 'gridColumnStart' | 'gridRow' | 'gridRowEnd' | 'gridRowStart' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows' | 'height' | 'justifyContent' | 'justifyItems' | 'justifySelf' | 'left' | 'letterSpacing' | 'lineHeight' | 'listStyle' | 'listStyleImage' | 'listStylePosition' | 'listStyleType' | 'margin' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginTop' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'opacity' | 'order' | 'outline' | 'overflow' | 'overflowX' | 'overflowY' | 'padding' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'placeContent' | 'placeItems' | 'placeSelf' | 'pointerEvents' | 'position' | 'resize' | 'right' | 'rowGap' | 'textAlign' | 'textDecoration' | 'textOverflow' | 'textShadow' | 'textTransform' | 'top' | 'transform' | 'transformOrigin' | 'transition' | 'transitionDelay' | 'transitionDuration' | 'transitionProperty' | 'transitionTimingFunction' | 'userSelect' | 'verticalAlign' | 'visibility' | 'whiteSpace' | 'width' | 'wordBreak' | 'wordWrap' | 'zIndex'> & Pick<CSS.ObsoleteProperties, 'gridColumnGap' | 'gridGap' | 'gridRowGap'>;
+export declare type CssProps = Pick<CSS.StandardProperties, 'alignContent' | 'alignItems' | 'alignSelf' | 'animation' | 'animationDelay' | 'animationDirection' | 'animationDuration' | 'animationFillMode' | 'animationIterationCount' | 'animationName' | 'animationPlayState' | 'animationTimingFunction' | 'background' | 'backgroundBlendMode' | 'backgroundClip' | 'backgroundColor' | 'backgroundImage' | 'backgroundOrigin' | 'backgroundPosition' | 'backgroundRepeat' | 'backgroundSize' | 'border' | 'borderBottom' | 'borderBottomColor' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'borderBottomStyle' | 'borderBottomWidth' | 'borderColor' | 'borderLeft' | 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth' | 'borderRadius' | 'borderRight' | 'borderRightColor' | 'borderRightStyle' | 'borderRightWidth' | 'borderStyle' | 'borderTop' | 'borderTopColor' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderTopStyle' | 'borderTopWidth' | 'borderWidth' | 'bottom' | 'boxShadow' | 'boxSizing' | 'clear' | 'color' | 'columnGap' | 'content' | 'cursor' | 'display' | 'flex' | 'flexBasis' | 'flexDirection' | 'flexFlow' | 'flexGrow' | 'flexShrink' | 'flexWrap' | 'float' | 'font' | 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontVariant' | 'fontWeight' | 'gap' | 'grid' | 'gridArea' | 'gridAutoColumns' | 'gridAutoFlow' | 'gridAutoRows' | 'gridColumn' | 'gridColumnEnd' | 'gridColumnStart' | 'gridRow' | 'gridRowEnd' | 'gridRowStart' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows' | 'height' | 'justifyContent' | 'justifyItems' | 'justifySelf' | 'left' | 'letterSpacing' | 'lineHeight' | 'listStyle' | 'listStyleImage' | 'listStylePosition' | 'listStyleType' | 'margin' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginTop' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'opacity' | 'order' | 'outline' | 'overflow' | 'overflowX' | 'overflowY' | 'padding' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'placeContent' | 'placeItems' | 'placeSelf' | 'pointerEvents' | 'position' | 'resize' | 'right' | 'rowGap' | 'textAlign' | 'textDecoration' | 'textOverflow' | 'textShadow' | 'textTransform' | 'top' | 'transform' | 'transformOrigin' | 'transition' | 'transitionDelay' | 'transitionDuration' | 'transitionProperty' | 'transitionTimingFunction' | 'userSelect' | 'verticalAlign' | 'visibility' | 'whiteSpace' | 'width' | 'wordBreak' | 'wordWrap' | 'zIndex'> & Pick<CSS.ObsoleteProperties, 'gridColumnGap' | 'gridGap' | 'gridRowGap'> & Pick<CSS.SvgProperties, 'fill' | 'stroke' | 'strokeDasharray' | 'strokeDashoffset' | 'strokeLinecap' | 'strokeMiterlimit' | 'strokeWidth'>;
 export declare type BoxCssProps<CP> = {
@@ -15,6 +15,7 @@ [P in keyof CP]: CP[P] | number | false | null | undefined;
     clearfix?: boolean;
-    selectors?: {
-        [selector: string]: BoxCssProps<CssProps>;
-    };
+    selectors?: SelectorMap;
 };
+export declare type SelectorMap = {
+    [selector: string]: BoxCssProps<CssProps> | SelectorMap;
+};
 export declare type PropEnhancerValueType = string | number;
@@ -21,0 +22,0 @@ export interface PropTypesMapping {

package.json

 {
   "name": "ui-box",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Blazing Fast React UI Primitive",
@@ -5,0 +5,0 @@ "contributors": [

README.md

@@ -148,2 +148,3 @@ <div align="center">
 - `display`
+- `fill`
 - `flex`
@@ -225,2 +226,8 @@ - `flexBasis`
 - `rowGap`
+- `stroke`
+- `strokeDasharray`
+- `strokeDashoffset`
+- `strokeLinecap`
+- `strokeMiterlimit`
+- `strokeWidth`
 - `textAlign`
@@ -347,2 +354,3 @@ - `textDecoration`
 - `spacing`
+- `svg`
 - `text`
@@ -349,0 +357,0 @@ - `transform`

No alert changes

Improved metrics

Total package byte prevSize

124043

increased by3.81%

Number of package files

95

increased by4.4%

Lines of code

2650

increased by3.76%

Number of lines in readme file

447

increased by1.82%

No dependency changes