Questions: How to make sass prefix? about postcss-prefix-selector HOT 8 CLOSED

@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/

from postcss-prefix-selector.

@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.

from postcss-prefix-selector.

@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

from postcss-prefix-selector.

@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?

from postcss-prefix-selector.

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.

from postcss-prefix-selector.

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

from postcss-prefix-selector.

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

from postcss-prefix-selector.

@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 \)

from postcss-prefix-selector.