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

react-dynamic-css-plugin

v1.2.0

Published

Webpack plugin to transform dynamic react class names to short prefixed and obfuscated classes at runtime

Downloads

26

Readme

react-dynamic-css-plugin

Webpack plugin to transform dynamic react class names to short prefixed and obfuscated classes at runtime

Example:

Format to add a prefix and obfuscate the class names:

"pf_[md4:hash:base64:5]";

The dynamic nature means that runtime generated classes get transformed

Input:

<MyComponent className={["my-component", `is-disabled_${disabled}`].join()} />

Evaluated:

<MyComponent className={"my-component is-disabled_true"} />

Output:

<div class="pf_Xscyf pf_LfRuA"></div>
.pf_Xscyf.pf_LfRuA {
	//Styles
}

Installation

npm install react-dynamic-css-plugin --save-dev

Usage

webpack.config.js

const path = require("path");

const ReactDynamicCssPlugin = require("react-dynamic-css-plugin");

module.exports = {
	target: "web",
	entry: {
		main: "./src/index.jsx"
	},
	output: {
		path: path.join(__dirname, "build"),
		filename: `js/[name].min.js`,
		chunkFilename: "js/[name].min.js"
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				resolve: {
					extensions: [".js", ".jsx"]
				},
				use: {
					loader: "babel-loader",
					options: {
						presets: ["@babel/preset-env", "@babel/preset-react"]
					}
				}
			},
			{
				test: /\.(css)$/,
				use: [
					{
						loader: "css-loader"
					}
				]
			}
		]
	},
	plugins: [
		new ReactDynamicCssPlugin({
			enabled: true,
			entryName: "main",
			localIdentName: "myPrefix_[md4:hash:base64:5]",
			attributes: /^(class)$/,
			exclusionTags: /(path)/i,
			exclusionValues: /^(css|sc|icon)-/i,
			scope: ""
		})
	]
};

Options

  • enabled | Boolean | Default: true | If false, the plugin will not run
  • entryName | String | Default: undefined | The name of the entry point to inject the plugin. If undefined will default to the first entry
  • localIdentName | String | Default: "[md4:hash:base64:5]" | The format of the generated class names as [(algorithm):hash:(digest):(length)]
  • attributes | RegExp | Default: /^(class)$/ | Regex for HTML attribute names to transform their value
  • exclusionTags | RegExp | Default: /(path)/i | Regex for HTML tag names to exclude from transformations
  • exclusionValues | RegExp | Default: /^(css|sc|icon)-/i | Regex for HTML attribute values to exclude from transformations
  • scope | String | Default: "" | Prefixes the window.setAttributeDynamic method with the scope string

Note: The exclusionValues default excludes class names with the following prefixes. This is because they are commonly generated by other libraries and should not be transformed.

  • "css-" which is the emotion default
  • "sc-" which is the styled-components default
  • "icon-" which is the the standard for icon classes

Mechanism

  1. The plugin sets localIdentName and getLocalIdent in the css-loader options
  2. The plugin replaces setAttribute in react-dom with a custom function that transforms the class names at runtime
  3. The plugin injects the custom setAttributeDynamic function into the entry point of the bundle