Специальные символы и PurgeCSS не работают должным образом

Question

Использование PurgeCSS вместе с Laravel Mix в не-Laravel проекте.

Все работает хорошо, но я хочу использовать некоторые специальные не CSS-символы в моих адаптивных служебных классах, но PurgeCSS удаляет их, даже если они присутствуют в разметке..

Мой пример класса будет:

<div class="u<sm:hidden"></div>

В CSS это записывается как:

.u\<sm\:hidden {}

PurgeCSS не имеет проблемы с символом двоеточия, как показано нижекласс действует нормально:

.u-sm\:hidden {}

Как я могу заставить эту работу работать как положено?

Спасибо

Answer 1

Таким образом, я столкнулся с той же проблемой, и я немного покопался и нашел здесь решение https://lancecore.com/building-our-sites/.

Я решил это, используя собственный экстрактор для Purgecss и в этом экстракторе записал выражение регулярного выраженияэто правильно соответствует способу создания адаптивных классов в tailwindcss.

Теперь, вот мой файл postcss.config.js, где произошла вся эта магия:

const purgecss = require('@fullhuman/postcss-purgecss')

class TailwindExtractor {
    static extract(content) {
      return content.match(/[A-z0-9-:\/]+/g)
    }
}

module.exports = {
    plugins: [
        require('tailwindcss')('./tailwind.js'),
        require('autoprefixer'),
        purgecss({
            content: [
                './pages/**/*.vue',
                './layouts/**/*.vue',
                './components/**/*.vue'
        ],
        extractors: [{
            extractor: TailwindExtractor,
            extensions: ['vue']
        }
      ],
      whitelist: ['html', 'body']
    })
  ]
}