How can I use fss to replicate this combination of selectors and combinators?

[travis-leith]

Looking through Devtools (F12) I have determined the style I need to override is this one

.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link, .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused), .dx-datagrid-rowsview .dx-row-focused.dx-data-row > tr > td:not(.dx-focused) {
    background-color: #1f8fb9;
    color: #2a2a2a;
}

fss supports combinators and selectors. Is it possible to replicate the above css so I can override the colors?

[travis-leith]

Is it fair to say that :not() is not supported? https://developer.mozilla.org/en-US/docs/Web/CSS/:not

[Bjorn-Strom]

Hello @travis-leith.

You are correct that :not is not supported yet. This is something I have been wanting to fix for a while - so I will prioritize that.

When it comes to your initial question I have not had time to really look at it yet as I am busy with work.

I will take a look at how this can be implemented with Fss as is as soon as I have time.

[travis-leith]

I have managed to narrow the scope of my issue by playing around in Devtools.

I have a grid and I am setting the font color of a cell depending on the value in the cell. To this end, fss is generating the following css

.css647538688 {
    color: limegreen;
}

But the color contrast is not great when the row is focused, so I want to also include the following

.dx-row-focused .css647538688 {
    color: white;
}

However, I don't see an obvious way to specify this in fss. For example

createFss [
        ! (Selector.Class "dx-row-focused") [ Color.white ]
    ]

generates

.css1173998819 .dx-row-focused{color:white;}

[Bjorn-Strom]

He @travis-leith

Sorry for my slow replies 🙏

First in regards to not. The reason that is has not been implemented yet us that it is a little different from the other pseudo-classes. And I had not found a way to implement the API I wanted in a good and backwards compatible way. I was able to figure out how I want it to be yesterday though. So I am going to work on that.

It does seem like you no longer need it though since you were able to more clearly find the problematic CSS. There is a feature I have been thinking about for a while - but that I have not found a good use-case for. I do think it could fix this problem of yours though.

That feature is a function called fssWithClassname. You use this normally like you would fssbut you can also specify the classname you want to use. I believe you could use this to fix your issue like this:

// This would be 'css647538688'
let someClass = fss [ ]

let contrast = fssWithClassname "dx-row-focused" [
        ! (Selector.Class someClass) [
            Color.white
        ]
    ]

This should create the CSS you need.

If you think this could solve your issues let me know which Fss flavor your are using (Fss.Fable, Fss.Feliz, or something else). And I can create a test nuget package, after work, that you can try.

[travis-leith]

Awesome! I think that would work perfectly. I am using Fss.Fable.

[Bjorn-Strom]

@travis-leith I made a pre-release version with the changes we discussed.

Try Fss.Fable 2.1.1-alpha and let me know if that fixes the issue.

[travis-leith]

Works like a charm. Thanks so much!

[Bjorn-Strom]

Lovely, I am happy that worked. I will try to get a proper release out of this sometime this evening 👍

[travis-leith]

Sadly this only works with a single rule. My code looks like

        let positive = fss [ Color.limeGreen ]
        let negative = fss [ Color.red ]
        let positiveFocused = fssWithClassname "dx-row-focused" [
                ! (Selector.Class positive) [
                Color.darkGreen
                Font.FontWeight.bold
            ]
        ]
        let negativeFocused = fssWithClassname "dx-row-focused" [
                ! (Selector.Class negative) [
                Color.darkRed
                Font.FontWeight.bold
            ]
        ]

Cells of the grid have class either positive or negative depending on the cell value. Only positiveFocused has any effect. If I comment out positiveFocused, then 'negativeFocused` kicks in.

[Bjorn-Strom]

As usual i do not have time to test anything until this evening, so the following is just a guess, but does this work?

        let positive = fss [ Color.limeGreen ]
        let negative = fss [ Color.red ]
        let focused = fssWithClassname "dx-row-focused" [
                ! (Selector.Class positive) [
                Color.darkGreen
                Font.FontWeight.bold
            ]
                ! (Selector.Class negative) [
                Color.darkRed
                Font.FontWeight.bold
            ]
        ]

[travis-leith]

Yes! and is more compact than how I had it too. Thanks again.