1

I am using csspurge using the config file. I have css written as lg\:right-40 and in js it is referred as lg:right-40. in js backslash is escaped hence purgecss is not able identify all the that contain \

cssfile

.lg\:right-40 {
    right: 10rem;
}
.lg\:right-44 {
    right: 11rem;
}
.lg\:right-48 {
    right: 12rem;
}
.lg\:right-52 {
    right: 13rem;
}
.lg\:right-56 {
    right: 14rem;
}

purgecss.config.js

   const TailwindExtractor = (content) => {
  // Treat every word in the bundle as a CSS selector
  return content.match(/[\w-/\\:]+(?<!:)/g) || []
}
    new PurgeCSS().purge({
      content: ['./src/**/*.jsx', './src/**/*.js'],
      css: ['./src/login/tailwind_backup.css'],
      safelist:{
        greedy:[/\\/]
      },
      extractors: [{
        extractor: TailwindExtractor,
        extensions: ['js', 'jsx'],
      }],
      output: './src/login/tailwind.css'
    })

I want to match css classes with \ with js classes without \

Manjunath Gk
  • 412
  • 1
  • 4
  • 13
  • 2
    The problem is moot as slash characters are invalid for use in CSS class names. You should remove them. – Rory McCrossan Jan 19 '22 at 10:00
  • @RoryMcCrossan .\32xl\:inset-1\/2 classes like these need backslash – Manjunath Gk Jan 19 '22 at 10:10
  • They won't if you remove the invalid characters. Valid CSS class names can only contain a-z, - and _ – Rory McCrossan Jan 19 '22 at 10:20
  • these are from tailwind which is already used. can't remove them now – Manjunath Gk Jan 19 '22 at 10:31
  • 1
    Tailwind is broken. *[In CSS](https://www.w3.org/TR/CSS21/syndata.html#characters), identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_).* The colon is U+003A, which is below U+00A0. – ceving Jan 19 '22 at 11:00

0 Answers0