Как очистить неиспользуемый CSS-код попутного ветра и собственный CSS-код с учетом строки HTML

У меня есть строка HTML. Например, вот так

const html = '<html><body><div class = "card bg-red-500"></div></body></html>'

У меня также есть несколько определений CSS. В частности, Tailwind CSS и эти пользовательские определения:

.banner { color: white }

.card { color: red; }

.profile { color: blue }

Я хочу сгенерировать минимальную строку CSS для стилизации этого HTML. Т.е. Я хочу удалить все неиспользуемые классы CSS.

Мне нужно сделать это из среды Node.

Близкое решение

Я могу использовать postcss + Tailwindcss, чтобы подобраться довольно близко..

import postcss from "postcss"
import { default as tailwindcss } from "tailwindcss"

const html = '<html><body><div class = "card bg-red-500"></div></body></html>'

const promiseCSS = await postcss([
  tailwindcss({
    content: [{ raw: html }],
  }),
]).process("@tailwind utilities", { from: undefined })


console.info(promiseCSS.css)

// Output:
//
// .bg-red-500 {
//     --tw-bg-opacity: 1;
//     background-color: rgb(239 68 68 / var(--tw-bg-opacity))
// }

но, очевидно, это обрабатывает только служебные классы попутного ветра (т. е. @tailwind utilities). Таким образом, результирующая строка CSS не включает определение класса .card.

Попытка решения

Я подумал, что смогу добавить свой собственный CSS в утилиты Tailwind, и это поможет.

import postcss from "postcss"
import { default as plugin, default as tailwindcss } from "tailwindcss"

const tailwindConfig = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".banner": { color: "white" },
        ".card": { color: "red" },
        ".profile": { color: "blue" },
      })
    }),
  ],
}

const html = '<html><body><div class = "card bg-red-500"></div></body></html>'

const promiseCSS = await postcss([
  tailwindcss({
    presets: [tailwindConfig],
    content: [{ raw: html }],
  }),
]).process("@tailwind utilities", { from: undefined })

console.info(promiseCSS.css)

// Output:
//
// .bg-red-500 {
//     --tw-bg-opacity: 1;
//     background-color: rgb(239 68 68 / var(--tw-bg-opacity))
// }

но это дает тот же результат, что и раньше.


Обратите внимание, что это игрушечный пример. На самом деле мне нужно включить «пользовательский» CSS — это это.

🤔 А знаете ли вы, что...
С Node.js можно создавать приложения, работающие в режиме реального времени, такие как чаты и игры.


58
1

Ответ:

Решено

Кажется, ваш собственный плагин на самом деле не регистрируется в Tailwind. Подумайте о том, чтобы немного переработать свои import:

import { default as tailwindcss } from "tailwindcss"
import plugin from "tailwindcss/plugin.js"

Вы также можете альтернативно определить правила в исходном CSS:

const css = `@tailwind utilities;

@layer utilities {
  .banner { color: white }

  .card { color: red; }

  .profile { color: blue }
}
`

const promiseCSS = await postcss([
  tailwindcss({
    content: [{ raw: html }],
  }),
]).process(css, { from: undefined })

Пример работающего проекта StackBlitz