https://github.com/aeyoll/postcss-imageset-type

PostCSS plugin for adding image-set type to background-images.
https://github.com/aeyoll/postcss-imageset-type

image-set postcss

Last synced: 3 days ago
JSON representation

PostCSS plugin for adding image-set type to background-images.

• Host: GitHub
• URL: https://github.com/aeyoll/postcss-imageset-type
• Owner: aeyoll
• License: mit
• Created: 2021-10-03T13:41:27.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-16T15:53:36.000Z (about 3 years ago)
• Last Synced: 2024-12-15T12:38:41.596Z (8 days ago)
• Topics: image-set, postcss
• Language: JavaScript
• Homepage:
• Size: 144 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Imageset Type

[PostCSS](https://github.com/postcss/postcss) plugin for adding image-set type to background-images.

Input:

```css

.foo {

  background-image: url('img/logo.jpg');

}

```

Output:

```css

.foo {

  background-image: url('img/logo.jpg'); // Fallback for browser not supporting image-set

  background-image: image-set(

    'logo.avif' type('image/avif'),

    'logo.webp' type('image/webp'),

    'logo.jpg' type('image/jpeg')

  );

}

```

⚠ This plugin does **NOT** convert your images to avif or webp.

## Usage

**Step 1:** Install plugin:

```sh

npm install --save-dev postcss postcss-imageset-type

```

**Step 2:** Check you project for existed PostCSS config: `postcss.config.js` in the project root, `"postcss"` section in `package.json` or `postcss` in bundle config.

If you do not use PostCSS, add it according to [official docs] and set this plugin in settings.

**Step 3:** Add the plugin to plugins list:

```diff

module.exports = {

  plugins: [

+   require('postcss-imageset-type'),

    require('autoprefixer')

  ]

}

```

[official docs]: https://github.com/postcss/postcss#usage

## Settings

| Option      | Default | Description                           |

| ----------- | ------- | ------------------------------------- |

| **useAvif** | true    | Include the avif version in image-set |

| **useWebp** | true    | Include the webp version in image-set |