DEV Community: Dutiyesh Salunkhe

You can create React styled components in 35 LOC

Dutiyesh Salunkhe — Tue, 02 Jul 2019 12:25:59 +0000

Have you ever wondered how styled component works under to hood?
Let's find out by building one.

Understanding styled components API 🕵️‍

import styled from 'styled-components'

const Heading = styled.h1`
    color: palevioletred;
`;

const App = () => {
    return <Heading>styled components</Heading>
}

Based on styled component syntax we can say that styled component returns a styled object with HTML tag named methods and uses Tagged Template literal.

Tagged Template is like calling a function.

greeting('Bruce');
// same as
greeting`Bruce`;

The only difference being how Tagged Template handles its arguments, where the first argument contains an array of string values.

// logging function arguments

logArguments('Bruce');
// -> Bruce

logArguments`Bruce`;
// -> ["Bruce"]

Styled component Phases 🌗

We will divide Styled component into 2 phases:

Phase 1: Creation Phase

In Creation Phase we invoke a styled component's tag named method like - h1, which returns a Functional React Component.

// App.js
const Heading = styled.h1`
    color: palevioletred;
`; // ❇️ Creation Phase


// styled-components.js
function h1(styleLiteral) {
    return () => { // ❇️ Function component
        return <h1></h1>
    }
}

Phase 2: Rendering Phase

In Rendering Phase, we render the Function component created in Phase 1.

const Heading = styled.h1`
    color: palevioletred;
`;

const App = () => {
    return <Heading /> // ❇️ Rendering Phase
}

Approaching towards "Style" part of Styled component 💄

In Creation phase we passed style to h1 function, but how can we apply it to our component without inlining it? 🤔

We will use a class selector and assign a random name.

const className = `sc-${Math.random().toString(16).substr(2, 6)}`;
// Generate class names like - sc-79a268, sc-56d898

Now we will create a function to apply style to our class and append it in our page by creating a new style tag if not present.

And to uniquely identify it from other style tags, we will assign an id of 'sc-style', so that we can use the same tag to append styles for other styled components.

function appendStyle(className, style) {
    let styleTag = document.getElementById('sc-style');

    if (!styleTag) {
        styleTag = document.createElement('style')
        styleTag.setAttribute('id', 'sc-style');
        document.getElementsByTagName('head')[0].appendChild(styleTag);
    }

    styleTag.appendChild(document.createTextNode(`.${className} { ${style} }`))
}

Combining above two steps, we get:

function h1(styleLiterals) {
    return () => {
        const className = `sc-${Math.random().toString(16).substr(2, 6)}`;
        appendStyle(className, styleLiterals[0]); // pass first item at index 0

        return <h1 className={className}></h1>
    }
}

function appendStyle(className, style) {
    let styleTag = document.getElementById('sc-style');

    if (!styleTag) {
        styleTag = document.createElement('style')
        styleTag.setAttribute('id', 'sc-style');
        document.getElementsByTagName('head')[0].appendChild(styleTag);
    }

    styleTag.appendChild(document.createTextNode(`.${className} { ${style} }`))
}

Passing text to display inside our Styled component ⚛️

In Rendering Phase we can pass data as children to our component and use props.children to render inside it.

// App.js
const App = () => {
    return <Heading>styled components</Heading> // Rendering phase
}


// styled-components.js
function h1(styleLiterals) {
    return (props) => { // ❇️ props from parent component
        return <h1>{props.children}</h1>
    }
}

We created Styled component 💅

// App.js
import styled from 'styled-components';

const Heading = styled.h1`
    color: palevioletred;
`;

const App = () => {
    return <Heading>styled components</Heading>
}


// styled-components.js
function h1(styleLiterals) {
    return (props) => {
        const className = `sc-${Math.random().toString(16).substr(2, 6)}`;
        appendStyle(className, styleLiterals[0]);

        return <h1 className={className}>{props.children}</h1>
    }
}

function appendStyle(className, style) {
    let styleTag = document.getElementById('sc-style');

    if (!styleTag) {
        styleTag = document.createElement('style')
        styleTag.setAttribute('id', 'sc-style');
        document.getElementsByTagName('head')[0].appendChild(styleTag);
    }

    styleTag.appendChild(document.createTextNode(`.${className} { ${style} }`))
}

