wingsuit-designsystem / wingsuit

Twig for Storybook
GNU General Public License v2.0
91 stars 16 forks source link

feat(presets): add imagemin preset #177

Closed iuscare closed 3 years ago

iuscare commented 3 years ago

This preset compresses images (gif, png, svg, jpeg) and generates webP variants out of it. Following prop is exposed to be used in the wingsuit.config.yml

Prop Type Desc
webpEnabled {Boolean | default: true} Generate webP variants of images

Example configuration:

const namespaces = require('./source/default/namespaces');

module.exports = {
  presets: [
    '@wingsuit-designsystem/preset-tailwind2',
    '@wingsuit-designsystem/preset-postcss8',
    '@wingsuit-designsystem/preset-imagemin',
  ],
  parameters: {
    imagemin: {
      webpEnabled: false,
    },
  },
  designSystems: {
    default: {
      namespaces,
    },
  },
};

When webpEnabled is set to true, webP variants will also be generated in development mode to ensure webP can also be used within wingsuit while developing. Further optimizations of images only run in production mode. A .cache folder will be created at the root level of the application to speed up further production builds.