canonical.com/postcss.config.js at main · canonical/canonical.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
const purgeCSSPlugin = require("@fullhuman/postcss-purgecss");

/** @type {import('postcss-load-config').Config} */
let config = {
  plugins: [
    require("autoprefixer"),
    purgeCSSPlugin({
      content: [
        "templates/**/*.html",
        "templates/**/*.jinja",
        "static/**/*.js",
        "static/**/*.tsx",
        "webapp/**/*.py",
        "templates/**/*.md",
        "templates/**/*.py",
        "templates/**/*.xml",
        "static/*.js",
        "static/*.jsx",
        "static/*.md",
        "static/*.tsx",
        "static/*.xml",
        "node_modules/@canonical/cookie-policy/build/js/cookie-policy.js",
        "node_modules/flickity/dist/flickity.pkgd.min.js",
        "node_modules/leaflet/dist/leaflet.js",
        "node_modules/venobox/dist/venobox.min.js",
        "node_modules/vanilla-framework/templates/_macros/*.jinja"
      ],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: {
        standard: [
          /^cookie-policy/, // Cookie policy classes
          /^form/, // Form related classes
          /^p-/, // Preserve form related classes
          /^u-/, // Utility classes
          /^js-/, // JavaScript-related classes
          /^leaflet-/, // Leaflet classes for map
          /^vbox-/, // VenoBox classes
          /^venobox/, // VenoBox classes
          /^row/, // Protects Vanilla Framework rows (row, row--75-25, etc.)
          /^col/, // Protects Vanilla Framework columns (col, col-8, col-medium-4, etc.)
          /^grid-row/, // Protects modern Vanilla Framework rows (grid-row, etc.)
          /^grid-col/, // Protects modern Vanilla Framework columns (grid-col, etc.)
        ],
        greedy: [
          /^iti/, // intl-tel-input classes
          /^mktoForm/, // Marketo forms
          /^cc-/, // Cookie consent related
          /^optanon/, // Cookie consent related
          /^has-/, // State-related classes
        ],
        deep: [/form-.+/],
        keyframes: true,
        variables: true,
      },
    }),
  ],
};

module.exports = config;