Как очистить неиспользуемый 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 tailwind-css postcss purgecss

20.06.2024 04:03

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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

20.06.2024 09:28