Attribute selectors not replaced

[noscript]

I'm trying to replace some attribute selectors, for example [class*=" cls-"] and [class^=cls-]. Tweaking ignoreAttributeSelectors doesn't make any difference.

The node-rcs-core Bootstrap example looks broken as well. Rule [class*="col-"] is unaffected while all other col-* selectors were replaced.

Before:

node-rcs-core/examples/replace/before/bootstrap.css

Lines 903 to 908 in 941a636

	.no-gutters > [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
	}
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {

After:

node-rcs-core/examples/replace/after/bootstrap.replaced.css

Lines 903 to 908 in 941a636

	.P > [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
	}
	.B, .j, .F, .I, .q, .R, .U, .z, .W, .X, .V, .J, .H, .K, .Q, .G, .Y, .Z, .te, .tt, .tn, .tr, .ti, .ts, .to, .tu, .ta, .tf, .tl, .tc, .th, .tp, .td, .tv, .tm, .tg, .ty, .tb, .tw, .tE, .tS, .tx, .tT, .tN, .tC, .tk, .tL, .tA, .tO, .tM, .t_, .tD, .tP, .tH, .tB, .tj, .tF, .tI, .tq, .tR, .tU, .tz, .tW, .tX, .tV {

[noscript]

Sorry, was meant to submit to https://github.com/JPeer264/node-rename-css-selectors but mixed up the browser tabs.

[JPeer264]

Hi @noscript, thanks for your issue.

In the examples I wanted it this way, as I ignored it as it is just used for .no-gutters. Source:

node-rcs-core/examples/replace/index.js

Lines 5 to 6 in 2a9cb39

	// do not care about attribute selectors, as it is just for '.no-gutter'
	rcs.fillLibraries(fs.readFileSync('./before/bootstrap.css', 'utf8'), { ignoreAttributeSelectors: true });

Do you have any code to reproduce this issue? Furthermore, do you have spaces within the attribute selectors: " cls-"? If so, this might be the reason why it does not work, as in this lib I include everything within these quotes.

[JPeer264]

Btw, it is ok that you posted it here, as this repository is the correct one 👍

[noscript]

I created a test repo https://github.com/noscript/rcs-attributes-test

There are two dist directories, the difference is whether ignoreAttributeSelector enabled or not.

I have some artificial style.css:

.lst-dot, .lst-dash {
  margin-left: 10px;
}
.board > [class*=" lst-"],
.board > [class^=lst-] {
  padding: 0;
}

---

With ignoreAttributeSelectors: false there is the first problem, having a single rule with unquoted attribute selector will break the rest of the code:

.r, .i {
  margin-left: 10px;
}
.s > [class*=" lst-"],
.s > [class^=lst-] {
  padding: 0;
}

I'm not sure if such syntax is valid, but some css post-processors will remove the quotes if there was no whitespace. I will make a bug report to the relevant post-processor in that case.

---

With ignoreAttributeSelectors: true there is a different problem, attribute selector values are not replaced.

.o, .u, .a, .f {
  font-family: monospace;
}
.l > [class*=" msg-"],
.l > [class^="msg-"] {
  padding: 10px;
}

Needless to say that .l > [class*=" msg-"], .l > [class^="msg-"] is a dead code, since there is no more msg-* anywhere else,

My expectation would be that rcs creates a prefix out of such selectors and does something like this:

.xo, .xu, .xa, .xf {
  font-family: monospace;
}
.l > [class*=" x"],
.l > [class^="x"] {
  padding: 10px;
}

However I'm not sure if that is easily achievable.

---

Furthermore, do you have spaces within the attribute selectors: " cls-"?

Yes, there is a space on purpose. Here is why https://stackoverflow.com/a/8588532/1005230

[JPeer264]

Thanks for this repo. I am investigating on your issue now.

[JPeer264]

Ok, the bug is the missing quote.

I'm not sure if such syntax is valid

It is still valid, but I forgot to think about that case. I'll make a fix

Needless to say that .l > [class*=" msg-"], .l > [class^="msg-"] is a dead code, since there is no more msg-* anywhere else

That is true, but I wanted to achieve that with ignoreAttributeSelectors. Maybe it is a bad option, as it produces, as you figured, dead code. I will also try to achieve your expectation out of the box.

[JPeer264]

@noscript I got this bug removed in rcs-core@1.0.5 and in rename-css-selectors@1.3.5 - if you update you should no longer facing this issue.

Regarding to your expectation for the attribute selectors. I will open another issue for that.