https://github.com/nucliweb/jxl-in-css
PostCSS plugin to use JXL in CSS background
https://github.com/nucliweb/jxl-in-css
Last synced: 6 days ago
JSON representation
PostCSS plugin to use JXL in CSS background
- Host: GitHub
- URL: https://github.com/nucliweb/jxl-in-css
- Owner: nucliweb
- License: mit
- Created: 2021-04-13T10:32:37.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-12-10T22:58:03.000Z (about 3 years ago)
- Last Synced: 2026-01-19T08:32:55.416Z (25 days ago)
- Language: JavaScript
- Size: 57.6 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JPEG XL in CSS
[PostCSS] plugin and tiny JS script *(150B)* to use[JPEG XL] in CSS background
With this PostCSS Plugin you can use **JPEG XL** image format in your CSS background in [Supported Browsers](#supported-browsers), and fallback with the original image.
## How works?
You add `require('jxl-in-css')` to your JS bundle and write CSS like:
```css
.logo {
width: 80px;
height: 80px;
background-image: url(logo.jpg);
}
```
The script will set `jxl` or `no-jxl` class on `` and PostCSS plugin will generate:
```css
.logo {
width: 80px;
height: 80px;
}
body.jxl .logo {
background-image: url(logo.jxl);
}
body.no-jxl .logo {
background-image: url(logo.jpg);
}
```
## Usage
### 1. Convert to JXL
Convert you images to jxl format, you can use [Squoosh], [JPEGXL.io], or take a look to the software list on [JPEGXL.info]
### 2. Install `jxl-in-css`
```sh
npm install --save-dev jxl-in-css
```
#### 2.1 Load the polyfill
Add the JS script to your client-side JS bundle:
```diff js
// CommonJS
+ require('jxl-in-css/polyfill.js')
// ES6
+ import 'jxl-in-css/polyfill.js'
```
Since JS script is very small (315B gzipped), the best way for landings
is to inline it to HTML:
```diff html
+ <%= readFile('node_modules/jxl-in-css') %>
```
You can load the script via CDN:
```diff html
+
```
#### 2.2 Load the PostCSS plugin
Check do you use PostCSS already in your bundler. You can check `postcss.config.js` in the project root, `"postcss"` section in `package.json` or `postcss` in bundle config.
If you don’t have it already, add PostCSS to your bundle:
* For webpack see [postcss-loader] docs.
* For Parcel create `postcss.config.js` file.
It already has PostCSS support.
#### Add `jxl-in-css` to PostCSS plugins
```diff js
module.exports = {
plugins: [
+ require('jxl-in-css'),
require('autoprefixer')
]
}
```
If you use CSS Modules in webpack add `modules: true` option:
```diff js
module.exports = {
plugins: [
- require(jxl-in-css'),
+ require(jxl-in-css')({ modules: true }),
require('autoprefixer')
]
}
```
## PostCSS Options
```js
module.exports = {
plugins: [
require('jxl-in-css')({ /* options */ }),
]
}
```
| Option | Description | Default Value | Type Value |
| ------ | ----------- | ------------- | ---------- |
| `modules` | Wrap classes to `:global()` to support CSS Modules. | `false` | Boolean |
| `jxlClass` | Class name for browser with jxl support. | `jxl` | String |
| `noJxlClass` | Class name for browser without jxl support. | `no-jxl` | String |
| `rename` | Get a new file name from old name, like `(oldName: string) => string`, then `url(./image.png)` → `url(./image.png.jxl)`. | | Function |
## Supported browsers
* Chrome 92+ with **Enabled JXL image format** `chrome://flags/#enable-jxl`
* Firefox 90+ with the image.jxl.enabled flag in about:config in Nightly only.
* Edge 91+ with the --enable-features=JXL runtime flag.
[PostCSS]: https://github.com/postcss/postcss
[JPEG XL]: https://jpeg.org/jpegxl/
[Squoosh]: https://squoosh.app/
[postcss-loader]: https://github.com/postcss/
[JPEGXL.io]: https://jpegxl.io/
[JPEGXL.info]: https://jpegxl.info/