Skip to content

Prefix hashes with underscores based on CSS spec #324

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

markdalgleish
Copy link
Contributor

According to the CSS spec, "identifiers cannot start with a digit, two hyphens, or a hyphen followed by a digit" (Source)

The current regular expression doesn't quite follow the spec, leading to unnecessary prefixing. I noticed this when using the [emoji] placeholder in localIdentName. Every emoji was being prefixed with an underscore, despite Glen Maddern's site proving to the world that a single emoji is a valid class name.

Also, I noticed that this prefixing behaviour was currently untested, so I've added some test cases for the new regular expression to show how it works in practice.

cc @geelen

According to the CSS spec, identifiers cannot
start with a digit, two hyphens, or a hyphen
followed by a digit.
@sokra sokra merged commit 5a9c1d1 into webpack-contrib:master Sep 2, 2016
@sokra
Copy link
Member

sokra commented Sep 2, 2016

Thanks

@markdalgleish markdalgleish deleted the prefix-hashes-with-underscores-based-on-css-spec branch September 2, 2016 13:40
@markdalgleish
Copy link
Contributor Author

@sokra are you happy for me to release this as a patch update?

@@ -12,5 +12,5 @@ module.exports = function getLocalIdent(loaderContext, localIdentName, localName
options.content = options.hashPrefix + request + "+" + localName;
localIdentName = localIdentName.replace(/\[local\]/gi, localName);
var hash = loaderUtils.interpolateName(loaderContext, localIdentName, options);
return hash.replace(new RegExp("[^a-zA-Z0-9\\-_\u00A0-\uFFFF]", "g"), "-").replace(/^([^a-zA-Z_])/, "_$1");
return hash.replace(new RegExp("[^a-zA-Z0-9\\-_\u00A0-\uFFFF]", "g"), "-").replace(/^((-?[0-9])|--)/, "_$1");
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@markdalgleish You can simplify the regex to /^(-?\d|--)/

@sokra
Copy link
Member

sokra commented Sep 5, 2016

it's a minor release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants