Using emotionJs with Vite

Ajit Singh Kamal — Mon, 15 Mar 2021 00:02:58 +0000

Disclaimer: the post is now quite old. Vite has a dedicated react plugin which you can easily configure now to get the intended outcome. The comment section has better snippets to help you :)

Vite is the next cool thing everyone's talking about. For the uninitiated, it's a tool that provides a dev server with a blazingly fast refresh(HMR) speed and comes loaded with the Rollup module bundler for generating highly optimized builds.

Announcing Vite 2.0

Evan You ・ Feb 16 '21

#javascript #webdev #vite

Most of you would already be familiar with EmotionJs - a very popular CSS-in-JS library. It comes with a react flavor which provides a css prop that greatly enhances the overall developer experience of writing styles in your react component.

An example from the official docs

However, every time we need to use this very convenient CSS prop, we would need to add emotion's custom JSX pragma on the very top of our jsx component.

/** @jsx jsx */
import { jsx } from '@emotion/react'

If you are planning to give Vite a shot - The good news is that you don't need to do any additional tinkering. Emotion will work without any break when using the above approach. But, there is a far better way, with which we can simply avoid importing this chunk of import in all our JSX files.

To do that - you'd need to update the esbuild options in your project's vite.config file.

import { defineConfig } from 'vite';


// https://vitejs.dev/config/

export default defineConfig({
   plugins: [...],
   esbuild: {
     jsxFactory: `jsx`,
     jsxInject: `import { jsx } from '@emotion/react'`,
   }
   ...
});

Vite uses esbuild under the hood for compilation.

jsxInject simply set esbuild's --inject transformation option and auto imports the provided module in all .jsx files.
jsxFactory overrides the default React.creatElement with emotionsjsx` factory function.

And, that's it. You can now use emotion in all your jsx components by default.

If you want you can also import the css function along with jsx to avoid it importing later in your components to construct serialized style objects.

jsxInject: `import {jsx, css} from '@emotion/react'`

Explaining the difference between an Array and an Object in Javascript with a Rick and Morty analogy.

Ajit Singh Kamal — Sat, 30 May 2020 19:59:20 +0000

An Object is a Morty. Every universe has its own version of Morty. There's lizard Morty, lawyer Morty, fat Morty, evil Morty, and so on.
So, if you are an omnipresent creator and you want to create a new Morty in one of the infinite timelines, you would simply do

const Morty = {};

Cool, we just created a personality-less piece of crap. Every Object can have their own personality which sets them apart. These traits can be expressed as property and methods.
So, for a Morty these properties can be eyes, nose, limbs. The evil Morty has one eye, the lizard Morty has a tail, and the mutant Morty, well... you get the gist.

const Morty = {
  eyes: 2,
  hammerForHead: false,
};

Similar to properties which defines the traits, an object's method defines the behavior. So, for a Morty,

const Morty = {
  eyes: 2,
  hammerForHead: false,
  ...,
  panic: function() {
      // console.log('find Rick for help')
  }
}

You see, when creating a Morty with an objects, we can play around with the possibilities. An object is pretty flexible.

Now, suppose Rick wants an army of robot Mortys. So he decides to build a robot Morty maker machine with these traits.

const Morty = {
    eyes: 2,
    hand: 2,
    tail: 0 
 }

Now as you see, the possibilities you can have for the kind of Morty reduces drastically from infinite to a fixed set because Rick's machine can only possibly make robot Mortys of a certain type. Each morty must have their eye at the proper position, their heads at their designated place, their tails between their legs. Basically, everything must go to their properly indexed position for the machine to build up a Morty.

So, if the eyes are assembled first, then the limbs, and so on and Rick being the lazy smartass as always just do this,

 const BotMorty = {
     0: 2,
     1: 2,
     2: 0,
 }

Also, none of these robot Mortys have free will. Rick predefined their behavior and these Morty can only do so. To make this process easy, Rick can create this in this form and the machine would assign 2 to zeroeth position, 1 to first, and 2 to second position.

const BotMorty = [ 2, 2, 0 ];

That's it, an array is also an object secretly but a special one. Its properties are defined as indexes. You can put anything in these indexes and can work with it using the methods it already provides.

Forem: Ajit Singh Kamal

Using emotionJs with Vite

Announcing Vite 2.0

Evan You ・ Feb 16 '21

Explaining the difference between an Array and an Object in Javascript with a Rick and Morty analogy.