How to use the purgecss.PurgeCSS function in purgecss

To help you get started, we’ve selected a few purgecss examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github gitlabhq / gitlabhq / scripts / frontend / startup_css / get_startup_css.js View on Github external
const getStartupCSS = async ({ htmlPaths, cssPaths, purgeOptions }) => {
  const content = htmlPaths.map((htmlPath) => {
    if (!fs.existsSync(htmlPath)) {
      die(`Could not find fixture "${htmlPath}". Have you run the fixtures?`);
    }

    const rawHtml = fs.readFileSync(htmlPath);
    const html = cleanHtml(rawHtml);

    return { raw: html, extension: 'html' };
  });

  const purgeCSSResult = await new PurgeCSS().purge({
    content,
    css: cssPaths,
    ...mergePurgeCSSOptions(
      {
        fontFace: true,
        variables: true,
        keyframes: true,
        blocklist: [/:hover/, /:focus/, /-webkit-/, /-moz-focusring-/, /-ms-expand/],
        safelist: {
          standard: ['brand-header-logo'],
        },
        // By default, PurgeCSS ignores special characters, but our utilities use "!"
        defaultExtractor: (x) => x.match(/[\w-!]+/g),
        extractors: [
          {
            extractor: purgeHtml,
github FullHuman / purgecss / packages / postcss-purgecss / lib / postcss-purgecss.js View on Github external
return async function(s, t) {
    const r = new purgecss.PurgeCSS(),
      o = { ...purgecss.defaultOptions, ...e };
    r.options = o;
    const { content: c, extractors: n } = o,
      u = c.filter(e => "string" == typeof e),
      p = c.filter(e => "object" == typeof e),
      i = await r.extractSelectorsFromFiles(u, n),
      l = r.extractSelectorsFromString(p, n),
      g = purgecss.mergeExtractorSelectors(i, l);
    r.walkThroughCSS(s, g),
      r.options.fontFace && r.removeUnusedFontFaces(),
      r.options.keyframes && r.removeUnusedKeyframes(),
      r.options.rejected &&
        r.selectorsRemoved.size > 0 &&
        (t.messages.push({
          type: "purgecss",
          plugin: "postcss-purgecss",
github FullHuman / purgecss / packages / purgecss-webpack-plugin / lib / purgecss-webpack-plugin.js View on Github external
const { files: n } = i,
        o = this.getAssetsToPurge(s, n);
      for (const { name: s, asset: n } of o) {
        const o = e
            .concat(
              files(i, this.options.moduleExtensions || [], t => t.resource)
            )
            .filter(t => !styleExtensions.some(e => t.endsWith(e))),
          r = { ...this.options, content: o, css: [{ raw: n.source() }] };
        "function" == typeof r.whitelist && (r.whitelist = r.whitelist()),
          "function" == typeof r.whitelistPatterns &&
            (r.whitelistPatterns = r.whitelistPatterns()),
          "function" == typeof r.whitelistPatternsChildren &&
            (r.whitelistPatternsChildren = r.whitelistPatternsChildren());
        const a = (
          await new purgecss.PurgeCSS().purge({
            content: r.content,
            css: r.css,
            defaultExtractor: r.defaultExtractor,
            extractors: r.extractors,
            fontFace: r.fontFace,
            keyframes: r.keyframes,
            output: r.output,
            rejected: r.rejected,
            variables: r.variables,
            whitelist: r.whitelist,
            whitelistPatterns: r.whitelistPatterns,
            whitelistPatternsChildren: r.whitelistPatternsChildren
          })
        )[0];
        a.rejected && (this.purgedStats[s] = a.rejected),
          (t.assets[s] = new webpackSources.ConcatSource(a.css));
github FullHuman / purgecss / packages / purgecss-webpack-plugin / lib / purgecss-webpack-plugin.esm.js View on Github external
})(t.assets, [".css"]);
    for (const i of t.chunks) {
      const { files: c } = i,
        l = this.getAssetsToPurge(a, c);
      for (const { name: a, asset: c } of l) {
        const l = o
            .concat(n(i, this.options.moduleExtensions || [], t => t.resource))
            .filter(t => !r.some(s => t.endsWith(s))),
          h = { ...this.options, content: l, css: [{ raw: c.source() }] };
        "function" == typeof h.whitelist && (h.whitelist = h.whitelist()),
          "function" == typeof h.whitelistPatterns &&
            (h.whitelistPatterns = h.whitelistPatterns()),
          "function" == typeof h.whitelistPatternsChildren &&
            (h.whitelistPatternsChildren = h.whitelistPatternsChildren());
        const u = (
          await new s().purge({
            content: h.content,
            css: h.css,
            defaultExtractor: h.defaultExtractor,
            extractors: h.extractors,
            fontFace: h.fontFace,
            keyframes: h.keyframes,
            output: h.output,
            rejected: h.rejected,
            variables: h.variables,
            whitelist: h.whitelist,
            whitelistPatterns: h.whitelistPatterns,
            whitelistPatternsChildren: h.whitelistPatternsChildren
          })
        )[0];
        u.rejected && (this.purgedStats[a] = u.rejected),
          (t.assets[a] = new e(u.css));
github FullHuman / purgecss / packages / postcss-purgecss / lib / postcss-purgecss.esm.js View on Github external
return async function(r, c) {
    const n = new s(),
      p = { ...o, ...e };
    n.options = p;
    const { content: i, extractors: m } = p,
      a = i.filter(e => "string" == typeof e),
      l = i.filter(e => "object" == typeof e),
      u = await n.extractSelectorsFromFiles(a, m),
      f = n.extractSelectorsFromString(l, m),
      g = t(u, f);
    n.walkThroughCSS(r, g),
      n.options.fontFace && n.removeUnusedFontFaces(),
      n.options.keyframes && n.removeUnusedKeyframes(),
      n.options.rejected &&
        n.selectorsRemoved.size > 0 &&
        (c.messages.push({
          type: "purgecss",
          plugin: "postcss-purgecss",
github FullHuman / purgecss / packages / purgecss-webpack-plugin / src / index.ts View on Github external
raw: asset.source()
            }
          ]
        };

        if (typeof options.whitelist === "function") {
          options.whitelist = options.whitelist();
        }
        if (typeof options.whitelistPatterns === "function") {
          options.whitelistPatterns = options.whitelistPatterns();
        }
        if (typeof options.whitelistPatternsChildren === "function") {
          options.whitelistPatternsChildren = options.whitelistPatternsChildren();
        }

        const purgecss = await new PurgeCSS().purge({
          content: options.content,
          css: options.css,
          defaultExtractor: options.defaultExtractor,
          extractors: options.extractors,
          fontFace: options.fontFace,
          keyframes: options.keyframes,
          output: options.output,
          rejected: options.rejected,
          variables: options.variables,
          whitelist: options.whitelist,
          whitelistPatterns: options.whitelistPatterns,
          whitelistPatternsChildren: options.whitelistPatternsChildren
        });
        const purged = purgecss[0];

        if (purged.rejected) {
github FullHuman / purgecss / packages / postcss-purgecss / src / index.ts View on Github external
return async function(root, result) {
    const purgeCSS = new PurgeCSS();
    const options = {
      ...defaultOptions,
      ...opts
    };
    purgeCSS.options = options;

    const { content, extractors } = options;

    const fileFormatContents = content.filter(
      o => typeof o === "string"
    ) as string[];
    const rawFormatContents = content.filter(
      o => typeof o === "object"
    ) as RawContent[];

    const cssFileSelectors = await purgeCSS.extractSelectorsFromFiles(

purgecss

Remove unused css selectors

MIT
Latest version published 1 month ago

Package Health Score

95 / 100
Full package analysis