Fixed css selectors specificity

[almaz-khan]

My attempt to fix #1277

[codecov-io]

Codecov Report

Merging #3475 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #3475   +/-   ##
=======================================
  Coverage   50.25%   50.25%           
=======================================
  Files           1        1           
  Lines         197      197           
=======================================
  Hits           99       99           
  Misses         98       98

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b9f1484...fe05099. Read the comment docs.

[tanhauhau]

Looking great!

I was wondering, the root cause of the problem is because for some case, all the selectors are not raised by the same amount of specificity:

  div.svelte-xyz div div span.svelte-xyz {  /* <- +2 in class specificity */
    color: red;
    font-size: 2em;
    font-family: 'Comic Sans MS';
  }
  .foo.svelte-xyz {  /* <- +1 in class specificity */
    color: green;
  }

which causes the specificity changed.

so instead of double-up the specificity indiscriminately, a better fix is to make sure all the encapsulated css specificity is raised by the same amount:

  div.svelte-xyz div div span.svelte-xyz {  /* <- +2 in class specificity */
    color: red;
    font-size: 2em;
    font-family: 'Comic Sans MS';
  }
  .foo.svelte-xyz.svelte-xyz {  /* <- +1 in class specificity, add 1 more to match the class specificity */
    color: green;
  }

no need to double up because all of selector specificity are raised by the same amount:

span.svelte-xyz {  /* <- +1 in class specificity */
    color: red;
    font-size: 2em;
    font-family: 'Comic Sans MS';
}
.foo.svelte-xyz {  /* <- +1 in class specificity */
    color: green;
}

[almaz-khan]

@tanhauhau thank you for the feedback. Sounds reasonable, will try to implement it

[tanhauhau]

@almaz-khan how is it? need any help?

[tanhauhau]

@almaz-khan thanks for the help, i've opened another PR #4146 for the change

[tanhauhau]

Fixed in #4146