const styled = {
    h1
}

export default styled;

Customizing Styled components with props 🎨

Let's customize our component by passing a color prop to render text in different colors.

const Heading = styled.h1`
    color: ${(props) => ${props.color}}; // Apply color from props
`;

const App = () => {
    return <Heading color="palevioletred">styled components</Heading>
}

If you notice above, we have an interpolation in our template literal.

So what happens to a function when we pass template literals with interpolations?

const username = 'Bruce';

greeting`Hello ${username}!`;
// -> ["Hello ", "!"] "Bruce"

Function will receive 2 arguments here, first will still be an array.
And second argument will be the interpolated content 'Bruce'.

Update styled component to receive interpolation content 📑

function h1(styleLiterals, propInterpolation) {
    return () => {
        return <h1></h1>
    }
}

As there can be an indefinite number of interpolation arguments, we will use the rest parameter to represent them as an array.

Our function now becomes:

function h1(styleLiterals, ...propsInterpolations) { // ❇️ with rest parameter
    return () => {
        return <h1></h1>
    }
}

Generate style with interpolation 👩‍🎨

Our function now receives 2 arguments - stringLiterals and propsInterpolations, we have to merge them to generate style.

For this, we will create a function that iterates over each item from both arrays and concatenates them one by one.

function getStyle(styleLiterals, propsInterpolations, props) {
    return styleLiterals.reduce((style, currentStyleLiteral, index) => {
        let interpolation = propsInterpolations[index] || '';

        if (typeof interpolation === 'function') { // execute functional prop
            interpolation = interpolation(props);
        }

        return `${style}${currentStyleLiteral}${interpolation}`;
    }, '');
}

Using getStyle function in our styled component:

function h1(styleLiterals, ...propsInterpolations) {
    return (props) => {
        const className = `sc-${Math.random().toString(16).substr(2, 6)}`;
        const style = getStyle(styleLiterals, propsInterpolations, props); // pass required parameters to generate style
        appendStyle(className, style);

        return <h1 className={className}>{props.children}</h1>
    }
}

Optimization time ⚡️

Have you noticed what happens when we render 2 styled component with same styling?

const Heading = styled.h1`
    color: palevioletred;
`;

const App = () => {
    return (
        <React.Fragment>
            <Heading>styled components</Heading>
            <Heading>styled components</Heading>
        </React.Fragment>
    )
}

2 classes get generated even though their styles are the same.
To reduce the duplicate code, we will use JavaScript's Map object to hold our styles with their class names in key-value pairs.

function h1(styleLiterals, ...propsInterpolations) {
    const styleMap = new Map(); // maintain a map of `style-className` pairs

    return (props) => {
        let className = '';
        const style = getStyle(styleLiterals, propsInterpolations, props);

        if (!styleMap.has(style)) { // check whether style is already present
            className = `sc-${Math.random().toString(16).substr(2, 6)}`;
            appendStyle(className, style);

            styleMap.set(style, className); // store class for a style in Map
        } else {
            className = styleMap.get(style); // reuse class for a style
        }

        return <h1 className={className}>{props.children}</h1>
    }
}

End result ✨✨

function h1(styleLiterals, ...propsInterpolations) {
    const styleMap = new Map(); // maintain a map of `style-className` pairs

    return (props) => {
        let className = '';
        const style = getStyle(styleLiterals, propsInterpolations, props);

        if (!styleMap.has(style)) { // check whether style is already present
            className = `sc-${Math.random().toString(16).substr(2, 6)}`;
            appendStyle(className, style);

            styleMap.set(style, className); // store class for a style in Map
        } else {
            className = styleMap.get(style); // reuse class for a style
        }

        return <h1 className={className}>{props.children}</h1>
    }
}

function getStyle(styleLiterals, propsInterpolations, props) {
    return styleLiterals.reduce((style, currentStyleLiteral, index) => {
        let interpolation = propsInterpolations[index] || '';

        if (typeof interpolation === 'function') { // execute functional prop
            interpolation = interpolation(props);
        }

        return `${style}${currentStyleLiteral}${interpolation}`;
    }, '');
}

