CSS Map
What It Does
Creates an object containing CSS properties from all connected inputs. It allows you to gather multiple CSS-related values into a single structured object.
Inputs
| Name | Description | Type | Required |
|---|---|---|---|
| (dynamic) | Any CSS property you want to include | Any | No |
Outputs
| Name | Description | Type |
|---|---|---|
| value | Object containing all CSS properties | Object |
How to Use It
- Drag the CSS Map node into your graph.
- Add inputs by right-clicking the node and selecting "Add Input".
- Name each input using valid CSS property names (e.g., "color", "font-size").
- Connect values to each input to build your CSS object.
Tips
- Only properties with connected values will appear in the output object.
- Property names should match standard CSS property names for compatibility with CSS output formats.
See Also
- CSS Box: For creating box model-specific CSS properties.
- CSS Function: For generating CSS function syntax like calc() or var().
Use Cases
- Component Styling: Collect various style properties to define a component's appearance.
- Token Organization: Group related CSS properties into a structured format for design systems.
- Style Preprocessing: Prepare multiple CSS values before applying them to style generators.