ui-box - npm Package Compare versions

Comparing version 5.1.0 to 5.2.0

dist/src/box.js

@@ -11,9 +11,2 @@ "use strict";
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -23,3 +16,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
@@ -29,3 +22,3 @@ const enhancers_1 = require("./enhancers");
 const safeHref_1 = require("./utils/safeHref");
-const Box = react_1.forwardRef((_a, ref) => {
+const Box = react_1.default.forwardRef((_a, ref) => {
     var { is, children, allowUnsafeHref } = _a, props = __rest(_a, ["is", "children", "allowUnsafeHref"]);
@@ -32,0 +25,0 @@ const { className, enhancedProps: parsedProps } = enhance_props_1.default(props);

dist/src/cache.d.ts

 import { BoxPropValue } from './types/enhancers';
 declare type CacheValue = BoxPropValue;
-export declare function get(property: string, value: CacheValue): string | undefined;
-export declare function set(property: string, value: CacheValue | object, className: string): void;
+export declare function get(property: string, value: CacheValue, selectorHead?: string): string | undefined;
+export declare function set(property: string, value: CacheValue | object, className: string, selectorHead?: string): void;
 export declare function entries(): [string, string][];
@@ -6,0 +6,0 @@ declare type CacheEntry = [string, string];

dist/src/cache.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 let cache = new Map();
-function get(property, value) {
-    return cache.get(property + value);
+function get(property, value, selectorHead = '') {
+    return cache.get(selectorHead + property + value);
 }
 exports.get = get;
-function set(property, value, className) {
+function set(property, value, className, selectorHead = '') {
     if (process.env.NODE_ENV !== 'production') {
@@ -18,3 +18,3 @@ const valueType = typeof value;
     }
-    cache.set(property + value, className);
+    cache.set(selectorHead + property + value, className);
 }
@@ -21,0 +21,0 @@ exports.set = set;

dist/src/enhance-props.d.ts

@@ -9,3 +9,3 @@ /// <reference types="react" />
 }
-export default function enhanceProps(rawProps: EnhancerProps & React.ComponentPropsWithoutRef<any>): EnhancedPropsResult;
+export default function enhanceProps(props: EnhancerProps & React.ComponentPropsWithoutRef<any>, selectorHead?: string): EnhancedPropsResult;
 export {};

dist/src/enhance-props.js

@@ -17,25 +17,33 @@ "use strict";
 const styles = __importStar(require("./styles"));
-function enhanceProps(rawProps) {
-    const propsMap = expand_aliases_1.default(rawProps);
+function noAnd(s) {
+    return s.replace(/&/g, '');
+}
+function enhanceProps(props, selectorHead = '') {
+    const propsMap = expand_aliases_1.default(props);
     const preservedProps = {};
-    let className = rawProps.className || '';
-    for (const [propName, propValue] of propsMap) {
-        const cachedClassName = cache.get(propName, propValue);
-        if (cachedClassName) {
-            className = `${className} ${cachedClassName}`;
+    let className = props.className || '';
+    for (const [property, value] of propsMap) {
+        if (value && typeof value === 'object') {
+            const prop = property === 'selectors' ? '' : property;
+            const parsed = enhanceProps(value, noAnd(selectorHead + prop));
+            className = `${className} ${parsed.className}`;
             continue;
         }
-        const enhancer = enhancers_1.propEnhancers[propName];
-        if (enhancer &&
-            (propValue === null || propValue === undefined || propValue === false)) {
+        const enhancer = enhancers_1.propEnhancers[property];
+        if (!enhancer) {
+            preservedProps[property] = value;
             continue;
         }
-        else if (!enhancer) {
-            preservedProps[propName] = propValue;
+        if (value === null || value === undefined || value === false) {
             continue;
         }
-        const newCss = enhancer(propValue);
+        const cachedClassName = cache.get(property, value, selectorHead);
+        if (cachedClassName) {
+            className = `${className} ${cachedClassName}`;
+            continue;
+        }
+        const newCss = enhancer(value, selectorHead);
         if (newCss) {
             styles.add(newCss.styles);
-            cache.set(propName, propValue, newCss.className);
+            cache.set(property, value, newCss.className, selectorHead);
             className = `${className} ${newCss.className}`;
@@ -42,0 +50,0 @@ }

dist/src/enhancers/background.js

@@ -71,11 +71,11 @@ "use strict";
 exports.propEnhancers = {
-    background: (value) => get_css_1.default(background, value),
-    backgroundBlendMode: (value) => get_css_1.default(backgroundBlendMode, value),
-    backgroundClip: (value) => get_css_1.default(backgroundClip, value),
-    backgroundColor: (value) => get_css_1.default(backgroundColor, value),
-    backgroundImage: (value) => get_css_1.default(backgroundImage, value),
-    backgroundOrigin: (value) => get_css_1.default(backgroundOrigin, value),
-    backgroundPosition: (value) => get_css_1.default(backgroundPosition, value),
-    backgroundRepeat: (value) => get_css_1.default(backgroundRepeat, value),
-    backgroundSize: (value) => get_css_1.default(backgroundSize, value)
+    background: (value, selector) => get_css_1.default(background, value, selector),
+    backgroundBlendMode: (value, selector) => get_css_1.default(backgroundBlendMode, value, selector),
+    backgroundClip: (value, selector) => get_css_1.default(backgroundClip, value, selector),
+    backgroundColor: (value, selector) => get_css_1.default(backgroundColor, value, selector),
+    backgroundImage: (value, selector) => get_css_1.default(backgroundImage, value, selector),
+    backgroundOrigin: (value, selector) => get_css_1.default(backgroundOrigin, value, selector),
+    backgroundPosition: (value, selector) => get_css_1.default(backgroundPosition, value, selector),
+    backgroundRepeat: (value, selector) => get_css_1.default(backgroundRepeat, value, selector),
+    backgroundSize: (value, selector) => get_css_1.default(backgroundSize, value, selector)
 };

dist/src/enhancers/border-radius.js

@@ -66,6 +66,6 @@ "use strict";
 exports.propEnhancers = {
-    borderBottomLeftRadius: (value) => get_css_1.default(borderBottomLeftRadius, value),
-    borderBottomRightRadius: (value) => get_css_1.default(borderBottomRightRadius, value),
-    borderTopLeftRadius: (value) => get_css_1.default(borderTopLeftRadius, value),
-    borderTopRightRadius: (value) => get_css_1.default(borderTopRightRadius, value)
+    borderBottomLeftRadius: (value, selector) => get_css_1.default(borderBottomLeftRadius, value, selector),
+    borderBottomRightRadius: (value, selector) => get_css_1.default(borderBottomRightRadius, value, selector),
+    borderTopLeftRadius: (value, selector) => get_css_1.default(borderTopLeftRadius, value, selector),
+    borderTopRightRadius: (value, selector) => get_css_1.default(borderTopRightRadius, value, selector)
 };

dist/src/enhancers/borders.js

@@ -158,18 +158,18 @@ "use strict";
 exports.propEnhancers = {
-    borderBottom: (value) => get_css_1.default(borderBottom, value),
-    borderBottomColor: (value) => get_css_1.default(borderBottomColor, value),
-    borderBottomStyle: (value) => get_css_1.default(borderBottomStyle, value),
-    borderBottomWidth: (value) => get_css_1.default(borderBottomWidth, value),
-    borderLeft: (value) => get_css_1.default(borderLeft, value),
-    borderLeftColor: (value) => get_css_1.default(borderLeftColor, value),
-    borderLeftStyle: (value) => get_css_1.default(borderLeftStyle, value),
-    borderLeftWidth: (value) => get_css_1.default(borderLeftWidth, value),
-    borderRight: (value) => get_css_1.default(borderRight, value),
-    borderRightColor: (value) => get_css_1.default(borderRightColor, value),
-    borderRightStyle: (value) => get_css_1.default(borderRightStyle, value),
-    borderRightWidth: (value) => get_css_1.default(borderRightWidth, value),
-    borderTop: (value) => get_css_1.default(borderTop, value),
-    borderTopColor: (value) => get_css_1.default(borderTopColor, value),
-    borderTopStyle: (value) => get_css_1.default(borderTopStyle, value),
-    borderTopWidth: (value) => get_css_1.default(borderTopWidth, value)
+    borderBottom: (value, selector) => get_css_1.default(borderBottom, value, selector),
+    borderBottomColor: (value, selector) => get_css_1.default(borderBottomColor, value, selector),
+    borderBottomStyle: (value, selector) => get_css_1.default(borderBottomStyle, value, selector),
+    borderBottomWidth: (value, selector) => get_css_1.default(borderBottomWidth, value, selector),
+    borderLeft: (value, selector) => get_css_1.default(borderLeft, value, selector),
+    borderLeftColor: (value, selector) => get_css_1.default(borderLeftColor, value, selector),
+    borderLeftStyle: (value, selector) => get_css_1.default(borderLeftStyle, value, selector),
+    borderLeftWidth: (value, selector) => get_css_1.default(borderLeftWidth, value, selector),
+    borderRight: (value, selector) => get_css_1.default(borderRight, value, selector),
+    borderRightColor: (value, selector) => get_css_1.default(borderRightColor, value, selector),
+    borderRightStyle: (value, selector) => get_css_1.default(borderRightStyle, value, selector),
+    borderRightWidth: (value, selector) => get_css_1.default(borderRightWidth, value, selector),
+    borderTop: (value, selector) => get_css_1.default(borderTop, value, selector),
+    borderTopColor: (value, selector) => get_css_1.default(borderTopColor, value, selector),
+    borderTopStyle: (value, selector) => get_css_1.default(borderTopStyle, value, selector),
+    borderTopWidth: (value, selector) => get_css_1.default(borderTopWidth, value, selector)
 };

dist/src/enhancers/box-shadow.js

@@ -20,3 +20,3 @@ "use strict";
 exports.propEnhancers = {
-    boxShadow: (value) => get_css_1.default(boxShadow, value)
+    boxShadow: (value, selector) => get_css_1.default(boxShadow, value, selector)
 };

dist/src/enhancers/dimensions.js

@@ -49,8 +49,8 @@ "use strict";
 exports.propEnhancers = {
-    height: (value) => get_css_1.default(height, value),
-    maxHeight: (value) => get_css_1.default(maxHeight, value),
-    maxWidth: (value) => get_css_1.default(maxWidth, value),
-    minHeight: (value) => get_css_1.default(minHeight, value),
-    minWidth: (value) => get_css_1.default(minWidth, value),
-    width: (value) => get_css_1.default(width, value)
+    height: (value, selector) => get_css_1.default(height, value, selector),
+    maxHeight: (value, selector) => get_css_1.default(maxHeight, value, selector),
+    maxWidth: (value, selector) => get_css_1.default(maxWidth, value, selector),
+    minHeight: (value, selector) => get_css_1.default(minHeight, value, selector),
+    minWidth: (value, selector) => get_css_1.default(minWidth, value, selector),
+    width: (value, selector) => get_css_1.default(width, value, selector)
 };

dist/src/enhancers/flex.js

@@ -137,19 +137,19 @@ "use strict";
 exports.propEnhancers = {
-    alignContent: (value) => get_css_1.default(alignContent, value),
-    alignItems: (value) => get_css_1.default(alignItems, value),
-    alignSelf: (value) => get_css_1.default(alignSelf, value),
-    flex: (value) => get_css_1.default(flex, value),
-    flexBasis: (value) => get_css_1.default(flexBasis, value),
-    flexDirection: (value) => get_css_1.default(flexDirection, value),
-    flexFlow: (value) => get_css_1.default(flexFlow, value),
-    flexGrow: (value) => get_css_1.default(flexGrow, value),
-    flexShrink: (value) => get_css_1.default(flexShrink, value),
-    flexWrap: (value) => get_css_1.default(flexWrap, value),
-    justifyContent: (value) => get_css_1.default(justifyContent, value),
-    justifyItems: (value) => get_css_1.default(justifyItems, value),
-    justifySelf: (value) => get_css_1.default(justifySelf, value),
-    order: (value) => get_css_1.default(order, value),
-    placeContent: (value) => get_css_1.default(placeContent, value),
-    placeItems: (value) => get_css_1.default(placeItems, value),
-    placeSelf: (value) => get_css_1.default(placeSelf, value)
+    alignContent: (value, selector) => get_css_1.default(alignContent, value, selector),
+    alignItems: (value, selector) => get_css_1.default(alignItems, value, selector),
+    alignSelf: (value, selector) => get_css_1.default(alignSelf, value, selector),
+    flex: (value, selector) => get_css_1.default(flex, value, selector),
+    flexBasis: (value, selector) => get_css_1.default(flexBasis, value, selector),
+    flexDirection: (value, selector) => get_css_1.default(flexDirection, value, selector),
+    flexFlow: (value, selector) => get_css_1.default(flexFlow, value, selector),
+    flexGrow: (value, selector) => get_css_1.default(flexGrow, value, selector),
+    flexShrink: (value, selector) => get_css_1.default(flexShrink, value, selector),
+    flexWrap: (value, selector) => get_css_1.default(flexWrap, value, selector),
+    justifyContent: (value, selector) => get_css_1.default(justifyContent, value, selector),
+    justifyItems: (value, selector) => get_css_1.default(justifyItems, value, selector),
+    justifySelf: (value, selector) => get_css_1.default(justifySelf, value, selector),
+    order: (value, selector) => get_css_1.default(order, value, selector),
+    placeContent: (value, selector) => get_css_1.default(placeContent, value, selector),
+    placeItems: (value, selector) => get_css_1.default(placeItems, value, selector),
+    placeSelf: (value, selector) => get_css_1.default(placeSelf, value, selector)
 };

dist/src/enhancers/grid.js

@@ -155,23 +155,23 @@ "use strict";
 exports.propEnhancers = {
-    columnGap: (value) => get_css_1.default(columnGap, value),
-    gap: (value) => get_css_1.default(gap, value),
-    grid: (value) => get_css_1.default(grid, value),
-    gridArea: (value) => get_css_1.default(gridArea, value),
-    gridAutoColumns: (value) => get_css_1.default(gridAutoColumns, value),
-    gridAutoFlow: (value) => get_css_1.default(gridAutoFlow, value),
-    gridAutoRows: (value) => get_css_1.default(gridAutoRows, value),
-    gridColumn: (value) => get_css_1.default(gridColumn, value),
-    gridColumnEnd: (value) => get_css_1.default(gridColumnEnd, value),
-    gridColumnGap: (value) => get_css_1.default(gridColumnGap, value),
-    gridColumnStart: (value) => get_css_1.default(gridColumnStart, value),
-    gridGap: (value) => get_css_1.default(gridGap, value),
-    gridRow: (value) => get_css_1.default(gridRow, value),
-    gridRowEnd: (value) => get_css_1.default(gridRowEnd, value),
-    gridRowGap: (value) => get_css_1.default(gridRowGap, value),
-    gridRowStart: (value) => get_css_1.default(gridRowStart, value),
-    gridTemplate: (value) => get_css_1.default(gridTemplate, value),
-    gridTemplateAreas: (value) => get_css_1.default(gridTemplateAreas, value),
-    gridTemplateColumns: (value) => get_css_1.default(gridTemplateColumns, value),
-    gridTemplateRows: (value) => get_css_1.default(gridTemplateRows, value),
-    rowGap: (value) => get_css_1.default(rowGap, value)
+    columnGap: (value, selector) => get_css_1.default(columnGap, value, selector),
+    gap: (value, selector) => get_css_1.default(gap, value, selector),
+    grid: (value, selector) => get_css_1.default(grid, value, selector),
+    gridArea: (value, selector) => get_css_1.default(gridArea, value, selector),
+    gridAutoColumns: (value, selector) => get_css_1.default(gridAutoColumns, value, selector),
+    gridAutoFlow: (value, selector) => get_css_1.default(gridAutoFlow, value, selector),
+    gridAutoRows: (value, selector) => get_css_1.default(gridAutoRows, value, selector),
+    gridColumn: (value, selector) => get_css_1.default(gridColumn, value, selector),
+    gridColumnEnd: (value, selector) => get_css_1.default(gridColumnEnd, value, selector),
+    gridColumnGap: (value, selector) => get_css_1.default(gridColumnGap, value, selector),
+    gridColumnStart: (value, selector) => get_css_1.default(gridColumnStart, value, selector),
+    gridGap: (value, selector) => get_css_1.default(gridGap, value, selector),
+    gridRow: (value, selector) => get_css_1.default(gridRow, value, selector),
+    gridRowEnd: (value, selector) => get_css_1.default(gridRowEnd, value, selector),
+    gridRowGap: (value, selector) => get_css_1.default(gridRowGap, value, selector),
+    gridRowStart: (value, selector) => get_css_1.default(gridRowStart, value, selector),
+    gridTemplate: (value, selector) => get_css_1.default(gridTemplate, value, selector),
+    gridTemplateAreas: (value, selector) => get_css_1.default(gridTemplateAreas, value, selector),
+    gridTemplateColumns: (value, selector) => get_css_1.default(gridTemplateColumns, value, selector),
+    gridTemplateRows: (value, selector) => get_css_1.default(gridTemplateRows, value, selector),
+    rowGap: (value, selector) => get_css_1.default(rowGap, value, selector)
 };

dist/src/enhancers/interaction.js

@@ -41,6 +41,6 @@ "use strict";
 exports.propEnhancers = {
-    cursor: (value) => get_css_1.default(cursor, value),
-    pointerEvents: (value) => get_css_1.default(pointerEvents, value),
-    userSelect: (value) => get_css_1.default(userSelect, value),
-    visibility: (value) => get_css_1.default(visibility, value)
+    cursor: (value, selector) => get_css_1.default(cursor, value, selector),
+    pointerEvents: (value, selector) => get_css_1.default(pointerEvents, value, selector),
+    userSelect: (value, selector) => get_css_1.default(userSelect, value, selector),
+    visibility: (value, selector) => get_css_1.default(visibility, value, selector)
 };

dist/src/enhancers/layout.js

@@ -52,4 +52,4 @@ "use strict";
 exports.propEnhancers = {
-    boxSizing: (value) => get_css_1.default(boxSizing, value),
-    clear: (value) => get_css_1.default(clear, value),
+    boxSizing: (value, selector) => get_css_1.default(boxSizing, value, selector),
+    clear: (value, selector) => get_css_1.default(clear, value, selector),
     clearfix: () => ({
@@ -64,5 +64,5 @@ className: `${get_class_name_1.getClassNamePrefix()}clearfix`,
     }),
-    display: (value) => get_css_1.default(display, value),
-    float: (value) => get_css_1.default(float, value),
-    zIndex: (value) => get_css_1.default(zIndex, value)
+    display: (value, selector) => get_css_1.default(display, value, selector),
+    float: (value, selector) => get_css_1.default(float, value, selector),
+    zIndex: (value, selector) => get_css_1.default(zIndex, value, selector)
 };

dist/src/enhancers/list.js

@@ -40,6 +40,6 @@ "use strict";
 exports.propEnhancers = {
-    listStyle: (value) => get_css_1.default(listStyle, value),
-    listStyleType: (value) => get_css_1.default(listStyleType, value),
-    listStyleImage: (value) => get_css_1.default(listStyleImage, value),
-    listStylePosition: (value) => get_css_1.default(listStylePosition, value)
+    listStyle: (value, selector) => get_css_1.default(listStyle, value, selector),
+    listStyleType: (value, selector) => get_css_1.default(listStyleType, value, selector),
+    listStyleImage: (value, selector) => get_css_1.default(listStyleImage, value, selector),
+    listStylePosition: (value, selector) => get_css_1.default(listStylePosition, value, selector)
 };

dist/src/enhancers/opacity.js

@@ -20,3 +20,3 @@ "use strict";
 exports.propEnhancers = {
-    opacity: (value) => get_css_1.default(opacity, value)
+    opacity: (value, selector) => get_css_1.default(opacity, value, selector)
 };

dist/src/enhancers/outline.js

@@ -20,3 +20,3 @@ "use strict";
 exports.propEnhancers = {
-    outline: (value) => get_css_1.default(outline, value)
+    outline: (value, selector) => get_css_1.default(outline, value, selector)
 };

dist/src/enhancers/overflow.js

@@ -30,4 +30,4 @@ "use strict";
 exports.propEnhancers = {
-    overflowX: (value) => get_css_1.default(overflowX, value),
-    overflowY: (value) => get_css_1.default(overflowY, value)
+    overflowX: (value, selector) => get_css_1.default(overflowX, value, selector),
+    overflowY: (value, selector) => get_css_1.default(overflowY, value, selector)
 };

dist/src/enhancers/position.js

@@ -45,7 +45,7 @@ "use strict";
 exports.propEnhancers = {
-    bottom: (value) => get_css_1.default(bottom, value),
-    left: (value) => get_css_1.default(left, value),
-    position: (value) => get_css_1.default(position, value),
-    right: (value) => get_css_1.default(right, value),
-    top: (value) => get_css_1.default(top, value)
+    bottom: (value, selector) => get_css_1.default(bottom, value, selector),
+    left: (value, selector) => get_css_1.default(left, value, selector),
+    position: (value, selector) => get_css_1.default(position, value, selector),
+    right: (value, selector) => get_css_1.default(right, value, selector),
+    top: (value, selector) => get_css_1.default(top, value, selector)
 };

dist/src/enhancers/resize.js

@@ -19,3 +19,3 @@ "use strict";
 exports.propEnhancers = {
-    resize: (value) => get_css_1.default(resize, value)
+    resize: (value, selector) => get_css_1.default(resize, value, selector)
 };

dist/src/enhancers/spacing.js

@@ -113,10 +113,10 @@ "use strict";
 exports.propEnhancers = {
-    marginBottom: (value) => get_css_1.default(marginBottom, value),
-    marginLeft: (value) => get_css_1.default(marginLeft, value),
-    marginRight: (value) => get_css_1.default(marginRight, value),
-    marginTop: (value) => get_css_1.default(marginTop, value),
-    paddingBottom: (value) => get_css_1.default(paddingBottom, value),
-    paddingLeft: (value) => get_css_1.default(paddingLeft, value),
-    paddingRight: (value) => get_css_1.default(paddingRight, value),
-    paddingTop: (value) => get_css_1.default(paddingTop, value)
+    marginBottom: (value, selector) => get_css_1.default(marginBottom, value, selector),
+    marginLeft: (value, selector) => get_css_1.default(marginLeft, value, selector),
+    marginRight: (value, selector) => get_css_1.default(marginRight, value, selector),
+    marginTop: (value, selector) => get_css_1.default(marginTop, value, selector),
+    paddingBottom: (value, selector) => get_css_1.default(paddingBottom, value, selector),
+    paddingLeft: (value, selector) => get_css_1.default(paddingLeft, value, selector),
+    paddingRight: (value, selector) => get_css_1.default(paddingRight, value, selector),
+    paddingTop: (value, selector) => get_css_1.default(paddingTop, value, selector)
 };

dist/src/enhancers/text.js

@@ -135,20 +135,20 @@ "use strict";
 exports.propEnhancers = {
-    color: (value) => get_css_1.default(color, value),
-    font: (value) => get_css_1.default(font, value),
-    fontFamily: (value) => get_css_1.default(fontFamily, value),
-    fontSize: (value) => get_css_1.default(fontSize, value),
-    fontStyle: (value) => get_css_1.default(fontStyle, value),
-    fontVariant: (value) => get_css_1.default(fontVariant, value),
-    fontWeight: (value) => get_css_1.default(fontWeight, value),
-    letterSpacing: (value) => get_css_1.default(letterSpacing, value),
-    lineHeight: (value) => get_css_1.default(lineHeight, value),
-    textAlign: (value) => get_css_1.default(textAlign, value),
-    textDecoration: (value) => get_css_1.default(textDecoration, value),
-    textOverflow: (value) => get_css_1.default(textOverflow, value),
-    textShadow: (value) => get_css_1.default(textShadow, value),
-    textTransform: (value) => get_css_1.default(textTransform, value),
-    verticalAlign: (value) => get_css_1.default(verticalAlign, value),
-    whiteSpace: (value) => get_css_1.default(whiteSpace, value),
-    wordBreak: (value) => get_css_1.default(wordBreak, value),
-    wordWrap: (value) => get_css_1.default(wordWrap, value)
+    color: (value, selector) => get_css_1.default(color, value, selector),
+    font: (value, selector) => get_css_1.default(font, value, selector),
+    fontFamily: (value, selector) => get_css_1.default(fontFamily, value, selector),
+    fontSize: (value, selector) => get_css_1.default(fontSize, value, selector),
+    fontStyle: (value, selector) => get_css_1.default(fontStyle, value, selector),
+    fontVariant: (value, selector) => get_css_1.default(fontVariant, value, selector),
+    fontWeight: (value, selector) => get_css_1.default(fontWeight, value, selector),
+    letterSpacing: (value, selector) => get_css_1.default(letterSpacing, value, selector),
+    lineHeight: (value, selector) => get_css_1.default(lineHeight, value, selector),
+    textAlign: (value, selector) => get_css_1.default(textAlign, value, selector),
+    textDecoration: (value, selector) => get_css_1.default(textDecoration, value, selector),
+    textOverflow: (value, selector) => get_css_1.default(textOverflow, value, selector),
+    textShadow: (value, selector) => get_css_1.default(textShadow, value, selector),
+    textTransform: (value, selector) => get_css_1.default(textTransform, value, selector),
+    verticalAlign: (value, selector) => get_css_1.default(verticalAlign, value, selector),
+    whiteSpace: (value, selector) => get_css_1.default(whiteSpace, value, selector),
+    wordBreak: (value, selector) => get_css_1.default(wordBreak, value, selector),
+    wordWrap: (value, selector) => get_css_1.default(wordWrap, value, selector)
 };

dist/src/enhancers/transform.js

@@ -27,4 +27,4 @@ "use strict";
 exports.propEnhancers = {
-    transform: (value) => get_css_1.default(transform, value),
-    transformOrigin: (value) => get_css_1.default(transformOrigin, value)
+    transform: (value, selector) => get_css_1.default(transform, value, selector),
+    transformOrigin: (value, selector) => get_css_1.default(transformOrigin, value, selector)
 };

dist/src/enhancers/transition.js

@@ -48,7 +48,7 @@ "use strict";
 exports.propEnhancers = {
-    transition: (value) => get_css_1.default(transition, value),
-    transitionDelay: (value) => get_css_1.default(transitionDelay, value),
-    transitionDuration: (value) => get_css_1.default(transitionDuration, value),
-    transitionProperty: (value) => get_css_1.default(transitionProperty, value),
-    transitionTimingFunction: (value) => get_css_1.default(transitionTimingFunction, value)
+    transition: (value, selector) => get_css_1.default(transition, value, selector),
+    transitionDelay: (value, selector) => get_css_1.default(transitionDelay, value, selector),
+    transitionDuration: (value, selector) => get_css_1.default(transitionDuration, value, selector),
+    transitionProperty: (value, selector) => get_css_1.default(transitionProperty, value, selector),
+    transitionTimingFunction: (value, selector) => get_css_1.default(transitionTimingFunction, value, selector)
 };

dist/src/get-class-name.d.ts

@@ -12,2 +12,2 @@ export declare function getClassNamePrefix(): string;
 }
-export default function getClassName(propertyInfo: PropertyInfo, value: string): string;
+export default function getClassName(propertyInfo: PropertyInfo, value: string, selector?: string): string;

dist/src/get-class-name.js

@@ -17,3 +17,3 @@ "use strict";
 exports.setClassNamePrefix = setClassNamePrefix;
-function getClassName(propertyInfo, value) {
+function getClassName(propertyInfo, value, selector = '') {
     const { className, safeValue = false, complexValue = false } = propertyInfo;
@@ -24,3 +24,3 @@ let valueKey;
     }
-    else if (complexValue || value.includes('calc(')) {
+    else if (selector || complexValue || value.includes('calc(')) {
         valueKey = hash_1.default(value);
@@ -27,0 +27,0 @@ }

dist/src/get-css.d.ts

 import { PropertyInfo } from './get-class-name';
 import { EnhancedProp } from './types/enhancers';
-export default function getCss(propertyInfo: PropertyInfo, value: string | number): EnhancedProp | null;
+export default function getCss(propertyInfo: PropertyInfo, value: string | number, selector?: string): EnhancedProp | null;

dist/src/get-css.js

@@ -9,3 +9,3 @@ "use strict";
 const get_class_name_1 = __importDefault(require("./get-class-name"));
-function getCss(propertyInfo, value) {
+function getCss(propertyInfo, value, selector = '') {
     let rules;
@@ -22,3 +22,3 @@ const valueType = typeof value;
     const valueString = value_to_string_1.default(value, propertyInfo.defaultUnit);
-    const className = get_class_name_1.default(propertyInfo, valueString);
+    const className = get_class_name_1.default(propertyInfo, valueString, selector);
     if (propertyInfo.isPrefixed) {
@@ -32,13 +32,9 @@ rules = prefixer_1.default(propertyInfo.jsName || '', valueString);
     if (process.env.NODE_ENV === 'production') {
-        const rulesString = rules
-            .map(rule => `${rule.property}:${rule.value}`)
-            .join(';');
-        styles = `.${className}{${rulesString}}`;
+        const rulesString = rules.map(rule => `${rule.property}:${rule.value}`).join(';');
+        styles = `.${className}${selector}{${rulesString}}`;
     }
     else {
-        const rulesString = rules
-            .map(rule => `  ${rule.property}: ${rule.value};`)
-            .join('\n');
+        const rulesString = rules.map(rule => `  ${rule.property}: ${rule.value};`).join('\n');
         styles = `
-.${className} {
+.${className}${selector} {
 ${rulesString}
@@ -45,0 +41,0 @@ }`;

dist/src/types/enhancers.d.ts

@@ -14,2 +14,5 @@ import PropTypes from 'prop-types';
     clearfix?: boolean;
+    selectors?: {
+        [selector: string]: BoxCssProps<CssProps>;
+    };
 };
@@ -24,3 +27,3 @@ export declare type PropEnhancerValueType = string | number;
 export interface PropEnhancers {
-    [key: string]: (value: any) => EnhancedProp | null;
+    [key: string]: (value: PropEnhancerValueType, selector: string) => EnhancedProp | null;
 }
@@ -27,0 +30,0 @@ export interface PropValidators {

package.json

 {
   "name": "ui-box",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Blazing Fast React UI Primitive",
@@ -85,2 +85,9 @@ "contributors": [
   },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 120,
+    "tabWidth": 2,
+    "useTabs": false
+  },
   "xo": {
@@ -87,0 +94,0 @@ "parser": "@typescript-eslint/parser",

README.md

@@ -30,6 +30,6 @@ <div align="center">
 ```jsx
-import Box from "ui-box";
+import Box from 'ui-box'
 
 function Button(props) {
-  return <Box is="button" padding="10px" background="red" {...props} />;
+  return <Box is="button" padding="10px" background="red" {...props} />
 }
@@ -42,3 +42,3 @@
     </Button>
-  );
+  )
 }
@@ -79,2 +79,14 @@ ```
 
+##### selectors
+
+Type: `object<selector: string, props: CssProps>`
+
+This prop allows you to define selectors and custom styles to apply when the selector condition is met. This can be used to create richer element interactions, such as hover or focus states, without the use of another css-in-js library.
+
+```tsx
+<Box is="a" selectors={{ '&:hover': { cursor: 'pointer', textDecoration: 'underline' } }}>
+  Hello world
+</Box>
+```
+
 ##### CSS properties
@@ -305,4 +317,4 @@
 ```js
-import { setClassNamePrefix } from "ui-box";
-setClassNamePrefix("📦");
+import { setClassNamePrefix } from 'ui-box'
+setClassNamePrefix('📦')
 ```
@@ -315,6 +327,6 @@
 ```js
-import { configureSafeHref } from "ui-box";
+import { configureSafeHref } from 'ui-box'
 configureSafeHref({
-  enabled: true, // the default behavior
-});
+  enabled: true // the default behavior
+})
 ```
@@ -345,15 +357,11 @@
 ```js
-"use strict";
-const React = require("react");
-const ReactDOMServer = require("react-dom/server");
-const { default: Box, extractStyles } = require(".");
+'use strict'
+const React = require('react')
+const ReactDOMServer = require('react-dom/server')
+const { default: Box, extractStyles } = require('.')
 
-const element = React.createElement(
-  Box,
-  { margin: "10px", color: "red" },
-  "hi"
-);
+const element = React.createElement(Box, { margin: '10px', color: 'red' }, 'hi')
 
-const html = ReactDOMServer.renderToString(element);
-const { styles, cache } = extractStyles();
+const html = ReactDOMServer.renderToString(element)
+const { styles, cache } = extractStyles()
 
@@ -379,4 +387,4 @@ const page = `
 </html>
-`;
-console.log(page);
+`
+console.log(page)
 ```
@@ -383,0 +391,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107840

increased by3.35%

Number of lines in readme file

399

increased by2.05%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes