How to get the CSS from only classes with 1.0?

[tmikaeld]

I'm using this with 0.16 in Deno:

import { setup, strict, tw } from "https://esm.sh/twind@0.16.17";
import { virtualSheet, getStyleTagProperties } from "https://esm.sh/twind@0.16.17/server";

function normalize () {
  return '.normalize{color:#fff}'
}

export function twind (classes) {
  const sheet = virtualSheet();
  setup({
    theme: {
      fontFamily: {
        sans: ["Helvetica", "sans-serif"],
        serif: ["Times", "serif"],
      },
    },
    sheet,
    mode: strict,
  });

  const unknown = [];
  for (const item of classes) {
    try {
      tw(item);
    } catch (e) {
      const errStr = e.toString();
      console.log(errStr)
      }
    }
  }
  sheet.reset();
  return { style: normalize() + getStyleTagProperties(sheet).textContent, unknown };
}

How do i accomplish the same with 1.0?
I've tried with using the virtual sheet, but I only get nothing, I'm not sure how to replace getStyleTagProperties?

[sastan]

Almost the same: https://replit.com/@sastan/twind-css-example#index.js

import { twind as setup, virtual, cx, stringify } from 'https://esm.sh/twind/@twind/core@1.x'
import presetTailwind from 'https://esm.sh/twind/@twind/preset-tailwind@1.x'

function normalize() {
  return '.normalize{color:#fff}'
}

const tw = setup({
  presets: [presetTailwind({ disablePreflight: true })],
  theme: {
    fontFamily: {
      sans: ["Helvetica", "sans-serif"],
      serif: ["Times", "serif"],
    },
  },
}, virtual());

export function twind(...classes) {
  tw.clear();

  return {
    classNames: ['normalize', ...tw(cx(...classes)).split(' ')],
    style: normalize() + stringify(tw.target)
  }
}

console.log(twind(['underline']))

[tmikaeld]

Awesome! New version is even easier to use, love it! The idea of porting over some of UnoCSS flexibility is also a superb idea 👍

[tmikaeld]

Any way to catch non-matched classes like in 0.16?

[sastan]

There is no exception thrown to not break rendering. But in dev mode (depends on your environment, twind uses the export condition development) you can listen to the warning event. Another way maybe that unknown classes will be returned first by tw...

From the v1 changelog (not documented yet):

In the the browser a warning event is emitted on the window object and, in case there is no event listener or the event listener did not call event.preventDefault(), a warning is logged to the console.

addEventListener('warning', (event) => {
  // prevent default console.warn(`[<code>] <message>: <detail>`) logging
  event.preventDefault()

  const warning = event.detail

  // { message: '...', code: 'TWIND_INVALID_CLASS', detail: '<className>'}
  // { message: '...', code: 'TWIND_INVALID_CSS', detail: '<css>'}
  console.warn(warning)
})

In Node.js a warning is emitted using process.emitWarning.

If there is no warning event listener, the warning is printed to stderr.

(node:56338) [TWIND_INVALID_CLASS] Warning: ...

Alternatively, you can use the process.on('warning', ...) to handle warnings.

import process from 'node:process'

process.on('warning', (warning) => {
  console.warn(warning.message) // Print the warning message
  console.warn(warning.code) // 'TWIND_INVALID_CLASS' | 'TWIND_INVALID_CSS'
  console.warn(warning.detail) // '<className>' | '<css>'
})