5

Playing with unocss

 1 year ago
source link: https://willschenk.com/labnotes/2023/playing_with_unocss/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Playing with unocss

I stumbled upon Anthony Fu's Reimagine Atomic CSS post the other day, and his fine work on unocss.

The basic idea simply scan the HTML/whatever files for all of the classes that are used, and then generate the css based on that. This results in a much faster build time, and also smaller CSS files. And you can use the same classes that you are used to with Tailwind.

wc -c site/main.css
    3371 site/main.css

That's only 3K!

There's also a couple of other cool features. One that I think is very useful is the web fonts preset, which does some boilerplate lifting that's a bit awkward in Tailwind.

  import presetWebFonts from '@unocss/preset-web-fonts';

  const fonts = presetWebFonts({
    provider: 'google', // default provider
    fonts: {
      header: "Averia Serif Libre",
    }
  })

Lets get started on how to use it without any fancy frameworks.

live-server

First we can start up a live server with

  mkdir site
  npx live-server site

Basic page with unocss runtime

site/basic.html

  <html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <title>Base Template</title>

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">
      <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>
    </head>

    <body p-2 md:p-0 h-full>
      <header max-w-screen-lg mx-auto md:flex justify-between py-4>
        <h1 font-bold text-4xl md:inline-block>
          Basic template
        </h1>

        <ul pt-2>
          <li md:inline-block ml-4><a href="/basic.html">basic</a></li>
          <li md:inline-block ml-4><a href="/inline.html">inline</a></li>
        </ul>
      </header>

      <h2 max-w-screen-lg mx-auto font-bold text-2xl py-4>This is a page</h2>

      <p max-w-screen-lg mx-auto>I really really like it</p>

    </body>
  </html>

Generating css using watch

That's nice any easy, but lets setup our own config file, and we can add a couple of other plugins to make things easier.

uno.config.ts:

  // uno.config.ts
  import { defineConfig, presetAttributify, presetUno, presetTypography } from 'unocss'
  import presetWebFonts from '@unocss/preset-web-fonts';

  const fonts = presetWebFonts({
    provider: 'google', // default provider
    fonts: {
      header: "Averia Serif Libre",
    }
  })

  export default defineConfig({
    presets: [
      presetAttributify({ /* preset options */}),
      presetUno(),
      fonts,
      presetTypography()
      // ...custom presets
    ],
  })

Then create package.json as

  {
    "scripts": {
      "dev": "unocss \"site/**/*.html\" -o site/main.css --watch & live-server site",
      "build": "unocss \"site/**/*.html\" -o site/main.css"
    },
    "devDependencies": {
      "live-server": "^1.2.2",
      "unocss": "^0.53.4"
    }
  }

And set it up and run

  curl -o site/reset.css https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css
  npm i
  npm run dev

Now we can replace

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">
  <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>

with:

  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="main.css" />

That will give us:

site/inline.html:

  <html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <title>Base Template</title>

      <link rel="stylesheet" href="reset.css" />
      <link rel="stylesheet" href="main.css" />
    </head>

    <body p-2 md:p-0 h-full>
      <header max-w-screen-lg mx-auto md:flex justify-between py-4 font-header>
        <h1 text-4xl md:inline-block>
          Basic template
        </h1>

        <ul pt-2>
          <li md:inline-block ml-4><a href="/basic.html">basic</a></li>
          <li md:inline-block ml-4><a href="/inline.html">inline</a></li>
        </ul>
      </header>

      <h2 max-w-screen-lg mx-auto font-bold text-2xl py-4>This is a page</h2>

      <p max-w-screen-lg mx-auto>I really really like it</p>

    </body>
  </html>

References


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK