styled-components-engine-simplified.js

// component props mock
const properties = {
  color: 'red',
  large: true
};

// curried function
const styled = (props) => (strings, ...args) => {
  return strings.map((string, i) => {
    const correspondingItem = args[i];
  
    switch(typeof correspondingItem) {
      case 'function': 
        return string + correspondingItem(props);
      case 'undefined':
        return string;
      default:
        return string + correspondingItem;
    }
  }).join('');
}

const styles = styled(properties)`
  width: 10px;
  height: 10px;
  background-color: ${props => props.color};
  font-size: ${props => props.large ? 20 : 14}px;
  color: white;
`;

console.log(styles);
/*
"
  width: 10px;
  height: 10px;
  background-color: red;
  font-size: 20px;
  color: white;
"
*/