| 1 | const path = require('path') |
| 2 | const remoteInlineCache = new Map() |
| 3 | |
| 4 | const encodeForInlining = (buffer) => |
| 5 | encodeURIComponent(buffer.toString('utf8').replace(/\n+/g, '')) |
| 6 | .replace(/%20/g, ' ') |
| 7 | .replace(/#/g, '%23') |
| 8 | |
| 9 | module.exports = { |
| 10 | plugins: { |
| 11 | 'postcss-flexbugs-fixes': {}, |
| 12 | tailwindcss: {}, |
| 13 | 'postcss-preset-env': { |
| 14 | autoprefixer: { flexbox: 'no-2009' }, |
| 15 | stage: 3, |
| 16 | features: { |
| 17 | 'custom-properties': false, |
| 18 | 'focus-visible-pseudo-class': true, |
| 19 | }, |
| 20 | }, |
| 21 | 'postcss-url': [ |
| 22 | { |
| 23 | filter: '**/assets/**/*.svg', |
| 24 | basePath: path.resolve(__dirname, './public'), |
| 25 | url: 'inline', |
| 26 | maxSize: 1, |
| 27 | }, |
| 28 | { |
| 29 | filter: ({ url }) => url.startsWith('https://icongr.am/'), |
| 30 | url: async ({ url }) => { |
| 31 | if (remoteInlineCache.has(url)) return remoteInlineCache.get(url) |
| 32 | |
| 33 | const { default: fetch } = await import('node-fetch') |
| 34 | const response = await fetch(url) |
| 35 | |
| 36 | if (!response.ok) { |
| 37 | console.error(`Failed to make inline the remote URL: ${url}`) |
| 38 | return url |
| 39 | } |
| 40 | |
| 41 | const buffer = await response.buffer() |
| 42 | const mimeType = |
| 43 | response.headers.get('Content-Type') || 'application/octet-stream' |
| 44 | |
| 45 | const svg = [ |
| 46 | `data:${mimeType};base64,${buffer.toString('base64')}`, |
| 47 | `data:${mimeType},${encodeForInlining(buffer)}`, |
| 48 | ].sort((a, b) => a.length - b.length)[0] |
| 49 | |
| 50 | remoteInlineCache.set(url, svg) |
| 51 | return svg |
| 52 | }, |
| 53 | }, |
| 54 | ], |
| 55 | [require.resolve('./css/plugin-rem')]: {}, |
| 56 | }, |
| 57 | } |
| 58 |