Enable Flex declarations

colosseum/declaration.py

@@ -1,5 +1,4 @@
-from . import engine as css_engine
-from . import parser
+from . import engine as css_engine, parser
 from .constants import ( # noqa
  ALIGN_CONTENT_CHOICES, ALIGN_ITEMS_CHOICES, ALIGN_SELF_CHOICES, AUTO,
  BACKGROUND_COLOR_CHOICES, BORDER_COLLAPSE_CHOICES, BORDER_COLOR_CHOICES,
@@ -15,16 +14,19 @@
  NOWRAP, ORDER_CHOICES, ORPHANS_CHOICES, OUTLINE_COLOR_CHOICES,
  OUTLINE_STYLE_CHOICES, OUTLINE_WIDTH_CHOICES, OVERFLOW_CHOICES,
  PADDING_CHOICES, PAGE_BREAK_AFTER_CHOICES, PAGE_BREAK_BEFORE_CHOICES,
- PAGE_BREAK_INSIDE_CHOICES, POSITION_CHOICES, QUOTES_CHOICES, ROW,
- SEPARATE, SHOW, SIZE_CHOICES, STATIC, STRETCH, TABLE_LAYOUT_CHOICES,
+ PAGE_BREAK_INSIDE_CHOICES, POSITION_CHOICES, QUOTES_CHOICES, ROW, SEPARATE,
+ SHOW, SIZE_CHOICES, STATIC, STRETCH, TABLE_LAYOUT_CHOICES,
  TEXT_ALIGN_CHOICES, TEXT_DECORATION_CHOICES, TEXT_INDENT_CHOICES,
  TEXT_TRANSFORM_CHOICES, TOP, TRANSPARENT, UNICODE_BIDI_CHOICES,
  VISIBILITY_CHOICES, VISIBLE, WHITE_SPACE_CHOICES, WIDOWS_CHOICES,
  WORD_SPACING_CHOICES, Z_INDEX_CHOICES, OtherProperty,
  TextAlignInitialValue, default,
 )
 from .exceptions import ValidationError
-from .wrappers import Border, BorderBottom, BorderLeft, BorderRight, BorderTop, Outline
+from .wrappers import ( # noqa
+ Border, BorderBottom, BorderLeft, BorderRight, BorderTop, Flex, FlexFlow,
+ Outline
+)
 
 _CSS_PROPERTIES = set()
 
@@ -424,36 +426,36 @@ def __init__(self, **style):
 
  # 5. Ordering and orientation ########################################
  # 5.1 Flex flow direction
- # flex_direction = validated_property('flex_direction', choices=FLEX_DIRECTION_CHOICES, initial=ROW)
+ flex_direction = validated_property('flex_direction', choices=FLEX_DIRECTION_CHOICES, initial=ROW)
 
  # 5.2 Flex line wrapping
- # flex_wrap = validated_property('flex_wrap', choices=FLEX_WRAP_CHOICES, initial=NOWRAP)
+ flex_wrap = validated_property('flex_wrap', choices=FLEX_WRAP_CHOICES, initial=NOWRAP)
 
  # 5.3 Flex direction and wrap
- # flex_flow =
+ flex_flow = validated_shorthand_property('flex_flow', parser=parser.flex_flow, wrapper=FlexFlow)
 
  # 5.4 Display order
- # order = validated_property('order', choices=ORDER_CHOICES, initial=0)
+ order = validated_property('order', choices=ORDER_CHOICES, initial=0)
 
  # 7. Flexibility #####################################################
  # 7.2 Components of flexibility
- # flex_grow = validated_property('flex_grow', choices=FLEX_GROW_CHOICES, initial=0)
- # flex_shrink = validated_property('flex_shrink', choices=FLEX_SHRINK_CHOICES, initial=1)
- # flex_basis = validated_property('flex_basis', choices=FLEX_BASIS_CHOICES, initial=AUTO)
+ flex_grow = validated_property('flex_grow', choices=FLEX_GROW_CHOICES, initial=0)
+ flex_shrink = validated_property('flex_shrink', choices=FLEX_SHRINK_CHOICES, initial=1)
+ flex_basis = validated_property('flex_basis', choices=FLEX_BASIS_CHOICES, initial=AUTO)
 
  # 7.1 The 'flex' shorthand
- # flex =
+ flex = validated_shorthand_property('flex', parser=parser.flex, wrapper=Flex)
 
  # 8. Alignment #######################################################
  # 8.2 Axis alignment
- # justify_content = validated_property('justify_content', choices=JUSTIFY_CONTENT_CHOICES, initial=FLEX_START)
+ justify_content = validated_property('justify_content', choices=JUSTIFY_CONTENT_CHOICES, initial=FLEX_START)
 
  # 8.3 Cros-axis alignment
- # align_items = validated_property('align_items', choices=ALIGN_ITEMS_CHOICES, initial=STRETCH)
- # align_self = validated_property('align_self', choices=ALIGN_SELF_CHOICES, initial=AUTO)
+ align_items = validated_property('align_items', choices=ALIGN_ITEMS_CHOICES, initial=STRETCH)
+ align_self = validated_property('align_self', choices=ALIGN_SELF_CHOICES, initial=AUTO)
 
  # 8.4 Packing flex lines
