UnoCSS Starter Theme - UnoCSS/Vite Setup

Posted | Updated
Project
UnoCSS Starter Theme
Tags
#Theming

Recreate theme with UnoCSS built with Vite.

Create theme

Start by generating a theme from starterkit_theme with the drupal core script.

core/scripts/drupal generate-theme THEMENAME

This will create a copy of the starterkit_theme, with your new name.

Using the starterkit theme gives some good default templates and css.

This strategy of beginning with an updated copy of templates is better than the old pattern of using a base theme.

Add UnoCSS/Vite

Within the new theme directory, create a vite project and install unocss.

npm create vite .

npm i -D unocss

I used vanilla js, no typescript.

Now you can run the vite dev server.

npm run dev

Open the link it shows to see the default index.html file.

You can edit this code, the main.js, and style.css and instantly see your changes in the browser.

Enable UnoCSS by following the vite setup instructions.

Test it by putting bg-green on the body in index.html.

Vite with UnoCSS screenshot

Integrate theme

Vite module

Install and enable the Vite module.

This looks for a manifest.json file from vite and transforms theme library paths to the built version.

Vite needs to run where it's accessible by both the server and browser.

It's best to run it inside a container like DDEV.

Configure $settings['vite']['devServerUrl'] = VITE_URL in your local settings file.

Enable in all theme libraries and components in your THEME.info.yml file.

vite:
  enableInAllLibraries: true
  enableInAllComponents: true

Configure vite to use unocss, create manifest.json, and clear the output directory on build.

Also configure output to preserve file names.

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
  build: {
    manifest: true,
    emptyOutDir: true,
    
    rollupOptions: {
      output: {
        entryFileNames: `[name].js`,
        assetFileNames: `[name].[ext]`,
      },

...

Global library

Create directories for /libraries/global.

Create /libraries/global/base.css file.

Add @unocss; to the file. This will print the unocss styles.

Configure vite to include css/js files in top level library directories.

*This is so that files in sub directories are only included by importing into a parent file, which is imported in the theme and not compiled separately.

build: {
  rollupOptions: {
    input: [
      ...globSync('libraries/*/*.{css,js}')
    ],

Create the global library in THEME_NAME.libraries.yml.

global:
  css:
    base:
      libraries/global/base.css: {}

Include the library globally in THEME_NAME.info.yml.

libraries:
  - THEME_NAME/global

Configure unocss to look for classes used in /templates subdirectories.

export default defineConfig({
  presets: [
    presetUno()
  ],
  content: {
    filesystem: [
      'templates/**/*.twig'
    ]
  },
})

Test it out by adding bg-green to .layout-container in /templates/layout/page.html.twig.

Now you should be able to run npm run build, clear your cache, and see the green background.

Component libraries

Starterkit provides some component css libraries in /css/components.

Some of these are included in the base library, and the rest are individual libraries.

See THEME_NAME.libraries.yml.

Create /libraries/global/component, and move the base component files into here.

Create /libraries/global/component.css and import the files.

Add this to the global library.

global:
  css:
    component:
      libraries/global/component.css: { weight: -10 }

Create /libraries/components directory, and move the remaining files into here.

Find and replace css/components to libraries/components in the libraries file.

dialog:
  version: VERSION
  css:
    component:
      libraries/components/dialog.css:
        weight: -10
dropbutton:
  version: VERSION
  css:
    component:
      libraries/components/dropbutton.css:
        weight: -10
file:
  version: VERSION
  css:
    component:
      libraries/components/file.css:
        weight: -10

...

Run npm run build.

You should see base.css, component.css, and all the component files in /libraries/components.

Clear the cache and check for missing files in the network inspector.

Modules
Vite
Articles
Drupal Theme With Vite And UnoCSS In Lando