Open quantuminformation opened 6 months ago
I am sorry but I didn't get what you mean by repeating css, if you mean repeating the /*css*/
I don't think there's any way around that because this is how you tell inline-html to activate and take over. If otherwise you mean repeating css code you can perhaps extract common code into separate variables and use it like so ${code}
whenever it repeats
doesn't seem to work with ternary
By doesn't work you mean it's not formatted properly or doesn't work at all? Because it seems to be highlighted in the screenshot
Firstly notice:
@quantuminformation I noticed you were using &
which is scss, not css, and changing it solved the bracket mismatching error. The second thing I solved by moving the min-width declaration to above & .text {
child rule line. But there is still something going on with the engine because the burgerPx
in the (fixed) `${burgerPx ? / scss /`` line shows up for me as an element selector on hover
@pushqrdx This might be related to #55 . But by now I think it's probably going to take more than a regex, and diving into bracket-balancing for creating "deadzones" in the css context where it swaps to JS delimited by a ${
and its balancing }
. It's apparently got to do with the parser and the specific language's delimiter characters. I did some tests with the html part and the same "something wrong, color red" happens with both angled brackets.
Notice:
@media
rule&
child rule and process the immediatly following declaration as a selector rule (min-width in the example, but can be consistently reproed).${...}
(which greatly leads me to believe this is indeed related to #55)burgerPx
shows it as an element-selectorbool
variable also shows it as an element selector.Code:
/* scss */`
${ burgerPx ?
/* css */`@media (max-width: ${burgerPx}px) { &.header-bar-mode { flex-direction: column; } }` :
/* scss */`@media (max-width: 600px) { & .text { display: none; } min-width: auto; }`
}`
/* scss */`
${ burgerPx ?
/* scss */`@media (max-width: ${burgerPx}px) { &.header-bar-mode { flex-direction: column; } }` :
/* scss */`@media (max-width: 600px) { & .text { display: none; } min-width: auto; }`
}`
/* scss */`
${ burgerPx ?
/* css */`@media (max-width: ${burgerPx}px) { &.header-bar-mode { flex-direction: column; } }` :
/* scss */`@media (max-width: 600px) { & .text { display: none; } min-width: auto; }`
}`
/* scss */`
${ burgerPx ?
/* scss */`@media (max-width: ${burgerPx}px) { &.header-bar-mode { flex-direction: column; } }` :
/* css */`@media (max-width: 600px) { & .text { display: none; } min-width: auto; }`
}`
/* html */ `${ bool ? /*html*/`<td>${value2 > value1}</td>` : `${value2 < value1}`}`
I wish webstorm could add this
also is there a way I dont have to keep repeating css like here:
doesnt seem to work with ternary's if you put it in the 2nd condition:
whole code: