Add support for case-insensitive attribute selectors

[murrayju]

According to Mozilla:

[attr operator value i]
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

This appears not to be supported by Less currently, and results in a compiler error.

expected ']' got 'i'

[seven-phases-max]

Oh, no: changing labels since it's not in CSS3 (just a CSS4 draft).

[murrayju]

Yep, it is in working draft, but browsers seem to support it already (tested in Chrome 55 and Firefox 51).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[demaier]

Was there any resolution for this? Haven't found a way to use case-insensitive with LESS yet.

a[href$=".pdf" i] { ... }

Thanks!

[calvinjuarez]

For reference: https://caniuse.com/#feat=css-case-insensitive

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ccoenen]

activity!

[demaier]

Activity 2!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ccoenen]

yeah... well... this is still missing as far as i can tell.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[matthew-dean]

@ccoenen @demaier Feel free to open a PR! ^_^

[seanCodes]

@matthew-dean I’d be happy to take a shot at this but I’ve never touched the codebase before so I’d need a little guidance. Would you be able to point me some files that might handle this?

[matthew-dean]

@seanCodes Let me know a time you might be on Gitter chat? https://gitter.im/less/less.js

[seanCodes]

@matthew-dean you free around 5 PM PST?

[parasg1999]

Hey, is it still up for grabs?

[matthew-dean]

@parasg1999 Currently, yes, unless @seanCodes is still into looking at it.

[seanCodes]

@parasg1999 @matthew-dean Yeah, sorry to say life got busy and I wasn’t able to make much progress on this one. ☹️ If you’re interested it’s all yours! 👍

[silverwind]

This should probably be classified as a bug, it breaks compatibility with CSS.

[jf-zens]

I’d be happy to take a shot at this but I’ve never touched the codebase before so I’d need a little guidance. Would you be able to point me some files that might handle this?

[seanCodes]

@jf-zens Based on my conversation with @matthew-dean the steps are pretty straight-forward:

1. Start with parser.js, and adjust the attribute parser:

   less.js/packages/less/src/less/parser/parser.js

   Lines 1401 to 1421 in b37922c

   	attribute: function () {
   	if (!parserInput.$char('[')) { return; }
   	const entities = this.entities;
   	let key;
   	let val;
   	let op;
   	if (!(key = entities.variableCurly())) {
   	key = expect(/^(?:[_A-Za-z0-9-\*]*\|)?(?:[_A-Za-z0-9-]|\\.)+/);
   	}
   	op = parserInput.$re(/^[|~*$^]?=/);
   	if (op) {
   	val = entities.quoted() || parserInput.$re(/^[0-9]+%/) || parserInput.$re(/^[\w-]+/) || entities.variableCurly();
   	}
   	expectChar(']');
   	return new(tree.Attribute)(key, op, val);
   	},

2. Update the tree node (attribute.js) to to handle the value and output it correctly
3. Add tests to verify that the case-sensitivity modifiers parse correctly

Just take care to follow the CSS attribute-case spec in your implementation and you’ll be good to go. 👍🏽

[bharathks005]

Hi Team, I want to contribute this project. Shall I start to fix this issue?

[iChenLei]

@bharathks005 PRs welcome

[bharathks005]

If I'm wrong correct me! I guess, This is the replicate issue no #3027. need to fix the case insensitively issue [I / i]