1use super::Props;
2use wasm_bindgen::{intern, JsValue};
3
4#[derive(Debug, Default, Clone)]
18pub struct Style(Props);
19
20impl Style {
21 pub fn new() -> Self {
23 Self(Props::new())
24 }
25
26 pub fn insert(self, key: &str, value: &JsValue) -> Self {
28 Self(self.0.insert(key, value))
29 }
30}
31
32impl AsRef<JsValue> for Style {
33 fn as_ref(&self) -> &JsValue {
34 self.0.as_ref()
35 }
36}
37
38impl From<Style> for JsValue {
39 fn from(style: Style) -> Self {
40 style.0.into()
41 }
42}
43
44macro_rules! impl_style {
45 { $( $attr:ident, $attr_str:literal; )* } => {
46 $(
47 #[allow(missing_docs)]
48 pub fn $attr(self, value: impl Into<JsValue>) -> Self {
49 self.insert(intern($attr_str), &value.into())
50 }
51 )*
52 };
53}
54
55impl Style {
56 impl_style! {
57 accent_color, "accentColor";
58 align_content, "alignContent";
59 align_items, "alignItems";
60 align_self, "alignSelf";
61 align_tracks, "alignTracks";
62 all, "all";
63 animation_delay, "animationDelay";
64 animation_direction, "animationDirection";
65 animation_duration, "animationDuration";
66 animation_fill_mode, "animationFillMode";
67 animation_iteration_count, "animationIterationCount";
68 animation_name, "animationName";
69 animation_play_state, "animationPlayState";
70 animation_timeline, "animationTimeline";
71 animation_timing_function, "animationTimingFunction";
72 animation, "animation";
73 appearance, "appearance";
74 aspect_ratio, "aspectRatio";
75 backdrop_filter, "backdropFilter";
76 backface_visibility, "backfaceVisibility";
77 background_attachment, "backgroundAttachment";
78 background_blend_mode, "backgroundBlendMode";
79 background_clip, "backgroundClip";
80 background_color, "backgroundColor";
81 background_image, "backgroundImage";
82 background_origin, "backgroundOrigin";
83 background_position_x, "backgroundPositionX";
84 background_position_y, "backgroundPositionY";
85 background_position, "backgroundPosition";
86 background_repeat, "backgroundRepeat";
87 background_size, "backgroundSize";
88 background, "background";
89 block_overflow, "blockOverflow";
90 block_size, "blockSize";
91 border_block_color, "borderBlockColor";
92 border_block_end_color, "borderBlockEndColor";
93 border_block_end_style, "borderBlockEndStyle";
94 border_block_end_width, "borderBlockEndWidth";
95 border_block_end, "borderBlockEnd";
96 border_block_start_color, "borderBlockStartColor";
97 border_block_start_style, "borderBlockStartStyle";
98 border_block_start_width, "borderBlockStartWidth";
99 border_block_start, "borderBlockStart";
100 border_block_style, "borderBlockStyle";
101 border_block_width, "borderBlockWidth";
102 border_block, "borderBlock";
103 border_bottom_color, "borderBottomColor";
104 border_bottom_left_radius, "borderBottomLeftRadius";
105 border_bottom_right_radius, "borderBottomRightRadius";
106 border_bottom_style, "borderBottomStyle";
107 border_bottom_width, "borderBottomWidth";
108 border_bottom, "borderBottom";
109 border_collapse, "borderCollapse";
110 border_color, "borderColor";
111 border_end_end_radius, "borderEndEndRadius";
112 border_end_start_radius, "borderEndStartRadius";
113 border_image_outset, "borderImageOutset";
114 border_image_repeat, "borderImageRepeat";
115 border_image_slice, "borderImageSlice";
116 border_image_source, "borderImageSource";
117 border_image_width, "borderImageWidth";
118 border_image, "borderImage";
119 border_inline_color, "borderInlineColor";
120 border_inline_end_color, "borderInlineEndColor";
121 border_inline_end_style, "borderInlineEndStyle";
122 border_inline_end_width, "borderInlineEndWidth";
123 border_inline_end, "borderInlineEnd";
124 border_inline_start_color, "borderInlineStartColor";
125 border_inline_start_style, "borderInlineStartStyle";
126 border_inline_start_width, "borderInlineStartWidth";
127 border_inline_start, "borderInlineStart";
128 border_inline_style, "borderInlineStyle";
129 border_inline_width, "borderInlineWidth";
130 border_inline, "borderInline";
131 border_left_color, "borderLeftColor";
132 border_left_style, "borderLeftStyle";
133 border_left_width, "borderLeftWidth";
134 border_left, "borderLeft";
135 border_radius, "borderRadius";
136 border_right_color, "borderRightColor";
137 border_right_style, "borderRightStyle";
138 border_right_width, "borderRightWidth";
139 border_right, "borderRight";
140 border_spacing, "borderSpacing";
141 border_start_end_radius, "borderStartEndRadius";
142 border_start_start_radius, "borderStartStartRadius";
143 border_style, "borderStyle";
144 border_top_color, "borderTopColor";
145 border_top_left_radius, "borderTopLeftRadius";
146 border_top_right_radius, "borderTopRightRadius";
147 border_top_style, "borderTopStyle";
148 border_top_width, "borderTopWidth";
149 border_top, "borderTop";
150 border_width, "borderWidth";
151 border, "border";
152 bottom, "bottom";
153 box_decoration_break, "boxDecorationBreak";
154 box_shadow, "boxShadow";
155 box_sizing, "boxSizing";
156 break_after, "breakAfter";
157 break_before, "breakBefore";
158 break_inside, "breakInside";
159 caption_side, "captionSide";
160 caret_color, "caretColor";
161 clear, "clear";
162 clip_path, "clipPath";
163 color_adjust, "colorAdjust";
164 color_scheme, "colorScheme";
165 color, "color";
166 column_count, "columnCount";
167 column_fill, "columnFill";
168 column_gap, "columnGap";
169 column_rule_color, "columnRuleColor";
170 column_rule_style, "columnRuleStyle";
171 column_rule_width, "columnRuleWidth";
172 column_rule, "columnRule";
173 column_span, "columnSpan";
174 column_width, "columnWidth";
175 columns, "columns";
176 contain, "contain";
177 content_visibility, "contentVisibility";
178 content, "content";
179 counter_increment, "counterIncrement";
180 counter_reset, "counterReset";
181 counter_set, "counterSet";
182 cursor, "cursor";
183 direction, "direction";
184 display, "display";
185 empty_cells, "emptyCells";
186 filter, "filter";
187 flex_basis, "flexBasis";
188 flex_direction, "flexDirection";
189 flex_flow, "flexFlow";
190 flex_grow, "flexGrow";
191 flex_shrink, "flexShrink";
192 flex_wrap, "flexWrap";
193 flex, "flex";
194 float, "float";
195 font_family, "fontFamily";
196 font_feature_settings, "fontFeatureSettings";
197 font_kerning, "fontKerning";
198 font_language_override, "fontLanguageOverride";
199 font_optical_sizing, "fontOpticalSizing";
200 font_size_adjust, "fontSizeAdjust";
201 font_size, "fontSize";
202 font_smooth, "fontSmooth";
203 font_stretch, "fontStretch";
204 font_style, "fontStyle";
205 font_synthesis, "fontSynthesis";
206 font_variant_alternates, "fontVariantAlternates";
207 font_variant_caps, "fontVariantCaps";
208 font_variant_east_asian, "fontVariantEastAsian";
209 font_variant_ligatures, "fontVariantLigatures";
210 font_variant_numeric, "fontVariantNumeric";
211 font_variant_position, "fontVariantPosition";
212 font_variant, "fontVariant";
213 font_variation_settings, "fontVariationSettings";
214 font_weight, "fontWeight";
215 font, "font";
216 forced_color_adjust, "forcedColorAdjust";
217 gap, "gap";
218 grid_area, "gridArea";
219 grid_auto_columns, "gridAutoColumns";
220 grid_auto_flow, "gridAutoFlow";
221 grid_auto_rows, "gridAutoRows";
222 grid_column_end, "gridColumnEnd";
223 grid_column_start, "gridColumnStart";
224 grid_column, "gridColumn";
225 grid_row_end, "gridRowEnd";
226 grid_row_start, "gridRowStart";
227 grid_row, "gridRow";
228 grid_template_areas, "gridTemplateAreas";
229 grid_template_columns, "gridTemplateColumns";
230 grid_template_rows, "gridTemplateRows";
231 grid_template, "gridTemplate";
232 grid, "grid";
233 hanging_punctuation, "hangingPunctuation";
234 height, "height";
235 hyphenate_character, "hyphenateCharacter";
236 hyphens, "hyphens";
237 image_orientation, "imageOrientation";
238 image_rendering, "imageRendering";
239 image_resolution, "imageResolution";
240 initial_letter, "initialLetter";
241 inline_size, "inlineSize";
242 input_security, "inputSecurity";
243 inset_block_end, "insetBlockEnd";
244 inset_block_start, "insetBlockStart";
245 inset_block, "insetBlock";
246 inset_inline_end, "insetInlineEnd";
247 inset_inline_start, "insetInlineStart";
248 inset_inline, "insetInline";
249 inset, "inset";
250 isolation, "isolation";
251 justify_content, "justifyContent";
252 justify_items, "justifyItems";
253 justify_self, "justifySelf";
254 justify_tracks, "justifyTracks";
255 left, "left";
256 letter_spacing, "letterSpacing";
257 line_break, "lineBreak";
258 line_clamp, "lineClamp";
259 line_height_step, "lineHeightStep";
260 line_height, "lineHeight";
261 list_style_image, "listStyleImage";
262 list_style_position, "listStylePosition";
263 list_style_type, "listStyleType";
264 list_style, "listStyle";
265 margin_block_end, "marginBlockEnd";
266 margin_block_start, "marginBlockStart";
267 margin_block, "marginBlock";
268 margin_bottom, "marginBottom";
269 margin_inline_end, "marginInlineEnd";
270 margin_inline_start, "marginInlineStart";
271 margin_inline, "marginInline";
272 margin_left, "marginLeft";
273 margin_right, "marginRight";
274 margin_top, "marginTop";
275 margin, "margin";
276 mask_border_mode, "maskBorderMode";
277 mask_border_outset, "maskBorderOutset";
278 mask_border_repeat, "maskBorderRepeat";
279 mask_border_slice, "maskBorderSlice";
280 mask_border_source, "maskBorderSource";
281 mask_border_width, "maskBorderWidth";
282 mask_border, "maskBorder";
283 mask_clip, "maskClip";
284 mask_composite, "maskComposite";
285 mask_image, "maskImage";
286 mask_mode, "maskMode";
287 mask_origin, "maskOrigin";
288 mask_position, "maskPosition";
289 mask_repeat, "maskRepeat";
290 mask_size, "maskSize";
291 mask_type, "maskType";
292 mask, "mask";
293 math_style, "mathStyle";
294 max_block_size, "maxBlockSize";
295 max_height, "maxHeight";
296 max_inline_size, "maxInlineSize";
297 max_lines, "maxLines";
298 max_width, "maxWidth";
299 min_block_size, "minBlockSize";
300 min_height, "minHeight";
301 min_inline_size, "minInlineSize";
302 min_width, "minWidth";
303 mix_blend_mode, "mixBlendMode";
304 motion_distance, "motionDistance";
305 motion_path, "motionPath";
306 motion_rotation, "motionRotation";
307 motion, "motion";
308 object_fit, "objectFit";
309 object_position, "objectPosition";
310 offset_anchor, "offsetAnchor";
311 offset_distance, "offsetDistance";
312 offset_path, "offsetPath";
313 offset_rotate, "offsetRotate";
314 offset_rotation, "offsetRotation";
315 offset, "offset";
316 opacity, "opacity";
317 order, "order";
318 orphans, "orphans";
319 outline_color, "outlineColor";
320 outline_offset, "outlineOffset";
321 outline_style, "outlineStyle";
322 outline_width, "outlineWidth";
323 outline, "outline";
324 overflow_anchor, "overflowAnchor";
325 overflow_block, "overflowBlock";
326 overflow_clip_box, "overflowClipBox";
327 overflow_clip_margin, "overflowClipMargin";
328 overflow_inline, "overflowInline";
329 overflow_wrap, "overflowWrap";
330 overflow_x, "overflowX";
331 overflow_y, "overflowY";
332 overflow, "overflow";
333 overscroll_behavior_block, "overscrollBehaviorBlock";
334 overscroll_behavior_inline, "overscrollBehaviorInline";
335 overscroll_behavior_x, "overscrollBehaviorX";
336 overscroll_behavior_y, "overscrollBehaviorY";
337 overscroll_behavior, "overscrollBehavior";
338 padding_block_end, "paddingBlockEnd";
339 padding_block_start, "paddingBlockStart";
340 padding_block, "paddingBlock";
341 padding_bottom, "paddingBottom";
342 padding_inline_end, "paddingInlineEnd";
343 padding_inline_start, "paddingInlineStart";
344 padding_inline, "paddingInline";
345 padding_left, "paddingLeft";
346 padding_right, "paddingRight";
347 padding_top, "paddingTop";
348 padding, "padding";
349 page_break_after, "pageBreakAfter";
350 page_break_before, "pageBreakBefore";
351 page_break_inside, "pageBreakInside";
352 paint_order, "paintOrder";
353 perspective_origin, "perspectiveOrigin";
354 perspective, "perspective";
355 place_content, "placeContent";
356 place_items, "placeItems";
357 place_self, "placeSelf";
358 pointer_events, "pointerEvents";
359 position, "position";
360 print_color_adjust, "printColorAdjust";
361 quotes, "quotes";
362 resize, "resize";
363 right, "right";
364 rotate, "rotate";
365 row_gap, "rowGap";
366 ruby_align, "rubyAlign";
367 ruby_merge, "rubyMerge";
368 ruby_position, "rubyPosition";
369 scale, "scale";
370 scroll_behavior, "scrollBehavior";
371 scroll_margin_block_end, "scrollMarginBlockEnd";
372 scroll_margin_block_start, "scrollMarginBlockStart";
373 scroll_margin_block, "scrollMarginBlock";
374 scroll_margin_bottom, "scrollMarginBottom";
375 scroll_margin_inline_end, "scrollMarginInlineEnd";
376 scroll_margin_inline_start, "scrollMarginInlineStart";
377 scroll_margin_inline, "scrollMarginInline";
378 scroll_margin_left, "scrollMarginLeft";
379 scroll_margin_right, "scrollMarginRight";
380 scroll_margin_top, "scrollMarginTop";
381 scroll_margin, "scrollMargin";
382 scroll_padding_block_end, "scrollPaddingBlockEnd";
383 scroll_padding_block_start, "scrollPaddingBlockStart";
384 scroll_padding_block, "scrollPaddingBlock";
385 scroll_padding_bottom, "scrollPaddingBottom";
386 scroll_padding_inline_end, "scrollPaddingInlineEnd";
387 scroll_padding_inline_start, "scrollPaddingInlineStart";
388 scroll_padding_inline, "scrollPaddingInline";
389 scroll_padding_left, "scrollPaddingLeft";
390 scroll_padding_right, "scrollPaddingRight";
391 scroll_padding_top, "scrollPaddingTop";
392 scroll_padding, "scrollPadding";
393 scroll_snap_align, "scrollSnapAlign";
394 scroll_snap_margin_bottom, "scrollSnapMarginBottom";
395 scroll_snap_margin_left, "scrollSnapMarginLeft";
396 scroll_snap_margin_right, "scrollSnapMarginRight";
397 scroll_snap_margin_top, "scrollSnapMarginTop";
398 scroll_snap_margin, "scrollSnapMargin";
399 scroll_snap_stop, "scrollSnapStop";
400 scroll_snap_type, "scrollSnapType";
401 scrollbar_color, "scrollbarColor";
402 scrollbar_gutter, "scrollbarGutter";
403 scrollbar_width, "scrollbarWidth";
404 shape_image_threshold, "shapeImageThreshold";
405 shape_margin, "shapeMargin";
406 shape_outside, "shapeOutside";
407 tab_size, "tabSize";
408 table_layout, "tableLayout";
409 text_align_last, "textAlignLast";
410 text_align, "textAlign";
411 text_combine_upright, "textCombineUpright";
412 text_decoration_color, "textDecorationColor";
413 text_decoration_line, "textDecorationLine";
414 text_decoration_skip_ink, "textDecorationSkipInk";
415 text_decoration_skip, "textDecorationSkip";
416 text_decoration_style, "textDecorationStyle";
417 text_decoration_thickness, "textDecorationThickness";
418 text_decoration_width, "textDecorationWidth";
419 text_decoration, "textDecoration";
420 text_emphasis_color, "textEmphasisColor";
421 text_emphasis_position, "textEmphasisPosition";
422 text_emphasis_style, "textEmphasisStyle";
423 text_emphasis, "textEmphasis";
424 text_indent, "textIndent";
425 text_justify, "textJustify";
426 text_orientation, "textOrientation";
427 text_overflow, "textOverflow";
428 text_rendering, "textRendering";
429 text_shadow, "textShadow";
430 text_size_adjust, "textSizeAdjust";
431 text_transform, "textTransform";
432 text_underline_offset, "textUnderlineOffset";
433 text_underline_position, "textUnderlinePosition";
434 top, "top";
435 touch_action, "touchAction";
436 transform_box, "transformBox";
437 transform_origin, "transformOrigin";
438 transform_style, "transformStyle";
439 transform, "transform";
440 transition_delay, "transitionDelay";
441 transition_duration, "transitionDuration";
442 transition_property, "transitionProperty";
443 transition_timing_function, "transitionTimingFunction";
444 transition, "transition";
445 translate, "translate";
446 unicode_bidi, "unicodeBidi";
447 user_select, "userSelect";
448 vertical_align, "verticalAlign";
449 visibility, "visibility";
450 white_space, "whiteSpace";
451 widows, "widows";
452 width, "width";
453 will_change, "willChange";
454 word_break, "wordBreak";
455 word_spacing, "wordSpacing";
456 word_wrap, "wordWrap";
457 writing_mode, "writingMode";
458 z_index, "zIndex";
459 zoom, "zoom";
460
461 alignment_baseline, "alignmentBaseline";
463 baseline_shift, "baselineShift";
464 clip, "clip";
465 clip_rule, "clipRule";
466 color_interpolation, "colorInterpolation";
467 color_rendering, "colorRendering";
468 dominant_baseline, "dominantBaseline";
469 fill, "fill";
470 fill_opacity, "fillOpacity";
471 fill_rule, "fillRule";
472 flood_color, "floodColor";
473 flood_opacity, "floodOpacity";
474 glyph_orientation_vertical, "glyphOrientationVertical";
475 lighting_color, "lightingColor";
476 marker, "marker";
477 marker_end, "markerEnd";
478 marker_mid, "markerMid";
479 marker_start, "markerStart";
480 shape_rendering, "shapeRendering";
481 stop_color, "stopColor";
482 stop_opacity, "stopOpacity";
483 stroke, "stroke";
484 stroke_dasharray, "strokeDasharray";
485 stroke_dashoffset, "strokeDashoffset";
486 stroke_linecap, "strokeLinecap";
487 stroke_linejoin, "strokeLinejoin";
488 stroke_miterlimit, "strokeMiterlimit";
489 stroke_opacity, "strokeOpacity";
490 stroke_width, "strokeWidth";
491 text_anchor, "textAnchor";
492 vector_effect, "vectorEffect";
493 }
494}