selector-to-hash

The selector-to-hash is easy to hash HTML and CSS selectors.

⚠ This is incomplete and we recommend that you do not use it.

Description

This converts the class to hash and allows for a scoped CSS with no duplicates.

Currently, only the class selector is supported.

before

<div class="test">
  <p class="text-center">selectorToHash</p>
</div>

.test {
  width: 300px;
  background: #ccc;
}
.text-center {
  text-align: center;
}

after

<div class="h-aaaa1111">
  <p class="h-bbbb2222">selectorToHash</p>
</div>

.h-aaaa1111 {
  width: 300px;
  background: #ccc;
}
.h-bbbb2222 {
  text-align: center;
}

Usage

Install

$ yarn add selector-to-hash # or npm install selector-to-hash

ES2015 modules (Node.js and Browser)

import { selectorToHash } from 'selector-to-hash'

const html =
`
<div class="test">selectorToHash</div>
`

const css =
`
.test {
  color: blue;
}
`

selectorToHash(html, css)
/* 
{
  html:
  `
  <div class="h-aaaa1111">selectorToHash</div>
  `,
  css:
  `
  .h-aaaa1111 {
    color: blue;
  }
  `
}
*/ 

commonJS (Node.js and Browser)

const selectorToHash = require("selector-to-hash").selectorToHash;

selectorToHash(html, css)
/*
{
  html: '',
  css:  '',
}
*/

Example

open test code