npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jxl-in-css

v0.1.0

Published

PostCSS plugin to use JXL in CSS background

Downloads

16

Readme

JPEG XL in CSS

PostCSS plugin and tiny JS script (150B) to useJPEG XL in CSS background

With this PostCSS Plugin you can use JPEG XL image format in your CSS background in Supported Browsers, and fallback with the original image.

How works?

You add require('jxl-in-css') to your JS bundle and write CSS like:

.logo {
  width: 80px;
  height: 80px;
  background-image: url(logo.jpg);
}

The script will set jxl or no-jxl class on <body> and PostCSS plugin will generate:

.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

2. Install jxl-in-css

npm install --save-dev jxl-in-css

2.1 Load the polyfill

Add the JS script to your client-side JS bundle:

// 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:

+   <script><%= readFile('node_modules/jxl-in-css') %></script>
  </head>

You can load the script via CDN:

+   <script src="https://unpkg.com/jxl-in-css/polyfill.js"></script>
  </head>

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

module.exports = {
  plugins: [
+   require('jxl-in-css'),
    require('autoprefixer')
  ]
}

If you use CSS Modules in webpack add modules: true option:

module.exports = {
  plugins: [
-   require(jxl-in-css'),
+   require(jxl-in-css')({ modules: true }),
    require('autoprefixer')
  ]
}

PostCSS Options

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 Canary 92+ with Enabled JXL image format chrome://flags/#enable-jxl