A fullstack solution for structuring TailwindCSS classnames

Yuns — Wed, 30 Aug 2023 15:12:29 +0000

After a neither long nor short time for developing Next.js + TailwindCSS app, it is so annoyed at writing TailwindCSS classnames more and more big.

A React example:

export const Demo = () => (
  <div className='flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6'>
    <div className='space-x-2 pb-8 pt-6 md:space-y-5'>
      <h1 className='text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14'>
        404
      </h1>
    </div>
    <div className='max-w-md'>
      <p className='mb-4 text-xl font-bold leading-normal md:text-2xl'>
        {`Sorry we couldn't find this page.`}
      </p>
      <p className='mb-8'>
        {`But don't worry, you can find plenty of other things on our homepage.`}
      </p>
    </div>
  </div>
)

Question: How to make the code looks more nicer?

Answer: After use the new born package tagged-classnames-free:

import { cls } from 'tagged-classnames-free'

export const Demo = () => (
  <div
    className={cls`
      flex flex-col items-start justify-start 
      md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6
    `}
  >
    <div className='space-x-2 pb-8 pt-6 md:space-y-5'>
      <h1
        className={cls`
          text-6xl font-extrabold leading-9 tracking-tight text-gray-900
          dark:text-gray-100 
          md:border-r-2 md:px-6 md:text-8xl md:leading-14 
        `}
      >
        404
      </h1>
    </div>
    <div className='max-w-md'>
      <p
        className={cls`
          mb-4 text-xl font-bold leading-normal 
          md:text-2xl
        `}
      >
        {`Sorry we couldn't find this page.`}
      </p>
      <p className='mb-8'>
        {`But don't worry, you can find plenty of other things on our homepage.`}
      </p>
    </div>
  </div>
)

cls tag based on clsx, and tw tag integrated tailwind-merge already.

Question: How to auto indent/dedent strings in tagged template if I want to wrap/unwrap tagged classnames by functions or html tags?

Answer: ESLint is a awesome tool, eslint-plugin-unicorn has a template-indent rule for us to auto indent/dedent.

It is also compatiable with prettier-plugin-tailwindcss even if write classnames by multiple lines.

Question: What is the impact on runtime performance, especially for what could have been wrote by pure strings?

Answer: There is also a new born unplugin-polish-tagged-templates for this, It can transform tagged templates without expressions into pure strings at compile time.

Try overall features on Gitpod.

Build Chrome Extension (MV3) development environment based on Vite + React

Yuns — Sun, 18 Apr 2021 10:21:17 +0000

Foreword

I have always wanted to make a bilibili barrage extension. I recently took the opportunity of researching Vite to do it. It took two days to build a Chrome Extension (MV3) development environment based on Vite + React. The core functions are as follows:

-📦️ JS packaged into a single file
-🎨 Automatically introduce CSS
-🔨 Package service worker
-🚀 Hot reload of development environment

Here is a focus on the implementation of the current hot update. Other functions are relatively simple. For details, please refer to yunslove/violet

I watched "Violet Evergarden" at bilibili, which was impressive. Just this time I planned to be a barrage extension of bilibili, and simply took the heroine's name violet 😃

Practical operation

The general process of hot update is shown in the figure below:

start up

Execute three commands simultaneously through npm run dev:

-tsc compile service worker and monitor changes
-vite compile extension
-The websocket service monitors the changes of the directory /dist after packaging

Among them, because vite build --watch has not yet been released, temporarily through custom script monitor the source code changes, and can be removed after the vite feature is released.

Hot Update

After the browser page loads the content scripts, a websocket link will be created. After receiving the request, the server will start listening to the /dist directory. The websocket service will actively initiate a notification after listening to the change of /dist.

The content scripts receive the notification that the extension needs to be updated, and trigger the event registered in the service worker by chrome.runtime.onMessage via chrome.runtime.sendMessage, which triggers chrome.runtime.reload and chrome.tabs.reload in turn to update Extension and current page. What you write is what you get without any manual intervention 🚀

Readers may have a question, why not listen for notifications from websocket directly in the service worker?

I have been thinking the same way before. The use of service workers under Manifest V3 promotes Thinking with events through chrome.runtime.onInstalledAnd chrome.runtime.onStartup to create a websocket client will be closed unexpectedly, even if the timer polling is used, it will be closed and restarted after multiple executions. Therefore, the best solution currently found is to monitor the chrome.runtime.onMessage event in the service worker.

In this way, the hot update process will only be triggered when the page loads the current Extension.

Sum Up

Since most of the current Chrome Extension versions are lower than the MV3 version, I have stepped on a lot of pits in the past two days, and I have a certain degree of understanding of browser extension development that I have not touched before. Now it is only for the Chrome Extension scenario. I will continue to improve the current scenario to complete the support for other browser extensions. Finally, it should be possible to encapsulate a tool for browser extension development.

Translate from Chinese, checkout by yunslove