Rewrite the styled-components in ReactJS with 60 lines of JavaScript code

Thursday, 25/06/2020

Tram Ho

Scattered

styled-components is a library I really like when writing css for react, after a few days I have researched about its source, I decided to rewrite it to understand as much as possible, I feel like learning this repo so I wrote the article so I shared with everyone what I learned from it, in order to understand the code in my repo, I would say 2 new concepts to me and I must understand, if you guys If you already know, you can skip it ^^

Stylesheet

If anyone knows the stylesheet in javascript, you can skip this paragraph. In the styled-components, it is used to store styles, each style tag has 1 sheet, each sheet has many rules, 1 rule corresponds to className and attached style, eg below illustrate how to add a rule to the sheet

// get tất cả các các sheet trong app
const sheet  = document.styleSheets;
//chọn 1 rule trong sheet và add css vào rule
sheet[1].insertRule ('.classname {width : 100%;height : 100%;}', indexStyle)

// get tất cả các các sheet trong app

const sheet = document.styleSheets;

//chọn 1 rule trong sheet và add css vào rule

sheet[1].insertRule ('.classname {width : 100%;height : 100%;}', indexStyle)

Detailed link about it: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

## Tagged templates The tagged templates I mentioned here are syntax that are commonly used in styled-components

<span class="token comment">// function này chỉ return  1 array chứ tất cả các đối số của function này</span>
<span class="token keyword">const</span> <span class="token function-variable function">templateFunc</span>  <span class="token operator">=</span>  <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token operator">=&gt;</span>  args
templateFunc <span class="token template-string"><span class="token string">`
	width : 100%; 
    height : 50%;
	background : </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> props <span class="token operator">=&gt;</span> props <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">;
`</span></span>

// function này chỉ return 1 array chứ tất cả các đối số của function này

const templateFunc = ( ... args ) => args

templateFunc `

width : 100%;

height : 50%;

background : ${ props => props } ;

`

The result is that we get the parameters like this

Detailed link about it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

## Embark on writing the library I will write the ComponentStyle class to handle the creation of the stylesheet and insert the css for the component

