handling css prefixing

[defunctzombie]

For discussion, assume that .module represents a css class which is the name of the module.

The issue: The reason we want to prefix css rules is to prevent leaking them into the global css namespace. A widget author should be free (although maybe not encouraged) to style all of the p tags in their widget with p { ... }. If they do this, we need to make sure other elements on the page are not affected.

Simple prefix flaw: Blind prefixing of all rules in a css file with .module as a parent class means that you would need to have a "container" element and could not style the root directly. This makes it impossible to have widgets that are just tr, li, or even avoid adding useless tags just to style something.

Poposed solution: Detect if the developer has already properly namespaced their rules. I have boiled this down to the following checks. If any of them are true, then we know a rule has been properly namespaced.

.module already exists parent

.module h1 { ... }

.module exists in a set of class right after an element

h1.module { }

Note that the following is not valid

h1 .module {}

.module exists in the first set of classes

.foo.bar.module {}
.module.foo.bar {}

The following is not ok

.foo.bar .module {}

[Raynos]

That seems to work for me.

The problem is what about non packages and local widgets. Do I prefix with file name?

[defunctzombie]

Nope, unless the widget is something from node_modules with a module name it would not be prefixed. So if you used @require for a local file, that would not be modified. Only widgets are namespaced. It is up to you to handle your own files.

[Raynos]

That makes sense. I did want to use something to avoid namespace collisions locally but that's out of scope.