Questions: How to make sass prefix?

[ahmetcaglayan]

I apply the following prefix setting for 'sass'. But the output is not what I want. The '/' signs remain. And the text color is not red. Do I need to add another setting? I added the prefix setting as in the document, but I seem to be missing something.

it's not working.

prefix: "#single-spa-application:\\@kapital\\/dashboard"

output still has '/' signs.

#single-spa-application:\@kapital\/dashboard .deneme {
    color: red;
}

prefix i need

#single-spa-application:@kapital/dashboard .deneme {
    color: red;
}

but when I use it like this, SassError: SassError: Expected identifier. I get an error

[RadValentin]

@ahmetcaglayan From what I can tell you're not escaping the special characters correctly, only a single \ is needed, so the prefix option should be something like: "#single-spa-application:\@kapital\/dashboard".

Also I'm not sure that it's a good idea to use @ for class names, since it has special meaning, see at-rules. Maybe this is why SASS is complaining?

[ahmetcaglayan]

When you delete the '@' sign, the situation is still the same. This time there is a problem with the '/' sign. Even if I delete the '/' sign, the single spa's own id assignment in the html part will be like this.

[RadValentin]

@ahmetcaglayan I think the issue is that you're using characters which aren't recognised by the CSS parser. @ and : are used for at-rules and pseudo elements. \ and / aren't valid either. I tested this in plain CSS here: https://jsbin.com/mamadufolu/2/edit?html,css,output

I suggest using just the character types supported by CSS for selectors, see https://www.geeksforgeeks.org/which-characters-are-valid-in-css-class-names-selectors/

[ahmetcaglayan]

Actually it should be as you say. But it doesn't say so in the single spa document. Well, I didn't quite understand. But it automatically assigns this id for the div.

https://single-spa.js.org/docs/ecosystem-css#postcss-prefix-selector

[RadValentin]

@ahmetcaglayan I understand now, in the docs they set the prefix to:

"#single-spa-application\\:\\@org-name\\/project-name"

and then in the CSS output it will become

#single-spa-application\:\@org-name\/project-name

And because the characters are escaped, \:, \@, etc., it will work in plain CSS (https://jsbin.com/fequwemije/edit?html,css,output). The problem is that the SASS compiler doesn't like this kind of escaping.

I don't think I can help you. It looks like SASS doesn't like those escaped characters. I'd suggest using supported characters.

[RadValentin]

@ahmetcaglayan I was confused by the various escaped characters but I think it should work. You had it right initially, you just needed to escape the : character. Please try the following:

• set prefix: "#single-spa-application\\:\\@kapital\\/dashboard"
• in SASS and CSS the selector will be prefixed with #single-spa-application\:\@kapital\/dashboard
• The CSS selector above will match elements that have id="single-spa-application:@kapital/dashboard

Example here: https://codepen.io/valentin/pen/KKZLWej

[ahmetcaglayan]

sass doesn't like it. I guess the single spa needs to change the prefix it uses here.

[RadValentin]

@ahmetcaglayan Hmm, I don't see the escapes anymore, maybe you're not setting the prefix to #single-spa-application\\:\\@kapital\\/dashboard? In the original post the escapes were there. I mean the output should be #single-spa-application\:\@kapital\/dashboard (with the \)