<span class="token keyword">class</span> <span class="token class-name">ComponentStyle</span> <span class="token punctuation">{</span>
  sheet <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span>
  <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token comment">// ngay khi class khởi tạo thì mình sẽ tạo thẻ style và lưu sheet của style đó vào biến sheet trong class</span>
    <span class="token keyword">const</span> styleDom <span class="token operator">=</span>  <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">makeStyleTag</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  	<span class="token comment">// lấy sheet và save vào biến this.sheet </span>
    <span class="token keyword">this</span> <span class="token punctuation">.</span> sheet <span class="token operator">=</span>  styleDom <span class="token punctuation">.</span> sheet <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
 <span class="token function-variable function">makeStyleTag</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
 	<span class="token comment">//  function này sẽ tạo style và add thẻ style đó vào thẻ head</span>
    <span class="token keyword">const</span> style <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> <span class="token string">"style"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    style <span class="token punctuation">.</span> <span class="token function">setAttribute</span> <span class="token punctuation">(</span> <span class="token string">"data-style-duc-version"</span> <span class="token punctuation">,</span> <span class="token string">"1.0.0"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    document <span class="token punctuation">.</span> head <span class="token punctuation">.</span> <span class="token function">insertBefore</span> <span class="token punctuation">(</span> style <span class="token punctuation">,</span> document <span class="token punctuation">.</span> head <span class="token punctuation">.</span> childNodes <span class="token punctuation">[</span> document <span class="token punctuation">.</span> head <span class="token punctuation">.</span> childNodes <span class="token punctuation">.</span> length <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">return</span> style <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>
  <span class="token function">insertBefore</span> <span class="token punctuation">(</span> css <span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token comment">// function sẽ tạo ra tên các class một cách random cho các component và return về tên class đó</span>
    <span class="token keyword">const</span> className <span class="token operator">=</span> <span class="token function">uuid</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">const</span> newName <span class="token operator">=</span> <span class="token string">"style-duc-"</span> <span class="token operator">+</span> className <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">this</span> <span class="token punctuation">.</span> sheet <span class="token punctuation">.</span> <span class="token function">insertRule</span> <span class="token punctuation">(</span>
      <span class="token template-string"><span class="token string">`.</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> newName <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">{</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> css <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">}`</span></span> <span class="token punctuation">,</span>
      <span class="token keyword">this</span> <span class="token punctuation">.</span> sheet <span class="token punctuation">.</span> cssRules <span class="token punctuation">.</span> length
    <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">return</span> newName <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

class ComponentStyle {

sheet = { } ;

constructor ( ) {

// ngay khi class khởi tạo thì mình sẽ tạo thẻ style và lưu sheet của style đó vào biến sheet trong class

const styleDom = this . makeStyleTag ( ) ;

// lấy sheet và save vào biến this.sheet

this . sheet = styleDom . sheet ;

}

makeStyleTag = ( ) => {

// function này sẽ tạo style và add thẻ style đó vào thẻ head

const style = document . createElement ( "style" ) ;

style . setAttribute ( "data-style-duc-version" , "1.0.0" ) ;

document . head . insertBefore ( style , document . head . childNodes [ document . head . childNodes . length ] ) ;

return style ;

} ;

insertBefore ( css ) {

// function sẽ tạo ra tên các class một cách random cho các component và return về tên class đó

const className = uuid ( ) ;

const newName = "style-duc-" + className . slice ( 0 , 5 ) ;

this . sheet . insertRule (

`. ${ newName } { ${ css } }` ,

this . sheet . cssRules . length

) ;

return newName ;

}

The code in the core.js file is probably the most ambiguous, I think to understand the most about your code, so I should clone this repo and run it then read here, it will be much easier to understand.

<span class="token comment">// function này sẽ trực tiếp tạo ra Element React </span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">createStyledComponent</span> <span class="token punctuation">(</span> target <span class="token punctuation">,</span> css <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> WrappedStyledComponent <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span>
 <span class="token comment">// khởi taọ class ComponentStyle</span>
  <span class="token keyword">const</span> componentStyle <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ComponentStyle</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 <span class="token comment">// lưu nó vào trong  biến WrappedStyledComponent, để tí nữa ở func useStyledComponentImpl sẽ lôi ra dùng</span>
  WrappedStyledComponent <span class="token punctuation">.</span> componentStyle <span class="token operator">=</span> componentStyle <span class="token punctuation">;</span>
  WrappedStyledComponent <span class="token punctuation">.</span> target <span class="token operator">=</span> target <span class="token punctuation">;</span>
  <span class="token comment">// eslint-disable-next-line react-hooks/rules-of-hooks</span>
  <span class="token keyword">const</span> <span class="token function-variable function">forwardRef</span> <span class="token operator">=</span> <span class="token punctuation">(</span> props <span class="token punctuation">,</span> ref <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">useStyledComponentImpl</span> <span class="token punctuation">(</span> WrappedStyledComponent <span class="token punctuation">,</span> props <span class="token punctuation">,</span> ref <span class="token punctuation">,</span> css <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">const</span> Element <span class="token operator">=</span> React <span class="token punctuation">.</span> <span class="token function">forwardRef</span> <span class="token punctuation">(</span> forwardRef <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  Element <span class="token punctuation">.</span> <span class="token function-variable function">toString</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`.</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> WrappedStyledComponent <span class="token punctuation">.</span> newClassToString <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> Element <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token function-variable function">renderCss</span> <span class="token operator">=</span> <span class="token punctuation">(</span> cssRaw <span class="token punctuation">,</span> propsElement <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// function này sẽ handle việc map mảng cssRaw thành chuỗi css, mỗi một element trong mảng cssRaw thì có thể function hoặc có thể là string</span>
  <span class="token keyword">let</span> css <span class="token operator">=</span> <span class="token string">""</span> <span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">const</span> elementCss <span class="token keyword">of</span> cssRaw <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> elementCss <span class="token operator">===</span> <span class="token string">'function'</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token function">elementCss</span> <span class="token punctuation">(</span> propsElement <span class="token punctuation">)</span> <span class="token punctuation">;</span>
          css <span class="token operator">+=</span> result <span class="token punctuation">;</span>    
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> elementCss <span class="token operator">===</span> <span class="token string">"string"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> css <span class="token operator">+=</span> elementCss <span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> css <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token comment">// CORE FUNCTION </span>
<span class="token comment">// function này mình sẽ handle việc tạo ra react component, merge props , truyền ref </span>
<span class="token keyword">const</span> <span class="token function-variable function">useStyledComponentImpl</span> <span class="token operator">=</span> <span class="token punctuation">(</span> WrappedStyledComponent <span class="token punctuation">,</span> props <span class="token punctuation">,</span> ref <span class="token punctuation">,</span> css <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">//  support cho vấn đề ThemeProvider trong styled-componets</span>
  <span class="token keyword">const</span> theme <span class="token operator">=</span> React <span class="token punctuation">.</span> <span class="token function">useContext</span> <span class="token punctuation">(</span> ThemeContext <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">const</span> newProps <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> props <span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">{</span> theme <span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span>
  <span class="token keyword">const</span> newCss <span class="token operator">=</span> <span class="token function">renderCss</span> <span class="token punctuation">(</span> css <span class="token punctuation">,</span> newProps <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token comment">// insert css và get đc  className mới</span>
  <span class="token keyword">const</span> className <span class="token operator">=</span> WrappedStyledComponent <span class="token punctuation">.</span> componentStyle <span class="token punctuation">.</span> <span class="token function">insertBefore</span> <span class="token punctuation">(</span> newCss <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  WrappedStyledComponent <span class="token punctuation">.</span> newClassToString <span class="token operator">=</span> className <span class="token punctuation">;</span>
  <span class="token comment">// nối tên các className</span>
  newProps <span class="token punctuation">.</span> className <span class="token operator">=</span> <span class="token punctuation">[</span> props <span class="token punctuation">.</span> className <span class="token punctuation">,</span> className <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">join</span> <span class="token punctuation">(</span> <span class="token string">" "</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token comment">// cuối cùng là tạo react element</span>
  <span class="token keyword">return</span> React <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> WrappedStyledComponent <span class="token punctuation">.</span> target <span class="token punctuation">,</span> newProps <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

// function này sẽ trực tiếp tạo ra Element React

export default function createStyledComponent ( target , css ) {

let WrappedStyledComponent = { } ;

// khởi taọ class ComponentStyle

const componentStyle = new ComponentStyle ( ) ;

// lưu nó vào trong biến WrappedStyledComponent, để tí nữa ở func useStyledComponentImpl sẽ lôi ra dùng

WrappedStyledComponent . componentStyle = componentStyle ;

WrappedStyledComponent . target = target ;

// eslint-disable-next-line react-hooks/rules-of-hooks

const forwardRef = ( props , ref ) => useStyledComponentImpl ( WrappedStyledComponent , props , ref , css ) ;

const Element = React . forwardRef ( forwardRef ) ;

Element . toString = ( ) => {

return `. ${ WrappedStyledComponent . newClassToString } ` ;

} ;

return Element ;

}

const renderCss = ( cssRaw , propsElement ) => {

// function này sẽ handle việc map mảng cssRaw thành chuỗi css, mỗi một element trong mảng cssRaw thì có thể function hoặc có thể là string

let css = "" ;

for ( const elementCss of cssRaw ) {

const result = elementCss ( propsElement ) ;

css += result ;

}

if ( typeof elementCss === "string" ) { css += elementCss ; }

}

return css ;

} ;

// CORE FUNCTION

// function này mình sẽ handle việc tạo ra react component, merge props , truyền ref

const useStyledComponentImpl = ( WrappedStyledComponent , props , ref , css ) => {

// support cho vấn đề ThemeProvider trong styled-componets

const theme = React . useContext ( ThemeContext ) ;

const newProps = { ... props , ... { theme , ref } } ;

const newCss = renderCss ( css , newProps ) ;

// insert css và get đc className mới

const className = WrappedStyledComponent . componentStyle . insertBefore ( newCss ) ;

WrappedStyledComponent . newClassToString = className ;

// nối tên các className

newProps . className = [ props . className , className ] . join ( " " ) ;

// cuối cùng là tạo react element

return React . createElement ( WrappedStyledComponent . target , newProps ) ;

} ;

Finally, the code in the index.js file, is the file that this star will import it whenever using styled-components

<span class="token comment">// domElements là một mảng chứa các thẻ trong html  , domElements = ['a,', 'div', 'section','svg', ....], </span>
<span class="token comment">//kỹ hơn thì các bạn vào repo của mình xem, vì nó dài nên mình ko trích vào đây</span>
<span class="token keyword">import</span> domElements <span class="token keyword">from</span> <span class="token string">'./utils/domElements'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> createStyledComponent <span class="token keyword">from</span> <span class="token string">'./core'</span>
<span class="token keyword">import</span> css <span class="token keyword">from</span> <span class="token string">'./utils/css'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createContext <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> ThemeContext  <span class="token operator">=</span> <span class="token function">createContext</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> 
<span class="token keyword">export</span> <span class="token keyword">const</span> ThemeProvider <span class="token operator">=</span> ThemeContext <span class="token punctuation">.</span> Provider 
<span class="token keyword">const</span> <span class="token function-variable function">styled</span>  <span class="token operator">=</span> <span class="token punctuation">(</span> tag <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span>  <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">createStyledComponent</span> <span class="token punctuation">(</span> tag <span class="token punctuation">,</span> <span class="token function">css</span> <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
domElements <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> domElement <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token comment">// đoạn này mình gán thể này để tí nữa mọi người có thể dùng như thế này : styled.div` ...  `</span>
    styled <span class="token punctuation">[</span> domElement <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">styled</span> <span class="token punctuation">(</span> domElement <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> styled

// domElements là một mảng chứa các thẻ trong html , domElements = ['a,', 'div', 'section','svg', ....],

//kỹ hơn thì các bạn vào repo của mình xem, vì nó dài nên mình ko trích vào đây

import domElements from './utils/domElements' ;

import createStyledComponent from './core'

import css from './utils/css' ;

import { createContext } from 'react'

export const ThemeContext = createContext ( { } )

export const ThemeProvider = ThemeContext . Provider

const styled = ( tag ) => {

return ( ... args ) => createStyledComponent ( tag , css ( ... args ) ) ;

}

domElements . forEach ( domElement => {

// đoạn này mình gán thể này để tí nữa mọi người có thể dùng như thế này : styled.div` ... `

styled [ domElement ] = styled ( domElement ) ;

} ) ;

export default styled

And okay, you can import your fake styled-componets to use like a real library =)))) You can go straight to the sandbox link to see and demo code https://codesandbox.io/embed/github/ducga1998/rewrite-styled-components/tree/master/?fontsize=14&hidenavigation=1&theme=dark

Conclusion

Hope everyone will find it interesting through my article, thank you guys for reading till here:)) Repo: https://github.com/ducga1998/rewrite-styled-components

Share the news now

Source : Viblo

Rewrite the styled-components in ReactJS with 60 lines of JavaScript code

Scattered

Stylesheet

Conclusion

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers