purgecss-custom-extractor
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.4 • Public • Published

    A tool to easily create custom extractors for purgecss.

    Install

    npm i purgecss-custom-extractor

    Usage

    Accepts regex as a RegExp or a string with it ('\w+', '/\w+/g') First argument can be a regex or an array of regex and match processor or a list with a mix of both.

    const purgeCss = new Purgecss({
      content: ['**/*.html'],
      css: ['**/*.css'],
      extractors: [{
          // 'g' flag will be enforced.
          extractor: Extractor.custom(/[a-zA-Z0-9\-_]+/),
          extensions: ['html']
        }]
    })

    By default purgecss treats every word in text as potential selector. But what if you're using some selectors that contain a non standard characters, like in TailwindCSS framework (w-1/2, hover:bg-blue). Or your code contains a lot of static text, then you can get lots of selectors you don't really use. You can create a simple regular expression to only keep selectors that are mentioned in class attribute of html tags. If you pass an array of [regex, matchProcessor] then each match will go through that passed function.

    // getting all the tags with class attribute
    // taking first group in each match that contains
    // class list and splitting it by ' '
    Extractor.custom([ /<[\w]+.*?class="(.*?)".*?>/mg, m => m[1].split(' ') ])

    If you want you can get rid of html comments <!-- --> to ignore class names in commented code. To do this you can define contentProcessor and remove html comments before looking for matches.

    // Extractor.regex.comment() == /<!--([\s\S]*?)-->/mg
    Extractor.custom({
      regex: [ /<[\w]+.*?class="(.*?)".*?>/mg, m => m[1].split(' ') ],
      contentProcessor: c => c.replace(Extractor.regex.comment(), '')
    })

    You can also trim text to a content of a specific html tag. This also can be useful when working with VueJS single file components, you can isolate <template> tag and look for matches only there.

    Extractor.custom({
      regex: [ /<[\w]+.*?class="(.*?)".*?>/mg, m => m[1].split(' ') ],
      contentProcessor: content => {
        // generate regexp for lazy template tag
        let regex = Extractor.regex.lazyTag('template')
        let match = regex.exec(content)
        // if match found use second group for tags content
        // for reference see api -> regex
        let res = match ? match[2] : content
        return res
      }
    })

    API

    custom(regex | {regex, matchProcessor, contentProcessor})

    Function to create custom extractor

    First argument can be either of these:

    • regex: a regex, array of regex and match processor or a mixed list of both
      custom(regex);
      custom([regex, eachMatch]);
      custom([
        [regex, eachMatch],
        [regex],
        regex
      ]);
      custom({regex, matchProcessor, contentProcessor});
    • opts: object with options:
      • regex: see above
      • matchProcessor: [optional] will receive result of each match and will return processed value, can return string or array of strings (m => m[1])
      • contentProcessor: [optional] will receive content before looking for matches (c => c.toLowerCase())
      • returns: extractor object for purgecss

    matchAll(re, text, matchProcessor)

    Function to get all the matches from given string

    • re: RegExp or string with it ('\w+', '/\w+/g')
    • text: text to match in
    • matchProcessor: [optional] will receive result of each match and will return processed value, can return string or array of strings (m => m[1])
    • returns: array of all the matched strings

    regex

    Object containing methods to create predefined regular expressions.

    • simple(): returns regex for simple css selector (/[a-zA-Z0-9\-_]+/g)
    • extended(): returns regex for css selector with : and \ characters (/[a-zA-Z0-9\-_:\/]+/g) such css selectors are being used in some frameworks, like TailwindCSS
    • lazyTag(tagName): returns regex to match multiline html tag with it's content (/<div(.*?)>([\s\S]*?)<\/divs*>/mg) group 1 - attributes, group 2 - content
    • greedyTag(tagName): same as above but greedy for content group (/<div(.*?)>([\s\S]*)<\/divs*>/mg)
    • comment(): returns regex to match html comments (/<!--([\s\S]*?)-->/mg)

    whitelist

    Object containing whitelist presets

    • htmltags: array of html tag names

    simple()

    Predefined Extractor with regex.simple().

    () => custom({regex: regex.simple()})

    extended()

    Predefined Extractor with regex.extended().

    () => custom({regex: regex.extended()})

    Install

    npm i purgecss-custom-extractor

    DownloadsWeekly Downloads

    5

    Version

    0.2.4

    License

    ISC

    Unpacked Size

    14 kB

    Total Files

    5

    Last publish

    Collaborators

    • n1kk