Compile error when class name begins with dash followed by number. #2907
Comments
|
You can use the following syntax: div(class="-1u") Some Content |
|
That is an option, but we would still have to rewrite a lot of code to do the migration, vs just changing a single regexp to allow class names to have numbers after a dash. That wouldn't conflict with any other pug syntax, make the templates less verbose (one of pug's main selling points), and would make some users very happy :) |
|
It does sound that it won't hurt anyone and doesn't violate any other syntax. But solving this case would be only a half measure, because technically you can use any unicode character in your HTML class name. If the syntax should be extended, it probably should allow any characters except for @ForbesLindesay @TimothyGu any thoughts? |
|
Please no. Using a dash (or other odd char) at the beginning of a class literal makes it look like there is something strange/fancy going on. Class and Id literals are what make pug so clean and readable. Allowing other characters will make it difficult to parse and understand. That being said... it looks like we allow one or two dashes at the beginning of classes now??? This is odd... seems like if we are going to allow dashes, allow infinite dashes. Allowing numbers at this point doesn't seem like a big deal. But for funky use cases like this, instead of making the project more convoluted, I think we should point people to how they can write a simple plugin for their use case: const pug = require("pug");
const extendedClassLiteralPlugin = {
lex: {
"className": function(lex) {
var tok = lex.scan(/^\.([_a-z\-0-9][_a-z0-9\-]*)/i, 'class');
if (tok) {
lex.tokens.push(tok);
lex.incrementColumn(tok.val.length);
return true;
}
}
}
}
pug.render(".-6u Test", { plugins:[extendedClassLiteralPlugin] }, (err, result) => console.log(err || result));This way, future support for these fringe cases is on them and not bogging down the Pug.js team. |
We don't want to do this because it would prevent us adding any new meaning to any special characters without a full breaking change. e.g. in the future we may want to use pug/packages/pug-lexer/index.js Line 406 in 926f7c7 var tok = this.scan(/^\.([_a-z0-9\-]*[_a-z][_a-z0-9\-]*)/i, 'class'); i.e. must have at least one letter or We'd then need to replace the two error conditions pug/packages/pug-lexer/index.js Lines 412 to 417 in 926f7c7 if (/^\.[_a-z0-9\-]+/i.test(this.input)) {
this.error('INVALID_CLASS_NAME', 'Class names must contain at least one letter or underscore.');
}If someone sends a pull request for this, along with a test case, I'd be willing to accept. |
* Allow class names to begin with single dash, 0-9, a-z, and underscore * Add test case that passes with change, fails without change Fixes pugjs#2907
* Allow class names to begin with single dash, 0-9, a-z, and underscore * Add test case that passes with change, fails without change Fixes #2907
Pug Version: 2.0.0-rc.4
Node Version: v8.9.1
Input JavaScript Values
Input Pug
.-1u Some ContentExpected HTML
Actual HTML
Additional Comments
I'm supporting an applicatin that is using https://github.com/ajlkn/skel as a grid framework, which uses classes like
6uand-6uto designate columns and offsets respectively. AFAIK those are not valid classes according to spec, but they used to work ok withjade.I'm migrating from
jadetopug, and am running into this compile error. It's pretty show-stopping, re-writing all the views to use a different grid framework would be very painful. We haven't had any rendering issues with any modern browsers due to using off-spec class names.The text was updated successfully, but these errors were encountered: