Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@stylexjs/shared
Advanced tools
@stylexjs/shared - npm Package Compare versions
Comparing version 0.2.0-beta.8 to 0.2.0-beta.9
@@ -6,3 +6,2 @@ "use strict"; | ||
| }); | ||
| exports.BANNED_PROPERTIES = void 0; | ||
| exports.default = flatMapExpandedShorthands; | ||
@@ -46,65 +45,41 @@ exports.expandedKeys = void 0; | ||
| // TODO: to be added later. | ||
| // const aliases = { | ||
| // marginInlineStart: (rawValue) => [['marginStart', rawValue]], | ||
| // marginInlineEnd: (rawValue) => [['marginEnd', rawValue]], | ||
| // marginInline: (rawValue) => [ | ||
| // ['marginStart', rawValue], | ||
| // ['marginEnd', rawValue], | ||
| // ], | ||
| // paddingInlineStart: (rawValue) => [['paddingStart', rawValue]], | ||
| // paddingInlineEnd: (rawValue) => [['paddingEnd', rawValue]], | ||
| // paddingInline: (rawValue) => [ | ||
| // ['paddingStart', rawValue], | ||
| // ['paddingEnd', rawValue], | ||
| // ], | ||
| // // 'borderInlineStart': (rawValue) => [['borderStart', rawValue]], | ||
| // // 'borderInlineEnd': (rawValue) => [['borderEnd', rawValue]], | ||
| // // // This will need to change. | ||
| // // 'borderInline': (rawValue) => [ | ||
| // // ['borderStart', rawValue], | ||
| // // ['borderEnd', rawValue], | ||
| // // ], | ||
| // }; | ||
| /** | ||
| * Shorthand properties: | ||
| * - [!] all - BANNED | ||
| * - [!] animation - BANNED | ||
| * - [!] background - BANNED | ||
| * - [x] border - Expanded to border-{direction}. Not to border-*-(width|style|color). | ||
| * This is to limit the number of atoms to 4 instead of 12. | ||
| * - [o] border-top - Only the shorthand is allowed. | ||
| * - [o] border-end - Only the shorthand is allowed. | ||
| * - [o] border-bottom - Only the shorthand is allowed. | ||
| * - [o] border-start - Only the shorthand is allowed. | ||
| * - [!] border-left - BANNED | ||
| * - [!] border-right | ||
| * - [!] border-*-width - BANNED | ||
| * - [!] border-*-style - BANNED | ||
| * - [!] border-*-color - BANNED | ||
| * - [ ] border-block-end | ||
| * - [ ] border-block-start | ||
| * - [ ] border-inline-start | ||
| * - [ ] border-inline-end | ||
| * - [!] border-image - BANNED | ||
| * - [x] all - Should be banned | ||
| * - [x] animation | ||
| * - [x] background | ||
| * - [x] border | ||
| * - [x] border-block-end | ||
| * - [x] border-block-start | ||
| * - [x] border-bottom | ||
| * - [x] border-color | ||
| * - [x] border-image | ||
| * - [x] border-inline-end | ||
| * - [x] border-inline-start | ||
| * - [x] border-left | ||
| * - [x] border-radius | ||
| * - [o] column-rule - Only the shorthand is allowed. | ||
| * - [!] columns - BANNED | ||
| * - [!] flex - BANNED | ||
| * - [!] flex-flow - BANNED | ||
| * - [!] font - BANNED | ||
| * - [x] border-right | ||
| * - [x] border-style | ||
| * - [x] border-top | ||
| * - [x] border-width | ||
| * - [x] column-rule | ||
| * - [x] columns | ||
| * - [x] container | ||
| * - [x] flex | ||
| * - [x] flex-flow | ||
| * - [x] font | ||
| * - [x] gap | ||
| * - [!] grid - BANNED | ||
| * - [!] grid-area - BANNED | ||
| * - [!] grid-column - BANNED | ||
| * - [!] grid-row - BANNED | ||
| * - [!] grid-template - BANNED | ||
| * - [!] grid-template-areas - BANNED | ||
| * | ||
| * - [o] list-style - Only the shorthand is allowed. | ||
| * - [x] grid | ||
| * - [x] grid-area | ||
| * - [x] grid-column | ||
| * - [x] grid-row | ||
| * - [x] grid-template | ||
| * - [x] inset | ||
| * - [x] inset-block | ||
| * - [x] inset-inline | ||
| * - [x] list-style | ||
| * - [x] margin | ||
| * - [o] mask - Only the shorthand is allowed. | ||
| * - [o] offset - Only the shorthand is allowed. | ||
| * - [o] outline - Only the shorthand is allowed. | ||
| * - [x] mask | ||
| * - [x] offset | ||
| * - [x] outline | ||
| * - [x] overflow | ||
@@ -115,265 +90,233 @@ * - [x] padding | ||
| * - [x] place-self | ||
| * - [X] scroll-margin | ||
| * - [x] scroll-margin | ||
| * - [x] scroll-padding | ||
| * - [o] text-decoration - Only the shorthand is allowed. | ||
| * - [o] text-emphasis - Only the shorthand is allowed. | ||
| * - [!] transition - BANNED | ||
| * - [x] text-decoration | ||
| * - [x] text-emphasis | ||
| * - [x] transition | ||
| */ | ||
| const BANNED_PROPERTIES = { | ||
| all: '`all` is not supported. Use individual properties instead.', | ||
| animation: '`animation` is not supported. Use individual properties like `animationName`, `animationDuration`, etc. instead.', | ||
| background: '`background` is not supported. Use individual properties like `backgroundImage`, `backgroundPosition`, etc. instead.', | ||
| borderColor: '`borderColor` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.', | ||
| borderStyle: '`borderStyle` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.', | ||
| borderWidth: '`borderWidth` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.', | ||
| borderTopColor: '`borderTopColor` is not supported. Use `borderTop` instead.', | ||
| borderTopStyle: '`borderTopStyle` is not supported. Use `borderTop` instead.', | ||
| borderTopWidth: '`borderTopWidth` is not supported. Use `borderTop` instead.', | ||
| borderEndColor: '`borderEndColor` is not supported. Use `borderEnd` instead.', | ||
| borderEndStyle: '`borderEndStyle` is not supported. Use `borderEnd` instead.', | ||
| borderEndWidth: '`borderEndWidth` is not supported. Use `borderEnd` instead.', | ||
| borderBottomColor: '`borderBottomColor` is not supported. Use `borderBottom` instead.', | ||
| borderBottomStyle: '`borderBottomStyle` is not supported. Use `borderBottom` instead.', | ||
| borderBottomWidth: '`borderBottomWidth` is not supported. Use `borderBottom` instead.', | ||
| borderStartColor: '`borderStartColor` is not supported. Use `borderStart` instead.', | ||
| borderStartStyle: '`borderStartStyle` is not supported. Use `borderStart` instead.', | ||
| borderStartWidth: '`borderStartWidth` is not supported. Use `borderStart` instead.', | ||
| borderBlockStartColor: '`borderBlockStartColor` is not supported. Use `borderTop` instead.', | ||
| borderBlockStartStyle: '`borderBlockStartStyle` is not supported. Use `borderTop` instead.', | ||
| borderBlockStartWidth: '`borderBlockStartWidth` is not supported. Use `borderTop` instead.', | ||
| borderBlockEndColor: '`borderBlockEndColor` is not supported. Use `borderBottom` instead.', | ||
| borderBlockEndStyle: '`borderBlockEndStyle` is not supported. Use `borderBottom` instead.', | ||
| borderBlockEndWidth: '`borderBlockEndWidth` is not supported. Use `borderBottom` instead.', | ||
| borderInlineStartColor: '`borderInlineStartColor` is not supported. Use `borderStart` instead.', | ||
| borderInlineStartStyle: '`borderInlineStartStyle` is not supported. Use `borderStart` instead.', | ||
| borderInlineStartWidth: '`borderInlineStartWidth` is not supported. Use `borderStart` instead.', | ||
| borderInlineEndColor: '`borderInlineEndColor` is not supported. Use `borderEnd` instead.', | ||
| borderInlineEndStyle: '`borderInlineEndStyle` is not supported. Use `borderEnd` instead.', | ||
| borderInlineEndWidth: '`borderInlineEndWidth` is not supported. Use `borderEnd` instead.', | ||
| borderLeft: '`borderLeft` is not supported. Use `borderStart` instead.', | ||
| borderLeftColor: '`borderLeftColor` is not supported. Use `borderStart` instead.', | ||
| borderLeftStyle: '`borderLeftStyle` is not supported. Use `borderStart` instead.', | ||
| borderLeftWidth: '`borderLeftWidth` is not supported. Use `borderStart` instead.', | ||
| borderRight: '`borderRight` is not supported. Use `borderEnd` instead.', | ||
| borderRightColor: '`borderRightColor` is not supported. Use `borderEnd` instead.', | ||
| borderRightStyle: '`borderRightStyle` is not supported. Use `borderEnd` instead.', | ||
| borderRightWidth: '`borderRightWidth` is not supported. Use `borderEnd` instead.', | ||
| borderTopLeftRadius: '`borderTopLeftRadius` is not supported. Use `borderTopStartRadius` instead.', | ||
| borderTopRightRadius: '`borderTopRightRadius` is not supported. Use `borderTopEndRadius` instead.', | ||
| borderBottomLeftRadius: '`borderBottomLeftRadius` is not supported. Use `borderBottomStartRadius` instead.', | ||
| borderBottomRightRadius: '`borderBottomRightRadius` is not supported. Use `borderBottomEndRadius` instead.', | ||
| borderImageSource: '`borderImageSource` is not supported. Use `borderImage` instead.', | ||
| borderImageSlice: '`borderImageSlice` is not supported. Use `borderImage` instead.', | ||
| borderImageWidth: '`borderImageWidth` is not supported. Use `borderImage` instead.', | ||
| borderImageOutset: '`borderImageOutset` is not supported. Use `borderImage` instead.', | ||
| borderImageRepeat: '`borderImageRepeat` is not supported. Use `borderImage` instead.', | ||
| marginLeft: '`marginLeft` is not supported. Use `marginStart` instead.', | ||
| marginRight: '`marginRight` is not supported. Use `marginEnd` instead.', | ||
| paddingLeft: '`paddingLeft` is not supported. Use `paddingStart` instead.', | ||
| paddingRight: '`paddingRight` is not supported. Use `paddingEnd` instead.', | ||
| columnRuleWidth: '`columnRuleWidth` is not supported. Use `columnRule` instead.', | ||
| columnRuleStyle: '`columnRuleStyle` is not supported. Use `columnRule` instead.', | ||
| columnRuleColor: '`columnRuleColor` is not supported. Use `columnRule` instead.', | ||
| columns: '`columns` is not supported. Use `columnCount` and `columnWidth` instead.', | ||
| flex: '`flex` is not supported. Use `flexGrow`, `flexShrink`, and `flexBasis` instead.', | ||
| flexFlow: '`flexFlow` is not supported. Use `flexDirection` and `flexWrap` instead.', | ||
| font: '`font` is not supported. Use individual properties like `fontFamily`, `fontSize`, etc. instead.', | ||
| grid: '`grid` is not supported. Use individual properties like `gridTemplateColumns`, `gridTemplateRows`, etc. instead.', | ||
| gridColumn: '`gridColumn` is not supported. Use `gridColumnStart` and `gridColumnEnd` instead.', | ||
| gridRow: '`gridRow` is not supported. Use `gridRowStart` and `gridRowEnd` instead.', | ||
| gridArea: '`gridArea` is not supported. Use `gridRowStart`, `gridColumnStart`, `gridRowEnd`, and `gridColumnEnd` instead.', | ||
| gridTemplate: '`gridTemplate` is not supported. Use individual properties like `gridTemplateColumns`, `gridTemplateRows`, etc. instead.', | ||
| gridTemplateAreas: '`gridTemplateAreas` is not supported. Use `gridTemplateRows` and `gridTemplateColumns` instead.', | ||
| listStyleImage: '`listStyleImage` is not supported. Use `listStyle` instead.', | ||
| listStylePosition: '`listStylePosition` is not supported. Use `listStyle` instead.', | ||
| listStyleType: '`listStyleType` is not supported. Use `listStyle` instead.', | ||
| maskClip: '`maskClip` is not supported. Use `mask` instead.', | ||
| maskComposite: '`maskComposite` is not supported. Use `mask` instead.', | ||
| maskImage: '`maskImage` is not supported. Use `mask` instead.', | ||
| maskMode: '`maskMode` is not supported. Use `mask` instead.', | ||
| maskOrigin: '`maskOrigin` is not supported. Use `mask` instead.', | ||
| maskPosition: '`maskPosition` is not supported. Use `mask` instead.', | ||
| maskRepeat: '`maskRepeat` is not supported. Use `mask` instead.', | ||
| maskSize: '`maskSize` is not supported. Use `mask` instead.', | ||
| offsetAnchor: '`offsetAnchor` is not supported. Use `offset` instead.', | ||
| offsetDistance: '`offsetDistance` is not supported. Use `offset` instead.', | ||
| offsetPath: '`offsetPath` is not supported. Use `offset` instead.', | ||
| offsetPosition: '`offsetPosition` is not supported. Use `offset` instead.', | ||
| offsetRotate: '`offsetRotate` is not supported. Use `offset` instead.', | ||
| outlineColor: '`outlineColor` is not supported. Use `outline` instead.', | ||
| outlineStyle: '`outlineStyle` is not supported. Use `outline` instead.', | ||
| outlineWidth: '`outlineWidth` is not supported. Use `outline` instead.', | ||
| textDecorationColor: '`textDecorationColor` is not supported. Use `textDecoration` instead.', | ||
| textDecorationLine: '`textDecorationLine` is not supported. Use `textDecoration` instead.', | ||
| textDecorationStyle: '`textDecorationStyle` is not supported. Use `textDecoration` instead.', | ||
| textDecorationThickness: '`textDecorationThickness` is not supported. Use `textDecoration` instead.', | ||
| textEmphasisColor: '`textEmphasisColor` is not supported. Use `textEmphasis` instead.', | ||
| textEmphasisStyle: '`textEmphasisStyle` is not supported. Use `textEmphasis` instead.', | ||
| transition: '`transition` is not supported. Use individual properties like `transitionProperty`, `transitionDuration`, etc. instead.' | ||
| }; | ||
| exports.BANNED_PROPERTIES = BANNED_PROPERTIES; | ||
| const expansions = { | ||
| const shorthands = { | ||
| all: _ => { | ||
| throw new Error('all is not supported'); | ||
| }, | ||
| animation: value => [['animation', value], ['animationName', null], ['animationDuration', null], ['animationTimingFunction', null], ['animationDelay', null], ['animationIterationCount', null], ['animationDirection', null], ['animationFillMode', null], ['animationPlayState', null]], | ||
| background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ['backgroundPosition', null], ['backgroundRepeat', null], ['backgroundSize', null]], | ||
| // These will be removed later, matching the properties with React Native. | ||
| // For now, we're compiling them to the React Native properties. | ||
| // @Deprecated | ||
| border: rawValue => { | ||
| return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]]; | ||
| if (typeof rawValue === 'number') { | ||
| return shorthands.borderWidth(rawValue); | ||
| } | ||
| const [width, style, color] = splitValue(rawValue); | ||
| return [...shorthands.borderWidth(width), ...shorthands.borderStyle(style), ...shorthands.borderColor(color)]; | ||
| }, | ||
| // border: (rawValue: string) => { | ||
| // if (typeof rawValue === 'number') { | ||
| // return expansions.borderWidth(rawValue); | ||
| // } | ||
| // const [width, style, color, more] = splitValue(rawValue); | ||
| // if (more != null) { | ||
| // throw new Error(messages.MULTIPLE_DIRECTIONS_IN_SHORTHAND); | ||
| // } | ||
| // if (style == null || color == null) { | ||
| // throw new Error( | ||
| // 'Border shorthand requires at least 2 values - width, style and color.' | ||
| // ); | ||
| // } | ||
| // return [ | ||
| // ...expansions.borderWidth(width), | ||
| // ...expansions.borderStyle(style), | ||
| // ...expansions.borderColor(color), | ||
| // ]; | ||
| // }, | ||
| // borderTop: (rawValue: string) => { | ||
| // if (typeof rawValue === 'number') { | ||
| // return [['borderTopWidth', rawValue + 'px']]; | ||
| // } | ||
| // const [width, style, color] = splitValue(rawValue); | ||
| // if (style == null || color == null) { | ||
| // throw new Error( | ||
| // 'BorderTop shorthand requires at least 2 values - width, style and color.' | ||
| // ); | ||
| // } | ||
| // return [ | ||
| // ['borderTopWidth', width], | ||
| // ['borderTopStyle', style], | ||
| // ['borderTopColor', color], | ||
| // ]; | ||
| // }, | ||
| // borderEnd: (rawValue: string) => { | ||
| // if (typeof rawValue === 'number') { | ||
| // return [['borderEndWidth', rawValue + 'px']]; | ||
| // } | ||
| // const [width, style, color] = splitValue(rawValue); | ||
| // if (style == null || color == null) { | ||
| // throw new Error( | ||
| // 'BorderEnd shorthand requires at least 2 values - width, style and color.' | ||
| // ); | ||
| // } | ||
| // return [ | ||
| // ['borderEndWidth', width], | ||
| // ['borderEndStyle', style], | ||
| // ['borderEndColor', color], | ||
| // ]; | ||
| // }, | ||
| // borderBottom: (rawValue: string) => { | ||
| // if (typeof rawValue === 'number') { | ||
| // return [['borderBottomWidth', rawValue + 'px']]; | ||
| // } | ||
| // const [width, style, color] = splitValue(rawValue); | ||
| // if (style == null || color == null) { | ||
| // throw new Error( | ||
| // 'BorderBottom shorthand requires at least 2 values - width, style and color.' | ||
| // ); | ||
| // } | ||
| // return [ | ||
| // ['borderBottomWidth', width], | ||
| // ['borderBottomStyle', style], | ||
| // ['borderBottomColor', color], | ||
| // ]; | ||
| // }, | ||
| // borderStart: (rawValue: string) => { | ||
| // if (typeof rawValue === 'number') { | ||
| // return [['borderStartWidth', rawValue + 'px']]; | ||
| // } | ||
| // const [width, style, color] = splitValue(rawValue); | ||
| // if (style == null || color == null) { | ||
| // throw new Error( | ||
| // 'BorderStart shorthand requires at least 2 values - width, style and color.' | ||
| // ); | ||
| // } | ||
| // return [ | ||
| // ['borderStartWidth', width], | ||
| // ['borderStartStyle', style], | ||
| // ['borderStartColor', color], | ||
| // ]; | ||
| // }, | ||
| borderColor: rawValue => { | ||
| const [top, right = top, bottom = top, left = right] = splitValue(rawValue); | ||
| return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]]; | ||
| // @Deprecated | ||
| borderInline: rawValue => { | ||
| if (typeof rawValue === 'number') { | ||
| return [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]]; | ||
| } | ||
| const [width, style, color] = splitValue(rawValue); | ||
| return [...shorthands.borderInlineWidth(width), ...shorthands.borderInlineStyle(style), ...shorthands.borderInlineColor(color)]; | ||
| }, | ||
| borderHorizontal: rawValue => { | ||
| return [['borderStart', rawValue], ['borderEnd', rawValue]]; | ||
| // @Deprecated | ||
| borderBlock: rawValue => { | ||
| if (typeof rawValue === 'number') { | ||
| return [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]]; | ||
| } | ||
| const [width, style, color] = splitValue(rawValue); | ||
| return [...shorthands.borderBlockWidth(width), ...shorthands.borderBlockStyle(style), ...shorthands.borderBlockColor(color)]; | ||
| }, | ||
| borderStyle: rawValue => { | ||
| const [top, right = top, bottom = top, left = right] = splitValue(rawValue); | ||
| return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]]; | ||
| // @Deprecated | ||
| borderTop: rawValue => { | ||
| if (typeof rawValue === 'number') { | ||
| return [['borderTopWidth', rawValue]]; | ||
| } | ||
| const [width, style, color] = splitValue(rawValue); | ||
| return [['borderTopWidth', width], ['borderTopStyle', style], ['borderTopColor', color]]; | ||
| }, | ||
| borderVertical: rawValue => { | ||
| return [['borderTop', rawValue], ['borderBottom', rawValue]]; | ||
| // @Deprecated | ||
| borderInlineEnd: rawValue => { | ||
| if (typeof rawValue === 'number') { | ||
| return [['borderInlineEndWidth', rawValue]]; | ||
| } | ||
| const [width, style, color] = splitValue(rawValue); | ||
| return [['borderInlineEndWidth', width], ['borderInlineEndStyle', style], ['borderInlineEndColor', color]]; | ||
| }, | ||
| borderWidth: rawValue => { | ||
| const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue); | ||
| return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]]; | ||
| // @Deprecated | ||
| borderRight: rawValue => { | ||
| throw new Error(['`borderRight` is not supported.', 'You could use `borderRightWidth`, `borderRightStyle` and `borderRightColor`,', 'but it is preferable to use `borderInlineEndWidth`, `borderInlineEndStyle` and `borderInlineEndColor`.'].join(' ')); | ||
| }, | ||
| borderRadius: rawValue => { | ||
| const [top, right = top, bottom = top, left = right] = typeof rawValue === 'string' ? splitValue(rawValue) : typeof rawValue === 'number' ? [rawValue] : rawValue; // remove | ||
| return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]]; | ||
| // @Deprecated | ||
| borderBottom: rawValue => { | ||
| if (typeof rawValue === 'number') { | ||
| return [['borderBottomWidth', rawValue]]; | ||
| } | ||
| const [width, style, color] = splitValue(rawValue); | ||
| return [['borderBottomWidth', width], ['borderBottomStyle', style], ['borderBottomColor', color]]; | ||
| }, | ||
| margin: rawValue => { | ||
| const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue); | ||
| return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]]; | ||
| // @Deprecated | ||
| borderInlineStart: rawValue => { | ||
| if (typeof rawValue === 'number') { | ||
| return [['borderInlineStartWidth', rawValue]]; | ||
| } | ||
| const [width, style, color] = splitValue(rawValue); | ||
| return [['borderInlineStartWidth', width], ['borderInlineStartStyle', style], ['borderInlineStartColor', color]]; | ||
| }, | ||
| marginHorizontal: rawValue => { | ||
| return [['marginStart', rawValue], ['marginEnd', rawValue]]; | ||
| // @Deprecated | ||
| borderLeft: rawValue => { | ||
| throw new Error(['`borderLeft` is not supported.', 'You could use `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`,', 'but it is preferable to use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor`.'].join(' ')); | ||
| }, | ||
| marginVertical: rawValue => { | ||
| return [['marginTop', rawValue], ['marginBottom', rawValue]]; | ||
| borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]], | ||
| borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]], | ||
| borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]], | ||
| borderBlockWidth: rawValue => [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]], | ||
| borderBlockStyle: rawValue => [['borderBlockStyle', rawValue], ['borderTopStyle', null], ['borderBottomStyle', null]], | ||
| borderBlockColor: rawValue => [['borderBlockColor', rawValue], ['borderTopColor', null], ['borderBottomColor', null]], | ||
| borderColor: value => [['borderColor', value], ['borderTopColor', null], ['borderInlineEndColor', null], ['borderRightColor', null], ['borderBottomColor', null], ['borderInlineStartColor', null], ['borderLeftColor', null]], | ||
| borderStyle: value => [['borderStyle', value], ['borderTopStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null], ['borderBottomStyle', null], ['borderInlineStartStyle', null], ['borderLeftStyle', null]], | ||
| borderWidth: value => [['borderWidth', value], ['borderTopWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null], ['borderBottomWidth', null], ['borderInlineStartWidth', null], ['borderLeftWidth', null]], | ||
| borderRadius: value => { | ||
| const values = typeof value === 'number' ? [value] : splitValue(value); | ||
| if (values.length === 1) { | ||
| return [['borderRadius', value], | ||
| // // logical constituents | ||
| ['borderStartStartRadius', null], ['borderStartEndRadius', null], ['borderEndStartRadius', null], ['borderEndEndRadius', null], | ||
| // physical constituents | ||
| ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]]; | ||
| } | ||
| // @Deprecated | ||
| const [startStart, startEnd = startStart, endEnd = startStart, endStart = startEnd] = values; | ||
| return [ | ||
| // split into logical consituents | ||
| ['borderStartStartRadius', startStart], ['borderStartEndRadius', startEnd], ['borderEndEndRadius', endEnd], ['borderEndStartRadius', endStart], | ||
| // unset physical consituents | ||
| ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]]; | ||
| }, | ||
| overflow: rawValue => { | ||
| const [x, y = x] = splitValue(rawValue); | ||
| return [['overflowX', x], ['overflowY', y]]; | ||
| columnRule: value => [['columnRule', value], ['columnRuleWidth', null], ['columnRuleStyle', null], ['columnRuleColor', null]], | ||
| columns: value => [['columns', value], ['columnCount', null], ['columnWidth', null]], | ||
| container: value => [['container', value], ['containerName', null], ['containerType', null]], | ||
| flex: value => [['flex', value], ['flexGrow', null], ['flexShrink', null], ['flexBasis', null]], | ||
| flexFlow: value => [['flexFlow', value], ['flexDirection', null], ['flexWrap', null]], | ||
| // @Deprecated ? | ||
| font: value => [['font', value], ['fontFamily', null], ['fontSize', null], ['fontStretch', null], ['fontStyle', null], ['fontVariant', null], ['fontWeight', null], ['lineHeight', null]], | ||
| gap: value => [['gap', value], ['rowGap', null], ['columnGap', null]], | ||
| grid: value => [['grid', value], ['gridTemplate', null], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null], ['gridAutoRows', null], ['gridAutoColumns', null], ['gridAutoFlow', null] | ||
| // This is for grid items only | ||
| // Not a constituent of `grid` | ||
| // ['gridRow', null], | ||
| // ['gridRowStart', null], | ||
| // ['gridRowEnd', null], | ||
| // ['gridColumn', null], | ||
| // ['gridColumnStart', null], | ||
| // ['gridColumnEnd', null], | ||
| // ['gridArea', null], | ||
| ], | ||
| gridArea: value => [['gridArea', value], ['gridRow', null], ['gridRowStart', null], ['gridRowEnd', null], ['gridColumn', null], ['gridColumnStart', null], ['gridColumnEnd', null]], | ||
| gridRow: value => [['gridRow', value], ['gridRowStart', null], ['gridRowEnd', null]], | ||
| gridColumn: value => [['gridColumn', value], ['gridColumnStart', null], ['gridColumnEnd', null]], | ||
| gridTemplate: value => [['gridTemplate', value], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null]], | ||
| inset: value => [['inset', value], ['insetInline', null], ['insetBlock', null], ['insetInlineStart', null], ['insetInlineEnd', null], ['top', null], ['right', null], ['bottom', null], ['left', null]], | ||
| insetInline: value => [['insetInline', value], ['insetInlineStart', null], ['insetInlineEnd', null], ['left', null], ['right', null]], | ||
| insetBlock: value => [['insetBlock', value], ['top', null], ['bottom', null]], | ||
| listStyle: value => [['listStyle', value], ['listStyleImage', null], ['listStylePosition', null], ['listStyleType', null]], | ||
| margin: value => { | ||
| const values = typeof value === 'number' ? [value] : splitValue(value); | ||
| if (values.length === 1) { | ||
| return [['margin', values[0]], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null], ['marginTop', null], ['marginBottom', null]]; | ||
| } | ||
| // @Deprecated | ||
| const [top, right = top, bottom = top, left = right] = values; | ||
| return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left], ['marginLeft', null], ['marginRight', null]]; | ||
| }, | ||
| marginInline: value => [['marginInline', value], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null]], | ||
| marginBlock: value => [['marginBlock', value], ['marginTop', null], ['marginBottom', null]], | ||
| mask: value => [['mask', value], ['maskClip', null], ['maskComposite', null], ['maskImage', null], ['maskMode', null], ['maskOrigin', null], ['maskPosition', null], ['maskRepeat', null], ['maskSize', null]], | ||
| offset: value => [['offset', value], ['offsetAnchor', null], ['offsetDistance', null], ['offsetPath', null], ['offsetPosition', null], ['offsetRotate', null]], | ||
| outline: value => [['outline', value], ['outlineColor', null], ['outlineStyle', null], ['outlineWidth', null]], | ||
| overflow: value => [['overflow', value], ['overflowX', null], ['overflowY', null]], | ||
| padding: rawValue => { | ||
| const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue); | ||
| const values = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue); | ||
| if (values.length === 1) { | ||
| return [['padding', values[0]], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null], ['paddingTop', null], ['paddingBottom', null]]; | ||
| } | ||
| // @Deprecated | ||
| const [top, right = top, bottom = top, left = right] = values; | ||
| return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]]; | ||
| }, | ||
| paddingHorizontal: rawValue => { | ||
| return [['paddingStart', rawValue], ['paddingEnd', rawValue]]; | ||
| }, | ||
| paddingVertical: rawValue => { | ||
| return [['paddingTop', rawValue], ['paddingBottom', rawValue]]; | ||
| }, | ||
| gap: rawValue => { | ||
| if (typeof rawValue === 'number') { | ||
| return [['rowGap', rawValue], ['columnGap', rawValue]]; | ||
| } | ||
| const [row, column = row] = splitValue(rawValue); | ||
| return [['rowGap', row], ['columnGap', column]]; | ||
| }, | ||
| placeContent: rawValue => { | ||
| const [align, justify = align] = splitValue(rawValue); | ||
| return [['alignContent', align], ['justifyContent', justify]]; | ||
| }, | ||
| placeItems: rawValue => { | ||
| const [align, justify = align] = splitValue(rawValue); | ||
| return [['alignItems', align], ['justifyItems', justify]]; | ||
| }, | ||
| placeSelf: rawValue => { | ||
| const [align, justify = align] = splitValue(rawValue); | ||
| return [['alignSelf', align], ['justifySelf', justify]]; | ||
| }, | ||
| scrollMargin: rawValue => { | ||
| const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue); | ||
| return [['scrollMarginTop', top], ['scrollMarginEnd', right], ['scrollMarginBottom', bottom], ['scrollMarginStart', left]]; | ||
| }, | ||
| scrollPadding: rawValue => { | ||
| const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue); | ||
| return [['scrollPaddingTop', top], ['scrollPaddingEnd', right], ['scrollPaddingBottom', bottom], ['scrollPaddingStart', left]]; | ||
| } | ||
| paddingInline: rawValue => [['paddingInline', rawValue], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null]], | ||
| paddingBlock: rawValue => [['paddingBlock', rawValue], ['paddingTop', null], ['paddingBottom', null]], | ||
| placeContent: value => [['placeContent', value], ['alignContent', null], ['justifyContent', null]], | ||
| placeItems: value => [['placeItems', value], ['alignItems', null], ['justifyItems', null]], | ||
| placeSelf: value => [['placeSelf', value], ['alignSelf', null], ['justifySelf', null]], | ||
| scrollMargin: value => [['scrollMargin', value], ['scrollMarginBottom', null], ['scrollMarginLeft', null], ['scrollMarginStart', null], ['scrollMarginRight', null], ['scrollMarginEnd', null], ['scrollMarginTop', null]], | ||
| scrollPadding: value => [['scrollPadding', value], ['scrollPaddingBottom', null], ['scrollPaddingLeft', null], ['scrollPaddingStart', null], ['scrollPaddingRight', null], ['scrollPaddingEnd', null], ['scrollPaddingTop', null]], | ||
| scrollTimeline: value => [['scrollTimeline', value], ['scrollTimelineName', null], ['scrollTimelineAxis', null]], | ||
| textDecoration: value => [['textDecoration', value], ['textDecorationColor', null], ['textDecorationLine', null], ['textDecorationStyle', null], ['textDecorationThickness', null]], | ||
| textEmphasis: value => [['textEmphasis', value], ['textEmphasisColor', null], ['textEmphasisStyle', null]], | ||
| transition: value => [['transition', value], ['transitionDelay', null], ['transitionDuration', null], ['transitionProperty', null], ['transitionTimingFunction', null]] | ||
| }; | ||
| const expandedKeys = [...Object.keys(expansions), ...Object.keys(BANNED_PROPERTIES)]; | ||
| const aliases = { | ||
| // @Deprecated | ||
| borderHorizontal: shorthands.borderInline, | ||
| // @Deprecated | ||
| borderVertical: shorthands.borderBlock, | ||
| // @Deprecated | ||
| borderBlockStart: shorthands.borderTop, | ||
| // @Deprecated | ||
| borderEnd: shorthands.borderInlineEnd, | ||
| // @Deprecated | ||
| borderBlockEnd: shorthands.borderBottom, | ||
| // @Deprecated | ||
| borderStart: shorthands.borderInlineStart, | ||
| borderHorizontalWidth: shorthands.borderInlineWidth, | ||
| borderHorizontalStyle: shorthands.borderInlineStyle, | ||
| borderHorizontalColor: shorthands.borderInlineColor, | ||
| borderVerticalWidth: shorthands.borderBlockWidth, | ||
| borderVerticalStyle: shorthands.borderBlockStyle, | ||
| borderVerticalColor: shorthands.borderBlockColor, | ||
| borderBlockStartColor: value => [['borderTopColor', value]], | ||
| borderBlockEndColor: value => [['borderBottomColor', value]], | ||
| borderStartColor: value => [['borderInlineStartColor', value]], | ||
| borderEndColor: value => [['borderInlineEndColor', value]], | ||
| borderBlockStartStyle: value => [['borderTopStyle', value]], | ||
| borderBlockEndStyle: value => [['borderBottomStyle', value]], | ||
| borderStartStyle: value => [['borderInlineStartStyle', value]], | ||
| borderEndStyle: value => [['borderInlineEndStyle', value]], | ||
| borderBlockStartWidth: value => [['borderTopWidth', value]], | ||
| borderBlockEndWidth: value => [['borderBottomWidth', value]], | ||
| borderStartWidth: value => [['borderInlineStartWidth', value]], | ||
| borderEndWidth: value => [['borderInlineEndWidth', value]], | ||
| borderTopStartRadius: value => [['borderStartStartRadius', value]], | ||
| borderTopEndRadius: value => [['borderStartEndRadius', value]], | ||
| borderBottomStartRadius: value => [['borderEndStartRadius', value]], | ||
| borderBottomEndRadius: value => [['borderEndEndRadius', value]], | ||
| marginBlockStart: value => [['marginTop', value]], | ||
| marginBlockEnd: value => [['marginBottom', value]], | ||
| marginStart: value => [['marginInlineStart', value]], | ||
| marginEnd: value => [['marginInlineEnd', value]], | ||
| marginHorizontal: shorthands.marginInline, | ||
| marginVertical: shorthands.marginBlock, | ||
| paddingBlockStart: rawValue => [['paddingTop', rawValue]], | ||
| paddingBlockEnd: rawValue => [['paddingBottom', rawValue]], | ||
| paddingStart: rawValue => [['paddingInlinStart', rawValue]], | ||
| paddingEnd: rawValue => [['paddingInlineEnd', rawValue]], | ||
| paddingHorizontal: shorthands.paddingInline, | ||
| paddingVertical: shorthands.paddingBlock, | ||
| insetBlockStart: value => [['top', value]], | ||
| insetBlockEnd: value => [['bottom', value]], | ||
| start: value => [['insetInlineStart', value]], | ||
| end: value => [['insetInlineEnd', value]] | ||
| }; | ||
| const expansions = { | ||
| ...shorthands, | ||
| ...aliases | ||
| }; | ||
| // TODO: It should be possible to remove this as we should no longer have | ||
| // to disallow shorthand properties with object values. | ||
| const expandedKeys = Object.keys(expansions); | ||
| exports.expandedKeys = expandedKeys; | ||
@@ -380,0 +323,0 @@ function flatMapExpandedShorthands(objEntry) { |
@@ -10,2 +10,3 @@ "use strict"; | ||
| var _genCSSRule = _interopRequireDefault(require("./utils/genCSSRule")); | ||
| var _propertyPriorities = _interopRequireDefault(require("./utils/property-priorities")); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -21,3 +22,5 @@ /** | ||
| function generateCSSRule(className, key, value, pseudo) { | ||
| function generateCSSRule(className, key, | ||
| // pre-dashed | ||
| value, pseudo) { | ||
| const pairs = Array.isArray(value) ? value.map(eachValue => [key, eachValue]) : [[key, value]]; | ||
@@ -29,20 +32,3 @@ const ltrPairs = pairs.map(_generateLtr.default); | ||
| const rtlRule = !rtlDecls ? null : (0, _genCSSRule.default)(className, rtlDecls, pseudo); | ||
| let priority = 1; | ||
| if (pseudo != null) { | ||
| if (pseudo[0] === '@') { | ||
| priority = 2; | ||
| } else if (pseudo[0] === ':') { | ||
| priority = pseudoPriorities[pseudo] ?? 2; | ||
| if (pseudo.startsWith(':nth-child')) { | ||
| priority = 6; | ||
| } | ||
| if (pseudo.startsWith(':nth-of-type')) { | ||
| priority = 7; | ||
| } | ||
| } | ||
| } | ||
| if (key.toLowerCase().includes('left') || key.toLowerCase().includes('right')) { | ||
| // Bump priority for physical left/right values. | ||
| priority += 0.1; | ||
| } | ||
| const priority = (0, _propertyPriorities.default)(key) + (pseudo ? (0, _propertyPriorities.default)(pseudo) : 0); | ||
| return { | ||
@@ -53,16 +39,2 @@ priority, | ||
| }; | ||
| } | ||
| const pseudoPriorities = { | ||
| // Might become unsupported: | ||
| ':first-child': 3, | ||
| ':last-child': 4, | ||
| ':only-child': 5, | ||
| ':nth-child': 6, | ||
| ':nth-of-type': 7, | ||
| ':hover': 8, | ||
| ':focus': 9, | ||
| ':active': 10, | ||
| ':disabled': 11, | ||
| '::placeholder': 12, | ||
| '::thumb': 13 | ||
| }; | ||
| } |
@@ -67,3 +67,3 @@ /** | ||
| definedStylexCSSVariables?: { [key: string]: any }; | ||
| allowUnsafeProperties: boolean; | ||
| skipShorthandExpansion?: boolean; | ||
| [key: string]: any; | ||
@@ -70,0 +70,0 @@ }; |
@@ -16,3 +16,3 @@ /** | ||
| }); | ||
| exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.MULTIPLE_DIRECTIONS_IN_SHORTHAND = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = void 0; | ||
| exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = void 0; | ||
| const ILLEGAL_ARGUMENT_LENGTH = 'stylex() should have 1 argument.'; | ||
@@ -40,3 +40,3 @@ exports.ILLEGAL_ARGUMENT_LENGTH = ILLEGAL_ARGUMENT_LENGTH; | ||
| exports.UNKNOWN_NAMESPACE = UNKNOWN_NAMESPACE; | ||
| const ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested."; | ||
| const ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested more than one level deep."; | ||
| exports.ILLEGAL_NESTED_PSEUDO = ILLEGAL_NESTED_PSEUDO; | ||
@@ -60,4 +60,2 @@ const ILLEGAL_PROP_VALUE = 'A style value can only contain an array, string or number.'; | ||
| const NO_PARENT_PATH = 'Unexpected AST node without a parent path.'; | ||
| exports.NO_PARENT_PATH = NO_PARENT_PATH; | ||
| const MULTIPLE_DIRECTIONS_IN_SHORTHAND = 'Shorthand properties cannot contain different values for different directions.'; | ||
| exports.MULTIPLE_DIRECTIONS_IN_SHORTHAND = MULTIPLE_DIRECTIONS_IN_SHORTHAND; | ||
| exports.NO_PARENT_PATH = NO_PARENT_PATH; |
@@ -8,3 +8,3 @@ "use strict"; | ||
| var _convertToClassName = _interopRequireDefault(require("./convert-to-className")); | ||
| var _expandShorthands = _interopRequireWildcard(require("./expand-shorthands")); | ||
| var _index = _interopRequireWildcard(require("./preprocess-rules/index")); | ||
| var _objectUtils = require("./utils/object-utils"); | ||
@@ -44,2 +44,5 @@ var messages = _interopRequireWildcard(require("./messages")); | ||
| } | ||
| // namespace = preflatten(namespace); | ||
| const [resolvedNamespace, injected] = styleXCreateNamespace(namespace, options); | ||
@@ -77,12 +80,14 @@ const compiledNamespace = (0, _objectUtils.flattenObject)(resolvedNamespace); | ||
| // First the shorthand properties are expanded. | ||
| // e.g. `margin` gets expanded to `marginTop`, `marginBottom`, `marginStart`, `marginEnd`. | ||
| // `entries` is an array of [key, value] pairs. | ||
| // First handle shorthands. The strategy for this is based on the `styleResolution` option. | ||
| const entries = namespaceEntries.flatMap(_ref => { | ||
| let [key, value] = _ref; | ||
| // Detect style ...spreads and leave them unmodified | ||
| if (value instanceof _stylexInclude.IncludedStyles) { | ||
| return [[key, value]]; | ||
| } | ||
| // Detect nested style objects. | ||
| if (value != null && typeof value === 'object' && !Array.isArray(value)) { | ||
| if (!key.startsWith(':') && !key.startsWith('@') && _expandShorthands.expandedKeys.includes(key)) { | ||
| // Nested Objects are only allowed for legacy :pseudo, @media or long-hand properties for now. | ||
| // In the future, we will try to support shorthands as well. | ||
| if (!key.startsWith(':') && !key.startsWith('@') && (0, _index.getExpandedKeys)(options).includes(key)) { | ||
| throw new Error(messages.INVALID_PSEUDO); | ||
@@ -95,6 +100,3 @@ } | ||
| } | ||
| if (!options.allowUnsafeProperties && _expandShorthands.BANNED_PROPERTIES[key]) { | ||
| throw new Error(_expandShorthands.BANNED_PROPERTIES[key]); | ||
| } | ||
| return (0, _expandShorthands.default)([innerKey, innerValue]); | ||
| return (0, _index.default)([innerKey, innerValue], options); | ||
| }))]]; | ||
@@ -108,6 +110,3 @@ } else { | ||
| } | ||
| if (!options.allowUnsafeProperties && _expandShorthands.BANNED_PROPERTIES[key]) { | ||
| throw new Error(_expandShorthands.BANNED_PROPERTIES[key]); | ||
| } | ||
| return (0, _expandShorthands.default)([key, value]); | ||
| return (0, _index.default)([key, value], options); | ||
| } | ||
@@ -133,2 +132,4 @@ }); | ||
| innerObj[innerKey] = null; | ||
| } else if (typeof innerVal === 'object' && !Array.isArray(innerVal)) { | ||
| throw new Error(messages.ILLEGAL_NESTED_PSEUDO); | ||
| } else { | ||
@@ -148,2 +149,5 @@ const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options); | ||
| } | ||
| if (typeof innerVal === 'object' && !Array.isArray(innerVal)) { | ||
| throw new Error(messages.ILLEGAL_NESTED_PSEUDO); | ||
| } | ||
| if (innerVal !== null) { | ||
@@ -150,0 +154,0 @@ const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([propKey, innerVal], pseudo === 'default' ? undefined : pseudo, options); |
@@ -8,3 +8,3 @@ "use strict"; | ||
| var _hash = _interopRequireDefault(require("./hash")); | ||
| var _expandShorthands = _interopRequireDefault(require("./expand-shorthands")); | ||
| var _index = _interopRequireDefault(require("./preprocess-rules/index")); | ||
| var _generateLtr = _interopRequireDefault(require("./physical-rtl/generate-ltr")); | ||
@@ -31,7 +31,8 @@ var _generateRtl = _interopRequireDefault(require("./physical-rtl/generate-rtl")); | ||
| function styleXKeyframes(frames) { | ||
| let { | ||
| let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| const { | ||
| stylexSheetName = '<>', | ||
| classNamePrefix = 'x' | ||
| } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(expandFrameShorthands).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done()); | ||
| } = options; | ||
| const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(frame => expandFrameShorthands(frame, options)).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done()); | ||
| const ltrStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, _generateLtr.default)); | ||
@@ -52,4 +53,15 @@ const rtlStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, entry => (0, _generateRtl.default)(entry) ?? entry)); | ||
| } | ||
| function expandFrameShorthands(frame) { | ||
| return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _expandShorthands.default)(pair))); | ||
| function expandFrameShorthands(frame, options) { | ||
| return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _index.default)(pair, options).map(_ref => { | ||
| let [key, value] = _ref; | ||
| if (typeof value === 'string' || typeof value === 'number') { | ||
| return [key, value]; | ||
| } | ||
| return null; | ||
| }).filter(Boolean)) | ||
| // Keyframes are not combined. The nulls can be skipped | ||
| .filter(_ref2 => { | ||
| let [key, value] = _ref2; | ||
| return value != null; | ||
| })); | ||
| } | ||
@@ -59,6 +71,6 @@ | ||
| function constructKeyframesObj(frames) { | ||
| return (0, _objectUtils.objEntries)(frames).map(_ref => { | ||
| let [key, value] = _ref; | ||
| return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref2 => { | ||
| let [k, v] = _ref2; | ||
| return (0, _objectUtils.objEntries)(frames).map(_ref3 => { | ||
| let [key, value] = _ref3; | ||
| return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref4 => { | ||
| let [k, v] = _ref4; | ||
| return `${k}:${v};`; | ||
@@ -65,0 +77,0 @@ }).join('')}}`; |
@@ -30,4 +30,7 @@ /** | ||
| function normalizeValue(value, key) { | ||
| if (value == null) { | ||
| return value; | ||
| } | ||
| const parsedAST = (0, _postcssValueParser.default)(value); | ||
| return normalizers.reduce((ast, fn) => fn(ast, key), parsedAST).toString(); | ||
| } |
| { | ||
| "name": "@stylexjs/shared", | ||
| "version": "0.2.0-beta.8", | ||
| "version": "0.2.0-beta.9", | ||
| "description": "Shared Code for Stylex compile and runtime.", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No README
QualityPackage does not have a README. This may indicate a failed publish or a low quality package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by88.47%
174944
- Number of package files
- increased by46.67%
44
- Lines of code
- increased by70.28%
3724
- Number of medium quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased byInfinity%
82
No dependency changes