Wrap / Prepend All Selectors

It would be really handy with a “wrap/prepend” all selectors feature for apps that lives inside a global website. Adding a unique prefix for each individual element isn’t enough all time depending of the CSS complexity of your app.

Adding a namespace like below doesn’t work because the “context” class will be generated infront of the #ns which is not the result we want. Desired output would be “#ns .context .block”.

#ns {
    .block {
        prop: val;
        .context & {
            prop: val
        }
    }
}

[nex3]

@thedamon In the new module system, you can use the meta.load-css() mixin to include a stylesheet’s CSS nested within a parent selector. This won’t affect the way parent selectors in the loaded module’s CSS are resolved, so it should work how you want it to.

[sambaker]

This feature is exactly what I need. I have App A that embeds another app, App B. App B can be stand-alone or embedded in App A. I have one App B sass file that wraps all of the App B imports in a class selector so that App A can embed a chunk of App B with that class wrapped around it.

When App B is compiled to run independently it generates:

    .block {
        prop: val;
        .context & {
            prop: val
        }
    }

When it’s compiled to be embedded in App A, it generates:

#ns {
    .block {
        prop: val;
        .context & {
            prop: val
        }
    }
}

via

#ns {
  @import "appBstyles1.scss"
  @import "appBstyles2.scss"
}

But of course this breaks the ampersand operator as @tomahl mentioned.

I don’t see how to allow this with the selector functions, however if I was able to add a rule saying to add a #ns wrapper to everything from App B then every other rule in appBstyles*.scss could stay as is.