const appendUnit = (value, unit) => (
  value ? `${value}${unit}` : '0'
);

const mapStringTemplateToGetter = (value) => {
  if (typeof value === 'string') {
    const [key, unit] = value.split(':');
    return unit
      ? props => appendUnit(props[key], unit)
      : props => props[key];
  }
  return value;
};

const withStyledShortcuts = styled => (
  (strings, ...values) => {
    const newValues = values.map(mapStringTemplateToGetter);
    return styled(strings, ...newValues);
  }
);

const withStyledShortcutsFunction = styled => (...args) => (
  withStyledShortcuts(styled(...args))
);

const wrapStyled = (styled) => {
  const styledShortcuts = withStyledShortcutsFunction(styled); // styled(Component)

  Object.keys(styled).forEach((key) => {
    if (typeof styled[key] === 'function' && styled[key].attrs) { // styled.div
      styledShortcuts[key] = withStyledShortcuts(styled[key]);
      styledShortcuts[key].attrs = withStyledShortcutsFunction(styled[key].attrs);
    } else {
      styledShortcuts[key] = styled[key];
    }
  });

  return styledShortcuts;
};

export default wrapStyled;

@@ -65,24 +65,217 @@
 %60 : '0'%0A);%0A%0A
+const getPropValue = (obj, keys) =%3E %7B%0A  const %5Bkey, balance%5D = keys.split(/%5C.(.+)/);%0A  const value = obj%5Bkey%5D;%0A  if (balance) %7B%0A    return getPropValue(value, balance);%0A  %7D%0A  return value;%0A%7D;%0A%0A
 const mapStr
@@ -430,26 +430,40 @@
 endUnit(
+getPropValue(
 props
-%5Bkey%5D
+, key)
 , unit)%0A
@@ -483,18 +483,32 @@
  =%3E 
+getPropValue(
 props
-%5Bkey%5D
+, key)
 ;%0A  

Add dotted notation key support (ie. themes)