function appendStyle(className, style) {
    let styleTag = document.getElementById('sc-style');

    if (!styleTag) {
        styleTag = document.createElement('style')
        styleTag.setAttribute('id', 'sc-style');
        document.getElementsByTagName('head')[0].appendChild(styleTag);
    }

    styleTag.appendChild(document.createTextNode(`.${className} { ${style} }`))
}

const styled = {
    h1
}

export default styled;

Understanding JavaScript Default Parameters - Behind the Abstraction

Dutiyesh Salunkhe — Wed, 26 Jun 2019 17:19:06 +0000

MDN describes Default parameters as:
Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed. 😕

Definition can be rephrased as:
If no value or undefined is passed to a parameter, use the default value. 😌

Before building custom Default parameters, let's get familiar with few of the terms mentioned in the definition.

Parameter

Parameter is a name given to an argument passed while invoking a function.

function greeting(username) {
  return `Hi ${username}!`;
}

greeting('Bruce'); // Hi Bruce!

In this example, parameter username is a name given to argument 'Bruce'.

👩‍🏫 Question Time: What will the function return if we do not pass any value to parameter username while invoking it?

function greeting(username) {
  return `Hi ${username}!`;
}

greeting(); // Hi undefined!

Answer: It will return Hi undefined!.

Reason: JavaScript uses undefined as a default value if we don't pass any value to a parameter.
In our case, since we did not pass any value to username parameter, JavaScript assigned it undefined value and returned Hi undefined!.

So how can we avoid undefined case?

Default value

ES6 introduced Default parameters for such scenarios.

function greeting(username = 'Anonymous') {
  return `Hi ${username}!`;
}

greeting(); // Hi Anonymous!

Now if we do not pass any value to parameter username, instead of undefined JavaScript will use 'Anonymous' value.

Let's build custom Default parameters 💪

We will need 2 things:
I. A parameters list with their values
II. A value type checker

I. A parameter list with their values 📋

JavaScript function provides a local variable named arguments object that holds all the argument values.

function greeting() {
  console.log(arguments);     // { 0: 'Bruce' }
  console.log(arguments[0]);  // 'Bruce'
}

greeting('Bruce');

arguments is an Array-like object. It holds all the argument values the function was called with, starting from index 0.
In our greeting function, since we are invoking it with argument 'Bruce', arguments object will hold it at 0th index.

II. A value type checker 🕵️

JavaScript provides a unary operator named typeof that evaluates operand's type and returns a string value.

function greeting() {
  console.log(arguments);            // { 0: 'Bruce' }
  console.log(typeof arguments[0]);  // 'string'
}

greeting('Bruce');

👩‍🏫 Question Time: What will be the type if we do not pass any value?

function greeting() {
  console.log(arguments);            // { }
  console.log(typeof arguments[0]);  // 'undefined'
}

greeting();

Answer: It will return 'undefined'.

Reason: Since we are not passing any argument value while invoking greeting function, arguments will be an empty object and JavaScript will return 'undefined' value for index 0.

Let's combine what we learned so far and start building custom Default parameters.

function greeting(username) {
  username = typeof arguments[0] !== 'undefined' ? arguments[0] : 'Anonymous';

  return `Hi ${username}!`;
}

greeting(); // Hi Anonymous!

In our greeting function, we access the first parameter's value with argument[0] and check its type using typeof operator.
If it does not evaluate to 'undefined' that means an argument was passed at index 0 while invoking greeting function and we can use that value for username, else use 'Anonymous' as a default value.

Testing our function with different inputs

function greeting(username) {
  username = typeof arguments[0] !== 'undefined' ? arguments[0] : 'Anonymous';

  return `Hi ${username}!`;
}

greeting('Bruce');      // Hi Bruce!
greeting(undefined);    // Hi Anonymous!
greeting('undefined');  // Hi undefined! (Gotcha! We are passing undefined 
                        // wrapped up in quotes as a string)

Hopefully this post was able to give you clear context on what goes behind JavaScript's Default Parameters. ❤️❤️

Follow me to get notified for next "Behind the Abstraction" post coming next week!

Cover image inspired by Wes Bos's "JavaScript functions visualized"