CSS Types
Framework-agnostic utils to work with typed CSS styles in Haxe. Used in material-ui and react-css.
Use css.Properties to create a style object:
var styles:css.Properties = {
position: Relative,
textAlign: Center,
color: 'blue',
padding: [0, "2em"],
margin: [10, "auto"]
};Enum abstracts have been added to multiple properties, helping with completion and to avoid typos.
I would like to progressively add documentation on properties and enum abstract values to further help with IDE integration, but that will come later.
Support for non-standard props, and CSS variables
Use quoted fields to add non-standard fields:
var styles:css.Properties = {
width: 300,
display: "-webkit-box",
'-webkit-box-orient': 'vertical',
'-webkit-line-clamp': 3,
overflow: Hidden
};Or to declare/update CSS variables:
var styles:css.Properties = {
'--myVar': 'test'
}
Simplify use with import.hx
Add this to import.hx to help working with this lib:
import css.Properties;
import css.GlobalValue;
import css.GlobalValue.Var;This will allow you to do:
var styles:Properties = {
textAlign: Inherit,
padding: Initial,
fontSize: Var('myVar')
};Export to plain CSS string
var styles:Properties = {
textAlign: Inherit,
padding: Initial,
margin: [0, "auto", "1em"],
'--myVar': '42px',
fontSize: Var('myVar')
};
trace(styles.toCSS());Will render:
text-align: inherit;
padding: initial;
margin: 0px auto 1em;
--myVar: 42px;
font-size: var(--myVar);
