@webstudio-is/css-engine 0.204.0 → 0.205.0
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/lib/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var prefixStyles = (styleMap) => {
|
|
|
14
14
|
if (property === "backdrop-filter") {
|
|
15
15
|
newStyleMap.set("-webkit-backdrop-filter", value);
|
|
16
16
|
}
|
|
17
|
-
if (property === "view-timeline-name" || property === "scroll-timeline-name") {
|
|
17
|
+
if (property === "view-timeline-name" || property === "scroll-timeline-name" || property === "view-timeline-inset") {
|
|
18
18
|
newStyleMap.set(`--${property}`, value);
|
|
19
19
|
}
|
|
20
20
|
newStyleMap.set(property, value);
|
|
@@ -420,11 +420,10 @@ var mergeDeclarations = (declarations) => {
|
|
|
420
420
|
}
|
|
421
421
|
return newDeclarations;
|
|
422
422
|
};
|
|
423
|
-
var generateStyleMap = ({
|
|
424
|
-
style,
|
|
423
|
+
var generateStyleMap = (style, {
|
|
425
424
|
indent = 0,
|
|
426
425
|
transformValue
|
|
427
|
-
}) => {
|
|
426
|
+
} = {}) => {
|
|
428
427
|
const spaces = " ".repeat(indent);
|
|
429
428
|
let lines = "";
|
|
430
429
|
for (const [property, value] of style) {
|
|
@@ -568,8 +567,7 @@ var NestingRule = class {
|
|
|
568
567
|
const generated = Array.from(styleBySelector).sort(
|
|
569
568
|
([leftSelector], [rightSelector]) => leftSelector.localeCompare(rightSelector)
|
|
570
569
|
).map(([selector, style]) => {
|
|
571
|
-
const content = generateStyleMap({
|
|
572
|
-
style: prefixStyles(style),
|
|
570
|
+
const content = generateStyleMap(prefixStyles(style), {
|
|
573
571
|
indent: indent + 2,
|
|
574
572
|
transformValue
|
|
575
573
|
});
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export type
|
|
1
|
+
export type CamelCasedProperty = "WebkitFontSmoothing" | "MozOsxFontSmoothing" | "-webkit-box-orient" | "viewTimelineName" | "scrollTimelineName" | "viewTimelineInset" | "-webkit-line-clamp" | "-webkit-overflow-scrolling" | "-webkit-tap-highlight-color" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clip" | "clipPath" | "color" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "fieldSizing" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpaceCollapse" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom";
|
|
2
|
+
export type HyphenatedProperty = "-webkit-font-smoothing" | "-moz-osx-font-smoothing" | "-webkit-box-orient" | "view-timeline-name" | "scroll-timeline-name" | "view-timeline-inset" | "-webkit-line-clamp" | "-webkit-overflow-scrolling" | "-webkit-tap-highlight-color" | "accent-color" | "align-content" | "align-items" | "align-self" | "animation-delay" | "animation-direction" | "animation-duration" | "animation-fill-mode" | "animation-iteration-count" | "animation-name" | "animation-play-state" | "animation-timing-function" | "appearance" | "aspect-ratio" | "backdrop-filter" | "backface-visibility" | "background-attachment" | "background-blend-mode" | "background-clip" | "background-color" | "background-image" | "background-origin" | "background-position-x" | "background-position-y" | "background-repeat" | "background-size" | "block-size" | "border-block-color" | "border-block-style" | "border-block-width" | "border-block-end-color" | "border-block-end-style" | "border-block-end-width" | "border-block-start-color" | "border-block-start-style" | "border-block-start-width" | "border-bottom-color" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-bottom-style" | "border-bottom-width" | "border-collapse" | "border-end-end-radius" | "border-end-start-radius" | "border-image-outset" | "border-image-repeat" | "border-image-slice" | "border-image-source" | "border-image-width" | "border-inline-color" | "border-inline-style" | "border-inline-width" | "border-inline-end-color" | "border-inline-end-style" | "border-inline-end-width" | "border-inline-start-color" | "border-inline-start-style" | "border-inline-start-width" | "border-left-color" | "border-left-style" | "border-left-width" | "border-right-color" | "border-right-style" | "border-right-width" | "border-spacing" | "border-start-end-radius" | "border-start-start-radius" | "border-top-color" | "border-top-left-radius" | "border-top-right-radius" | "border-top-style" | "border-top-width" | "bottom" | "box-decoration-break" | "box-shadow" | "box-sizing" | "break-after" | "break-before" | "break-inside" | "caption-side" | "caret-color" | "clear" | "clip" | "clip-path" | "color" | "color-scheme" | "column-count" | "column-fill" | "column-gap" | "column-rule-color" | "column-rule-style" | "column-rule-width" | "column-span" | "column-width" | "contain" | "contain-intrinsic-block-size" | "contain-intrinsic-height" | "contain-intrinsic-inline-size" | "contain-intrinsic-width" | "container-name" | "container-type" | "content" | "content-visibility" | "counter-increment" | "counter-reset" | "counter-set" | "cursor" | "direction" | "display" | "empty-cells" | "field-sizing" | "filter" | "flex-basis" | "flex-direction" | "flex-grow" | "flex-shrink" | "flex-wrap" | "float" | "font-family" | "font-feature-settings" | "font-kerning" | "font-language-override" | "font-optical-sizing" | "font-variation-settings" | "font-size" | "font-size-adjust" | "font-stretch" | "font-style" | "font-synthesis-small-caps" | "font-synthesis-style" | "font-synthesis-weight" | "font-variant-alternates" | "font-variant-caps" | "font-variant-east-asian" | "font-variant-ligatures" | "font-variant-numeric" | "font-variant-position" | "font-weight" | "grid-auto-columns" | "grid-auto-flow" | "grid-auto-rows" | "grid-column-end" | "grid-column-start" | "grid-row-end" | "grid-row-start" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "hanging-punctuation" | "height" | "hyphenate-character" | "hyphenate-limit-chars" | "hyphens" | "image-orientation" | "image-rendering" | "inline-size" | "inset-block-end" | "inset-block-start" | "inset-inline-end" | "inset-inline-start" | "isolation" | "justify-content" | "justify-items" | "justify-self" | "left" | "letter-spacing" | "line-break" | "line-height" | "list-style-image" | "list-style-position" | "list-style-type" | "margin-block-end" | "margin-block-start" | "margin-bottom" | "margin-inline-end" | "margin-inline-start" | "margin-left" | "margin-right" | "margin-top" | "mask-border-mode" | "mask-border-outset" | "mask-border-repeat" | "mask-border-slice" | "mask-border-source" | "mask-border-width" | "mask-clip" | "mask-composite" | "mask-image" | "mask-mode" | "mask-origin" | "mask-position" | "mask-repeat" | "mask-size" | "mask-type" | "math-depth" | "math-shift" | "math-style" | "max-block-size" | "max-height" | "max-inline-size" | "max-width" | "min-block-size" | "min-height" | "min-inline-size" | "min-width" | "mix-blend-mode" | "object-fit" | "object-position" | "offset-anchor" | "offset-distance" | "offset-path" | "offset-position" | "offset-rotate" | "opacity" | "order" | "orphans" | "outline-color" | "outline-offset" | "outline-style" | "outline-width" | "overflow-wrap" | "overflow-x" | "overflow-y" | "overscroll-behavior" | "overscroll-behavior-block" | "overscroll-behavior-inline" | "overscroll-behavior-x" | "overscroll-behavior-y" | "padding-block-end" | "padding-block-start" | "padding-bottom" | "padding-inline-end" | "padding-inline-start" | "padding-left" | "padding-right" | "padding-top" | "page" | "page-break-after" | "page-break-before" | "page-break-inside" | "paint-order" | "perspective" | "perspective-origin" | "pointer-events" | "position" | "print-color-adjust" | "quotes" | "resize" | "right" | "rotate" | "row-gap" | "scale" | "scrollbar-color" | "scrollbar-gutter" | "scrollbar-width" | "scroll-behavior" | "scroll-margin-block-start" | "scroll-margin-block-end" | "scroll-margin-bottom" | "scroll-margin-inline-start" | "scroll-margin-inline-end" | "scroll-margin-left" | "scroll-margin-right" | "scroll-margin-top" | "scroll-padding-block-start" | "scroll-padding-block-end" | "scroll-padding-bottom" | "scroll-padding-inline-start" | "scroll-padding-inline-end" | "scroll-padding-left" | "scroll-padding-right" | "scroll-padding-top" | "scroll-snap-align" | "scroll-snap-stop" | "scroll-snap-type" | "shape-image-threshold" | "shape-margin" | "shape-outside" | "tab-size" | "table-layout" | "text-align" | "text-align-last" | "text-combine-upright" | "text-decoration-color" | "text-decoration-line" | "text-decoration-skip-ink" | "text-decoration-style" | "text-decoration-thickness" | "text-emphasis-color" | "text-emphasis-position" | "text-emphasis-style" | "text-indent" | "text-justify" | "text-orientation" | "text-overflow" | "text-rendering" | "text-shadow" | "text-size-adjust" | "text-transform" | "text-underline-offset" | "text-underline-position" | "text-wrap-mode" | "text-wrap-style" | "top" | "touch-action" | "transform" | "transform-box" | "transform-origin" | "transform-style" | "transition-behavior" | "transition-delay" | "transition-duration" | "transition-property" | "transition-timing-function" | "translate" | "unicode-bidi" | "user-select" | "vertical-align" | "visibility" | "white-space-collapse" | "widows" | "width" | "will-change" | "word-break" | "word-spacing" | "word-wrap" | "writing-mode" | "z-index" | "zoom";
|
|
2
3
|
export type Unit = "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { StyleValue } from "../schema";
|
|
2
2
|
import { type TransformValue } from "./to-value";
|
|
3
3
|
export type StyleMap = Map<string, StyleValue>;
|
|
4
|
-
export declare const generateStyleMap: (
|
|
5
|
-
style: StyleMap;
|
|
4
|
+
export declare const generateStyleMap: (style: StyleMap, { indent, transformValue, }?: {
|
|
6
5
|
indent?: number;
|
|
7
6
|
transformValue?: TransformValue;
|
|
8
7
|
}) => string;
|
package/lib/types/index.d.ts
CHANGED
package/lib/types/schema.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { z } from "zod";
|
|
2
|
-
import type {
|
|
2
|
+
import type { CamelCasedProperty, HyphenatedProperty, Unit as GeneratedUnit } from "./__generated__/types";
|
|
3
3
|
import { type TransformValue } from "./core/to-value";
|
|
4
4
|
export type CustomProperty = `--${string}`;
|
|
5
|
-
export type StyleProperty =
|
|
5
|
+
export type StyleProperty = CamelCasedProperty | CustomProperty;
|
|
6
|
+
export type CssProperty = HyphenatedProperty | CustomProperty;
|
|
6
7
|
declare const Unit: z.ZodType<GeneratedUnit | "number">;
|
|
7
8
|
export type Unit = z.infer<typeof Unit>;
|
|
8
9
|
export declare const UnitValue: z.ZodObject<{
|
|
@@ -166,6 +167,10 @@ export declare const InvalidValue: z.ZodObject<{
|
|
|
166
167
|
hidden?: boolean | undefined;
|
|
167
168
|
}>;
|
|
168
169
|
export type InvalidValue = z.infer<typeof InvalidValue>;
|
|
170
|
+
/**
|
|
171
|
+
* Use GuaranteedInvalidValue if you need a temp placeholder before user enters a value
|
|
172
|
+
* @deprecated
|
|
173
|
+
*/
|
|
169
174
|
declare const UnsetValue: z.ZodObject<{
|
|
170
175
|
type: z.ZodLiteral<"unset">;
|
|
171
176
|
value: z.ZodLiteral<"">;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/css-engine",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.205.0",
|
|
4
4
|
"description": "CSS Renderer for Webstudio",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"@emotion/hash": "^0.9.2",
|
|
10
10
|
"zod": "^3.22.4",
|
|
11
|
-
"@webstudio-is/fonts": "0.
|
|
11
|
+
"@webstudio-is/fonts": "0.205.0"
|
|
12
12
|
},
|
|
13
13
|
"devDependencies": {
|
|
14
14
|
"@types/react": "^18.2.70",
|