scope-string

create a random string suitable for css scoping eg. xvb0qh3

usage

npm i scope-string

or

npm i -D scope-string

const scope = require('scope-string');
scope();
// xvb0qh3

with options

const scope = require('scope-string');
scope({
	length: 10,			// default 7
	initial: "css-"		// default "x"
});
// css-rj39cq

notes:

1. The initial character(s) are included in the total string length.
2. The initial character (default "x") is needed because otherwise the first character might be a number, which would not be a valid css selector id or class.
3. At the default length of 7 (one initial character and 6 random) there are 36^6 combinations (approx 2.2 billion).

Example of real world use

Since ~css~ everything in js is all the rage these days, you could quite easily configure your build to do something like this...

const scope = require('scope-string');

const generateComponent = () => {
	const randomString = scope();
	return {
		html: `
			<section class="${randomString}">
				<div class="hero">...</div>
				<footer>
					<p>...</p>
					<span id="${randomString}-year"></span>
				</footer>
			</section>		
		`,		
		css: `
			.${randomString} .hero{
				display: flex;
				etc. etc;
			}
			.${randomString} footer{
				background: "red";
				margin: 20px;
			}
		`,
		js: `
			document.getElementById("${randomString}-year").textContent = new Date().getFullYear();
		`
	}
}

This is a very barebones simple example of how a scoping string could be used, but you probably get the general idea.