ctxhou/postcss-hash-classname

PostCSS plugin to append hash string to your css class name.

postcss-hash-classname's Issues

A larger idea

CSS modules has the idea of generating unique class names (like this package) and integrating with webpack and browserify. You might want to contribute there https://github.com/css-modules

fix multi class declare

.a .b .c {
    ...
}

=>

.a .b .c-dfdfji1 {
   ...
}

bug

dot in JSON file

Why output JSO files contains dot in class name?

module.exports = {
  foo: ".foo-sdijhfdsifj1"
}

With this dot I can’t just use JSON in React template:

import styles from 'style.css.json';

export default function Logo() {
    return <div class={ style.foo }></div>;
}

fix concat class declare

.sdfsd.sdfsdf.sdf{
    ...
}

Hashes for keyframes

Maybe we also need hashes for keyframes too. To have better isolation.

"outputName" property not flexible enough

In the case when processing multiple source files in the same directory, there is no way to differentiate the output .js/.json filename per source file.
Because of this, how ever the output .js/.json file happens to be named, multiple files generated for multiple source files in the same directory will end up overwriting each-other.

For example, say we have 3 .css files in same directory:

ls styles/
output: styleA.css, styleB.css, styleC.css

... and then run the plugin:

gulp.src(['./styles/*.css'])
.pipe(
    postcss(    
      [ require('postcss-hash-classname')({ outputName: 'style' }) ]
    )
)

... all 3 .css files will generate output of same name (style.js) and will end up overwriting each-other:

ls styles/
output: styleA.css, styleB.css, styleC.css., style.js

The "outputName" property, defining the output .js/.json file's filename should offer some mechanism to dynamically set the output filename based off of the source file's filename.

---

I'm proposing some solutions here: PR #10 and PR #11

fix pseudo class declare

bug:

.yo:before {
  ...
}

become

.yo:before-sdfsdsdf {
   ...
}

add custom prefix / suffix or default name

Send PR to PostCSS docs/plugins.md

add path to the hash string generator

purpose: to get more unique hash