- # align_content = validated_property('align_content', choices=ALIGN_CONTENT_CHOICES, initial=STRETCH)
+ align_content = validated_property('align_content', choices=ALIGN_CONTENT_CHOICES, initial=STRETCH)
 
  ######################################################################
  # Grid properties

colosseum/parser.py

@@ -369,3 +369,128 @@ def border_bottom(value):
 def border_top(value):
  """Parse border string into a dictionary of outline properties."""
  return border(value, direction='top')
+
+
+##############################################################################
+# Flex Flow
+##############################################################################
+def _parse_flex_flow_property_part(value, flex_flow_dict):
+ """Parse flex_flow shorthand property part for known properties."""
+ from .constants import FLEX_DIRECTION_CHOICES, FLEX_WRAP_CHOICES
+
+ property_validators = {
+ 'flex_direction': FLEX_DIRECTION_CHOICES,
+ 'flex_wrap': FLEX_WRAP_CHOICES,
+ }
+
+ for property_name, choices in property_validators.items():
+ try:
+ value = choices.validate(value)
+ except (ValueError, ValidationError):
+ continue
+
+ if property_name in flex_flow_dict:
+ raise ValueError('Invalid duplicated property!')
+
+ flex_flow_dict[property_name] = value
+ return flex_flow_dict
+
+ raise ValueError('Flex flow value "{value}" not valid!'.format(value=value))
+
+
+def flex_flow(value):
+ """
+ Parse flex flow string into a dictionary of properties.
+
+ The font CSS property is a shorthand for flex-wrap and flex-direction.
+
+ Reference:
+ - https://www.w3.org/TR/css-flexbox-1/#flex-flow-property
+ """
+ if value:
+ if isinstance(value, str):
+ values = [val.strip() for val in value.split()]
+ elif isinstance(value, Sequence):
+ values = value
+ else:
+ raise ValueError('Unknown flex flow %s ' % value)
+ else:
+ raise ValueError('Unknown flex flow %s ' % value)
+
+ # We iteratively split by the first left hand space found and try to validate if that part
+ # is a valid <flex-wrap> or <flex-direction> (which can come in any order)
+
+ # We use this dictionary to store parsed values and check that values properties are not
+ # duplicated
+ flex_flow_dict = {}
+ for idx, part in enumerate(values):
+ if idx > 1:
+ # Flex flow can have a maximum of 2 parts
+ raise ValueError('Flex flow property shorthand contains too many parts!')
+
+ flex_flow_dict = _parse_flex_flow_property_part(part, flex_flow_dict)
+
+ return flex_flow_dict
+
+
+##############################################################################
+# Flex
+##############################################################################
+def _parse_flex_property_part(value, flex_dict):
+ """Parse flex shorthand property part for known properties."""
+ from .constants import FLEX_GROW_CHOICES, FLEX_SHRINK_CHOICES, FLEX_BASIS_CHOICES
+
+ property_validators = {
+ 'flex_grow': FLEX_GROW_CHOICES,
+ 'flex_shrink': FLEX_SHRINK_CHOICES,
+ 'flex_basis': FLEX_BASIS_CHOICES,
+ }
+
+ for property_name, choices in property_validators.items():
+ try:
+ value = choices.validate(value)
+ except (ValueError, ValidationError):
+ continue
+
+ if property_name in flex_dict:
+ raise ValueError('Invalid duplicated property!')
+
+ flex_dict[property_name] = value
+ return flex_dict
+
+ raise ValueError('Flex value "{value}" not valid!'.format(value=value))
+
+
+def flex(value):
+ """
+ Parse flex string into a dictionary of properties.
+
+ The font CSS property is a shorthand for flex-grow, flex-shrink and flex-basis.
+
+ Reference:
+ - https://www.w3.org/TR/css-flexbox-1/#flex-property
+ """
+ if value:
+ if isinstance(value, str):
+ values = [val.strip() for val in value.split()]
+ elif isinstance(value, Sequence):
+ values = value
+ else:
+ raise ValueError('Unknown flex flow %s ' % value)
+ else:
+ raise ValueError('Unknown flex flow %s ' % value)
+
+ # We iteratively split by the first left hand space found and try to validate if that part
+ # is a valid <flex-grow> or <flex-shrink> or <flex-basis> (which can come in any order)
+
+ # We use this dictionary to store parsed values and check that values properties are not
+ # duplicated
+ flex_dict = {}
+ for idx, part in enumerate(values):
+ if idx > 2:
+ # Flex can have a maximum of 3 parts
+ raise ValueError('Flex property shorthand contains too many parts!')
+
+ flex_dict = _parse_flex_property_part(part, flex_dict)
+
+ return flex_dict

colosseum/wrappers.py

@@ -114,7 +114,7 @@ def __repr__(self):
 
  def __str__(self):
  parts = []
- for key, value in self.to_dict().items():
+ for __, value in self.to_dict().items():
  parts.append(str(value))
 
  return ' '.join(parts)
@@ -151,3 +151,14 @@ class BorderLeft(Shorthand):
 
 class Border(Shorthand):
  VALID_KEYS = ['border_width', 'border_style', 'border_color']
+
+
+##############################################################################
+# Flex
+##############################################################################
+class FlexFlow(Shorthand):
+ VALID_KEYS = ['flex_direction', 'flex_wrap']
+
+
+class Flex(Shorthand):
+ VALID_KEYS = ['flex_grow', 'flex_shrink', 'flex_basis']