DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’»

DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Extending our CSS-in-JS to support style-component syntax
Late Night Coder
Late Night Coder

Posted on

Extending our CSS-in-JS to support style-component syntax

In the previous post, we made our css emotion like function and in this blog post, we are going to extend our css function to support the following style-components syntax.

const Button = styled('button')(
  {
    backgroundColor:  "blue",
    color: "white"
  }
)
Enter fullscreen mode Exit fullscreen mode

A few things to note when exploring the API are:

// On breaking into parts: 
const Button = // <-- Part: 3
styled('button') // <-- Part: 1
({ backgroundColor: 'blue' }) // <-- Part: 2

Enter fullscreen mode Exit fullscreen mode
  • Part 1: The styled function takes the tagName that has to be created i.e
 styled('button') <-- 1

// is equivalent to

<button>
Enter fullscreen mode Exit fullscreen mode
  • Part 2: The styled(tagName) returns a function that accepts style-object which will be used to style this tagName element.
({ backgroundColor: "blue" }) <-- Part 2

// is converted to 

css({ backgroundColor: "blue" }) 

// and passed to the component as

<button className={css(...)} />
Enter fullscreen mode Exit fullscreen mode
  • The complete call returns a React component Button that renders a button with a given style.

Rendering a button using style-component like syntax

From the above points, we can write a rough husk of our styled function

// Part 1: styled('button'): element of type tagName to render
function styled(tagName) { 
  // Part 2: style('button')({ color: 'white' }) takes in the style object and applies these styles to `tagName=button` component

  return function applyStyles(styleObject) { 
      // Part 3: `Button` react component 
      return function Component(props) { 
          // ...styling and element creation... 
          // Mark: 1
      }
  }
}
Enter fullscreen mode Exit fullscreen mode

Now in place Mark: 1 we need to do the following:

  • Create an element using React.createElement of type tagName
  • Pass style-object into css function to generate name, as props may already contain some className so compose these className together.
// continue from Mark: 1

const clonedProps = clone(props);
// a copy of props is required as by default react makes props immutable
// and if we want to modify any props we need to make a copy for our use

// compute a className for styleObject
const generatedClassName = css(styleObject);

// compose className 
const className = generatedClassName + props.className ? + ` ${props.className}` : '';

// reassign composed className
clonedProps.className = className;

// create element of type `tagName` with props = `clonedProps` and `style=generateClassName`
const element = React.createElement(tagName, clonedProps);

// The `element` is of type `tagName` and of `styles=styleObject` this is one we want to render

return element;
Enter fullscreen mode Exit fullscreen mode

That is what the style-components version of our CSS-in-JS library looks like. clone function can be as simple as:

const clone = (obj) => Object.assign({}, obj);
Enter fullscreen mode Exit fullscreen mode

More reads on the CSS-in-JS:

Top comments (0)

Classic DEV Post:

caching

Web Caching Explained by Buying Milk at the Supermarket