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 🙏

© 2026 – Pkg Stats / Ryan Hefner

x-style-loader

v0.2.0

Published

style loader module for webpack

Downloads

6

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

lorrylockielorrylockie

Keywords

Readme

global-style-loader

这是一个webpack loader， 完全基于style-loader进行二次修改。

背景问题

由于在部分业务中， 一个页面可能存在大量的基于webpack打包后的JS文件，如果每个JavaScript文件都打包了CSS到文件中

那么style-loader将css添加到dom的JavaScript实现逻辑大约有300多行，这就会造成大量重复的函数实现

使用此loader， 可以将style loader中添加css到内联的style函数代码缩小到40行左右，极大减少这部分的代码体积

原理

此loader完全基于 style-loader, 基于style-loader将其中的代码尽可能复用『全局函数』

  1. createStyleElement、getHeadElement、isOldIE等等函数定义都改为类似window.StyleLoader.isOldIE 这样的一个函数调用，而非真正实现
  2. 将所有style-loader用到的各种函数添加到类似window.StyleLoader上，并且在页面全局提前引入

使用

  1. 与style-loader的使用，完全一样
  2. 将window.js 提前在页面引入