Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fixed css escape chars #4104

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fixed css escape chars #4104

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f5ff559
fixed css escape chars
Dxuian Aug 30, 2024
64d0527
added unit tests
Dxuian Sep 4, 2024
8cf4030
changed.md updated
Dxuian Sep 4, 2024
6ff1f64
rm redundant tests and add generality to escape chars
Dxuian Sep 11, 2024
fb7b880
fixed (look-behind)
Dxuian Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ Core Grammars:
- enh(csharp) add Contextual keywords `file`, `args`, `dynamic`, `record`, `required` and `scoped` [Alvin Joy][]
- fix(c) - Fixed hex numbers with decimals [Dxuian]
- fix(ruby) - fix `|=` operator false positives (as block arguments) [Aboobacker MK]
- fix(css) - Fixed css escape chars [Dxuian]

New Grammars:

Expand Down
8 changes: 4 additions & 4 deletions src/languages/css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function(hljs) {
const VENDOR_PREFIX = { begin: /-(webkit|moz|ms|o)-(?=[a-z])/ };
const AT_MODIFIERS = "and or not only";
const AT_PROPERTY_RE = /@-?\w[\w]*(-\w+)*/; // @-webkit-keyframes
const IDENT_RE = '[a-zA-Z-][a-zA-Z0-9_-]*';
const IDENT_RE = '[a-zA-Z-][a-zA-Z0-9_-]*(\\\\:[a-zA-Z0-9_-]+)*';
Copy link
Member

Choose a reason for hiding this comment

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

Is :: escaping supported? Or escaping any other chars? Feels like this is just handling this one edge case vs the concept of escaping in general - are there other uses?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ive managed to generalize to include other special chars in the new commit pls review

const STRINGS = [
hljs.APOS_STRING_MODE,
hljs.QUOTE_STRING_MODE
Expand All @@ -37,7 +37,7 @@ export default function(hljs) {
modes.CSS_NUMBER_MODE,
{
className: 'selector-id',
begin: /#[A-Za-z0-9_-]+/,
begin: '#' + IDENT_RE,
relevance: 0
},
{
Expand All @@ -49,8 +49,8 @@ export default function(hljs) {
{
className: 'selector-pseudo',
variants: [
{ begin: ':(' + css.PSEUDO_CLASSES.join('|') + ')' },
{ begin: ':(:)?(' + css.PSEUDO_ELEMENTS.join('|') + ')' }
{ begin: '(?<!\\\\):(' + css.PSEUDO_CLASSES.join('|') + ')'},
{ begin: '(?<!\\\\):(:)?(' + css.PSEUDO_ELEMENTS.join('|') + ')'}
Copy link
Member

Choose a reason for hiding this comment

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

These (look-behind) are problematic until we hit v12 - as this would be a breaking change to introduce to v11 since it would change which browsers v11 supports (Safari was very late to this party).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed it in the new pr

]
},
// we may actually need this (12/2020)
Expand Down
44 changes: 44 additions & 0 deletions test/markup/css/pseudo-selector.expect.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,47 @@
<span class="hljs-attribute">font-weight</span>: bold;
<span class="hljs-attribute">color</span>: brown;
}
<span class="hljs-selector-class">.dark\:hover\:bg-sky-500</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attr">--tw-bg-opacity</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">14</span> <span class="hljs-number">165</span> <span class="hljs-number">233</span> / <span class="hljs-built_in">var</span>(--tw-bg-opacity));
}

<span class="hljs-selector-class">.dark\:hover\:bg-sky-600\:text-white</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attr">--tw-bg-opacity</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">2</span> <span class="hljs-number">132</span> <span class="hljs-number">199</span> / <span class="hljs-built_in">var</span>(--tw-bg-opacity));
<span class="hljs-attribute">color</span>: white;
}

<span class="hljs-selector-class">.dark\:hover\:bg-sky-700\:text-white\:border</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attr">--tw-bg-opacity</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">3</span> <span class="hljs-number">105</span> <span class="hljs-number">161</span> / <span class="hljs-built_in">var</span>(--tw-bg-opacity));
<span class="hljs-attribute">color</span>: white;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid white;
}

<span class="hljs-selector-class">.dark\:hover\:bg-sky-800\:text-white\:border\:rounded</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attr">--tw-bg-opacity</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">7</span> <span class="hljs-number">89</span> <span class="hljs-number">133</span> / <span class="hljs-built_in">var</span>(--tw-bg-opacity));
<span class="hljs-attribute">color</span>: white;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid white;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0.5rem</span>;
}

<span class="hljs-selector-class">.dark\:hover\:bg-sky-900\:text-white\:border\:rounded\:shadow</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attr">--tw-bg-opacity</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">12</span> <span class="hljs-number">74</span> <span class="hljs-number">110</span> / <span class="hljs-built_in">var</span>(--tw-bg-opacity));
<span class="hljs-attribute">color</span>: white;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid white;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0.5rem</span>;
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">4px</span> <span class="hljs-number">6px</span> -<span class="hljs-number">1px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.1</span>), <span class="hljs-number">0</span> <span class="hljs-number">2px</span> <span class="hljs-number">4px</span> -<span class="hljs-number">1px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.06</span>);
}

<span class="hljs-selector-class">.dark\:hover\:bg-sky-950\:text-white\:border\:rounded\:shadow\:p-4</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attr">--tw-bg-opacity</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">2</span> <span class="hljs-number">32</span> <span class="hljs-number">56</span> / <span class="hljs-built_in">var</span>(--tw-bg-opacity));
<span class="hljs-attribute">color</span>: white;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid white;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0.5rem</span>;
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">4px</span> <span class="hljs-number">6px</span> -<span class="hljs-number">1px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.1</span>), <span class="hljs-number">0</span> <span class="hljs-number">2px</span> <span class="hljs-number">4px</span> -<span class="hljs-number">1px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.06</span>);
<span class="hljs-attribute">padding</span>: <span class="hljs-number">1rem</span>;
}
44 changes: 44 additions & 0 deletions test/markup/css/pseudo-selector.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,47 @@ p::first-letter {
font-weight: bold;
color: brown;
}
.dark\:hover\:bg-sky-500:hover {
Copy link
Member

Choose a reason for hiding this comment

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

Two or three (tops) of these longer examples should be sufficient unless there is some big difference here I'm missing.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

okay ill reduce the newer tc

--tw-bg-opacity: 1;
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
}

.dark\:hover\:bg-sky-600\:text-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(2 132 199 / var(--tw-bg-opacity));
color: white;
}

.dark\:hover\:bg-sky-700\:text-white\:border:hover {
--tw-bg-opacity: 1;
background-color: rgb(3 105 161 / var(--tw-bg-opacity));
color: white;
border: 1px solid white;
}

.dark\:hover\:bg-sky-800\:text-white\:border\:rounded:hover {
--tw-bg-opacity: 1;
background-color: rgb(7 89 133 / var(--tw-bg-opacity));
color: white;
border: 1px solid white;
border-radius: 0.5rem;
}

.dark\:hover\:bg-sky-900\:text-white\:border\:rounded\:shadow:hover {
--tw-bg-opacity: 1;
background-color: rgb(12 74 110 / var(--tw-bg-opacity));
color: white;
border: 1px solid white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dark\:hover\:bg-sky-950\:text-white\:border\:rounded\:shadow\:p-4:hover {
--tw-bg-opacity: 1;
background-color: rgb(2 32 56 / var(--tw-bg-opacity));
color: white;
border: 1px solid white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
padding: 1rem;
}