app-studio 0.2.11 → 0.2.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/appstudio.cjs.development.js +12 -8
- package/dist/appstudio.cjs.development.js.map +1 -1
- package/dist/appstudio.cjs.production.min.js +1 -1
- package/dist/appstudio.cjs.production.min.js.map +1 -1
- package/dist/appstudio.esm.js +12 -8
- package/dist/appstudio.esm.js.map +1 -1
- package/dist/appstudio.umd.development.js +12 -8
- package/dist/appstudio.umd.development.js.map +1 -1
- package/dist/appstudio.umd.production.min.js +1 -1
- package/dist/appstudio.umd.production.min.js.map +1 -1
- package/dist/utils/style.d.ts +2 -1
- package/package.json +1 -1
|
@@ -537,6 +537,10 @@ const extraKeys = /*#__PURE__*/new Set(['on', 'shadow', 'only', 'media', 'css'])
|
|
|
537
537
|
const includeKeys = /*#__PURE__*/new Set(['src', 'alt', 'style', 'as']);
|
|
538
538
|
|
|
539
539
|
// styleHelpers.ts
|
|
540
|
+
// Excluded keys imported from constants.ts
|
|
541
|
+
// import { excludedKeys } from './constants';
|
|
542
|
+
const StyleProps = /*#__PURE__*/new Set(['alignContent', 'alignItems', 'alignSelf', 'alignmentBaseline', 'all', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'appearance', 'backdropFilter', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundRepeatX', 'backgroundRepeatY', 'backgroundSize', 'baselineShift', 'blockSize', 'border', 'borderBlockEnd', 'borderBlockEndColor', 'borderBlockEndStyle', 'borderBlockEndWidth', 'borderBlockStart', 'borderBlockStartColor', 'borderBlockStartStyle', 'borderBlockStartWidth', 'borderBottom', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderColor', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderInlineEnd', 'borderInlineEndColor', 'borderInlineEndStyle', 'borderInlineEndWidth', 'borderInlineStart', 'borderInlineStartColor', 'borderInlineStartStyle', 'borderInlineStartWidth', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'bufferedRendering', 'captionSide', 'caretColor', 'clear', 'clip', 'clipPath', 'clipRule', 'color', 'colorInterpolation', 'colorInterpolationFilters', 'colorRendering', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'contain', 'content', 'counterIncrement', 'counterReset', 'cursor', 'cx', 'cy', 'd', 'direction', 'display', 'dominantBaseline', 'emptyCells', 'fill', 'fillOpacity', 'fillRule', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'float', 'floodColor', 'floodOpacity', 'font', 'fontDisplay', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontVariantEastAsian', 'fontVariantLigatures', 'fontVariantNumeric', 'fontVariationSettings', 'fontWeight', 'gap', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'height', 'hyphens', 'imageRendering', 'inlineSize', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lightingColor', 'lineBreak', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginInlineStart', 'marginLeft', 'marginRight', 'marginTop', 'marker', 'markerEnd', 'markerMid', 'markerStart', 'mask', 'maskType', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'maxZoom', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'minZoom', 'mixBlendMode', 'objectFit', 'objectPosition', 'offset', 'offsetDistance', 'offsetPath', 'offsetRotate', 'opacity', 'order', 'orientation', 'orphans', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowAnchor', 'overflowWrap', 'overflowX', 'overflowY', 'overscrollBehavior', 'overscrollBehaviorBlock', 'overscrollBehaviorInline', 'overscrollBehaviorX', 'overscrollBehaviorY', 'padding', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingInlineStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'page', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'paintOrder', 'perspective', 'perspectiveOrigin', 'placeContent', 'placeItems', 'placeSelf', 'pointerEvents', 'position', 'quotes', 'r', 'resize', 'right', 'rowGap', 'rx', 'ry', 'scrollBehavior', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInline', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInline', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapAlign', 'scrollSnapStop', 'scrollSnapType', 'shapeImageThreshold', 'shapeMargin', 'shapeOutside', 'shapeRendering', 'size', 'speak', 'src', 'stopColor', 'stopOpacity', 'stroke', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'tableLayout', 'textAlign', 'textAlignLast', 'textAnchor', 'textCombineUpright', 'textDecoration', 'textDecorationColor', 'textDecorationLine', 'textDecorationSkipInk', 'textDecorationStyle', 'textIndent', 'textOrientation', 'textOverflow', 'textRendering', 'textShadow', 'textSizeAdjust', 'textTransform', 'textUnderlinePosition', 'top', 'touchAction', 'transform', 'transformBox', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'unicodeRange', 'userSelect', 'userZoom', 'vectorEffect', 'verticalAlign', 'visibility', 'whiteSpace', 'widows', 'width', 'willChange', 'wordBreak', 'wordSpacing', 'wordWrap', 'writingMode', 'x', 'y', 'zIndex', 'zoom', 'alwaysBounceHorizontal', 'alwaysBounceVertical', 'automaticallyAdjustContentInsets', 'bounces', 'bouncesZoom', 'canCancelContentTouches', 'centerContent', 'contentLayoutStyle', 'contentInset', 'contentInsetAdjustmentBehavior', 'contentOffset', 'decelerationRate', 'directionalLockEnabled', 'disableIntervalMomentum', 'disableScrollViewPanResponder', 'endFillColor', 'fadingEdgeLength', 'horizontal', 'indicatorStyle', 'invertStickyHeaders', 'keyboardDismissMode', 'keyboardShouldPersistTaps', 'maintainVisibleContentPosition', 'maximumZoomScale', 'minimumZoomScale', 'nestedScrollEnabled', 'onContentSizeChange', 'onMomentumScrollBegin', 'onMomentumScrollEnd', 'onScroll', 'onScrollBeginDrag', 'onScrollEndDrag', 'onScrollToTop', 'overScrollMode', 'pagingEnabled', 'persistentScrollbar', 'pinchGestureEnabled', 'refreshControl', 'removeClippedSubviews', 'scrollBarThumbImage', 'scrollEnabled', 'scrollEventThrottle', 'scrollIndicatorInsets', 'scrollPerfTag', 'scrollToOverflowEnabled', 'scrollsToTop', 'DEPRECATED_sendUpdatedChildFrames', 'showsHorizontalScrollIndicator', 'showsVerticalScrollIndicator', 'snapToAlignment', 'snapToEnd', 'snapToInterval', 'snapToOffsets', 'snapToStart', 'stickyHeaderIndices', 'zoomScale', 'borderRightColor', 'backfaceVisibility', 'borderBottomColor', 'borderBottomEndRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStartRadius', 'borderBottomWidth', 'borderColor', 'borderEndColor', 'borderLeftColor', 'borderLeftWidth', 'borderRadius', 'backgroundColor', 'borderRightWidth', 'borderStartColor', 'borderStyle', 'borderTopColor', 'borderTopEndRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStartRadius', 'borderTopWidth', 'borderWidth', 'border', 'opacity', 'elevation', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'borderBottomWidth', 'borderEndWidth', 'borderLeftWidth', 'borderRightWidth', 'borderStartWidth', 'borderTopWidth', 'borderWidth', 'bottom', 'direction', 'display', 'end', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'height', 'justifyContent', 'left', 'margin', 'marginBottom', 'marginEnd', 'marginHorizontal', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'marginVertical', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflow', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'position', 'right', 'start', 'top', 'width', 'zIndex', 'borderTopRightRadius', 'backfaceVisibility', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderColor', 'borderRadius', 'borderTopLeftRadius', 'backgroundColor', 'borderWidth', 'opacity', 'overflow', 'overflowX', 'overflowY', 'resizeMode', 'tintColor', 'overlayColor', 'transform', 'transformMatrix', 'rotation', 'scaleX', 'scaleY', 'translateX', 'translateY', 'perspective', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'skewX', 'skewY', 'testID', 'decomposedMatrix']);
|
|
543
|
+
const nonStyleAttributes = /*#__PURE__*/new Set(['length', 'parentRule', 'src']);
|
|
540
544
|
// Function to convert style object to CSS string
|
|
541
545
|
const styleObjectToCss = styleObj => {
|
|
542
546
|
return Object.entries(styleObj).map(_ref => {
|
|
@@ -546,11 +550,14 @@ const styleObjectToCss = styleObj => {
|
|
|
546
550
|
};
|
|
547
551
|
// Function to convert camelCase to kebab-case
|
|
548
552
|
const toKebabCase = str => str.replace(/([A-Z])/g, match => '-' + match.toLowerCase());
|
|
549
|
-
// Function to check if a property is a style prop
|
|
550
|
-
const isStyleProp = prop => {
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
553
|
+
// // Function to check if a property is a style prop
|
|
554
|
+
// export const isStyleProp = (prop: string): boolean => {
|
|
555
|
+
// // Implement your logic to determine if a prop is a style prop
|
|
556
|
+
// // For simplicity, we assume all props not in excludedKeys are style props
|
|
557
|
+
// return !excludedKeys.has(prop);
|
|
558
|
+
// };
|
|
559
|
+
const isStyleProp = property => {
|
|
560
|
+
return StyleProps.has(property) || nonStyleAttributes.has(property);
|
|
554
561
|
};
|
|
555
562
|
// Function to process and normalize style properties
|
|
556
563
|
const processStyleProperty = (property, value, getColor) => {
|
|
@@ -751,9 +758,6 @@ const cssRulesCache = /*#__PURE__*/new Map();
|
|
|
751
758
|
let classNameCounter = 0;
|
|
752
759
|
const generateClassName = styleProps => {
|
|
753
760
|
// Extract only relevant, primitive style properties
|
|
754
|
-
console.log({
|
|
755
|
-
styleProps
|
|
756
|
-
});
|
|
757
761
|
// Generate a unique hash based on relevantProps
|
|
758
762
|
const hash = hashObject(styleProps);
|
|
759
763
|
if (classCache.has(hash)) {
|