Migrating Less to Styled (WIP)

Introduction

Most of our current styling (CSS, whatever you want to refer to it as) is written in Less which is then compiled into CSS. As part of our migration efforts, we're moving over to use Styled Components which has many of the same capabilities of Less, but allows us to more easily add dynamic or programmatic behaviors to our styles. It also allows fairly easy encapsulation (namespacing if you will) of styles. In addition, thanks to Typescript we're able to more easily utilize our theme (get hints on what variables are available, and linting as well) as we write our styles. This will help keep us consistent and allow us to catch issues at compile time rather than run time. Also, hot reloading (yeah I know our less already hot reloads but 🤷‍♂️ )!

Bare Minimum

Compared to migrating Marionette to React, there's a lot less (😉) you need to know in order to get started. The main difficulties are going to center around the syntax for dynamic styles (things involving variables) and animations.

When it comes to basic CSS though, pretty much anything that's valid CSS syntax is valid Styled Components syntax. It also supports nesting, pretty much going with the same syntax as Less in that regard.

Less Example 1

With that in mind, let's start with a piece of Less that doesn't have any variables or animations to get the hang of it.

Here's a link to a Codepen that will allow you to play along and try things out

div {
   color: red;
}

The conversion to Styled in this case is going to be:

const MyStyledDiv = styled.div`
   color: red;
`

MyStyledDiv is a full fledged React component that you can use like any other div. The key difference being it will get an autogenerated class appended to it that contains the styles you specify.

For example, you could then utilize it like so:

const render = () => {
   return <MyStyledDiv>My text color is red.</MyStyledDiv>
}

Which basically would turn out something like this in the DOM:

<div class="sc-TOsTZ laylGZ"> 
   My text color is red.
</div>

Where those two classes are autogenerated by Styled Components and used to target the div and apply the styles you specified. Basically, Styled Components attaches a stylesheet to the page containing:

.laylGZ {
   color: red;
}

If you want to know why there's two classes for a single rule, read this. The short story is you don't need to worry though 😄 .

Less Example 2

We'll continue without variables and move into what you could do when migrating nested Less.

Here's a link to a Codepen that will let you play along and try things out!

.less-root {
   background: pink;
   padding: 10px;
   button {
      height: 100px;
      padding: 10px;
   }
}

<div class="less-root">
   <button>Press me, I'm a button</button>
</div>

Converting this can take one of two paths, I'll start with one which looks most similar to the Less.

const TestComponent = styled.div`
   background: pink;
   padding: 10px;
   button {
	height: 100px;
	padding: 10px;
   }
`
const render = () => {
   return <TestComponent>
       <button>Press me, I'm a button</button>
   </TestComponent>
}

This isn't bad depending on your intentions and how complex the nesting is, but we could also go this route: (here's the Codepen)

const TestComponent = styled.div`
   background: pink;
   padding: 10px;
`

const TestComponentButton = styled.button`
   height: 100px;
   padding: 10px;
`
const render = () => {
   return <TestComponent>
       <TestComponentButton>Press me, I'm a button</TestComponentButton>
   </TestComponent>
}