A new proposal for importing from NPM packages in Sass
UI libraries like Vuetify and Bootstrap
make it easy to extend their themes by providing
Sass source files with their NPM packages.
Now, Sass is requesting feedback on
a simpler way to import those libraries
into your Sass styles with e.g. @use "pkg:bootstrap".
Many UI libraries provide Sass source code alongside JavaScript in a Node.js package, so that users can customize package styles or themes. There hasn’t been an easy way to specify that a file to be imported is from an installed package, so build tools have provided a variety of ways to import from a package and define where packages are installed.
This has meant that switching build tools might result in unexpected gotchas, or that many more potential paths need to be checked to see if a file exists at that location.
The Node Package Importer will allow users
to specify with a pkg: URL
that an import is in a Node.js package
installed alongside their source code.
@use "pkg:vuetify";When a Node Package Importer is added to the importers for a compilation,
this directs Sass to find a Node.js module called vuetify,
and import the default Sass file defined by the vuetify package.
I’m excited by what this provides library authors – this makes it much more straightforward to expose Sass source files, and to expect that users can import those files, regardless of their setup.
It also allows library authors to take advantage of package entry points, so they can specify exactly which files are exposed, and at what paths.
For instance, an author could expose the file at
./src/sass/themes/_dark.scss in a way that would allow
someone using the package to simply write @use "pkg:my_package/dark".
This also uses conditional exports, so package authors can specify a Sass default entry point that is different from their JavaScript entry point.
I look forward to this feature shipping, and making integration easier for both package authors and users.
So, you have a site that you want to build or redesign. Maybe you have a few core colors in mind, and you’re thinking about how to quickly implement a theme based on those colors. Baseline features can help!
<dialog> and popover
Elements and windows that pop up on the screen are one of the most common patterns on the web. With use cases spanning from alerts and brief forms requesting data, to the now ubiquitous cookie settings prompt, these layered UI patterns are used frequently by developers.
From image sharing sites to online stores, image galleries are a common pattern on the web. Images can be very data heavy, and loading images can make the page take a long time to load. In addition, users have high expectations around the usability of galleries, so it’s common to…