Namespace naming convention Do's and Dont's

[hansgfixed]

Pascal Case of course but what about nesting like 'MyPcf.Foo.Bar'. Somehow my css doesn't get applied. Is this by design or a bug?

[HemantG]

quick tested it on the test control and I was able to see the style apppied in the debug harness.

.hello.world\.test

{

font-family: 'SegoeUI-Semibold', 'Segoe UI Semibold', 'Segoe UI Regular', 'Segoe UI';

}

Where do you see the error, in the app itself.  Have u tried browser debugging to understand whats the core issue. Can you share the control  code so I can try. I am not aware of any such limitation. 

hemant

[hansgfixed]

Thanks for the reply.

This is strange. What I observed is that the container contains the following class composition in a regular namespace

customControl MyPcfRegularNamespace FooBarControl MyPcfRegularNamespace.FooBarControl

while the "nested" namespace container classes are

customControl MyPcf Foo.Bar.FooBarControl MyPcf.Foo.Bar.FooBarControl

The css resource gets loaded. Checked this by directly selecting an id instead of going with the namespace and controlname and added some styles.

So when adding the namespace and control class like

MyPcf.Foo.Bar\.FooBarControl #inputid {background-color: red;}

The obvious background color doesn't get applied anymore.

Meanwhile I'll try figuring out what could be the issue that the classes differ in composition in contrast when I used just an oneword namespace.

[hansgfixed]

I've just created a second pcf control with the namespace CompanyName.Crm.Pcf and as expected the applied css class is

customControl CompanyName Crm.Pcf.SampleAutocomplete
CompanyName.Crm.Pcf.SampleAutocomplete

where the namespace is not part of the sub-namespaces like it should be.

I've also created another project like yours with only one sub-namespace and the css gets applied.

@HemantG, please test this again with the same namespace and (minimum 2) sub-namespaces. If you can reproduce the issue I guess it's a bug considering there shouldn't be a limitation on sub-namespaces.

Thanks!

[hansgfixed]

Bumping own thread as it is not possible as of now to use more than two sub-namespaces.

[GregHurlmanMSFT · Accepted solution]

@hansgfixed I've tried to repro, running this command to create my PCF component:

pac pcf init --namespace Long.NameSpace.For --name MyControl --template field

And when rendered, I get this class attribute on my container DIV:

class="customControl Long NameSpace.For.MyControl Long.NameSpace.For.MyControl"

So the container has:

1. The customControl indicator class
2. The Long root namespace class
3. The NameSpace.For.MyControl child namespace class
4. The Long.NameSpace.For.MyControl full namespace class

From what you've posted in this thread:

MyPcf.Foo.Bar\.FooBarControl #inputid {background-color: red;}

The issue I'm seeing is the missing . at the beginning of your CSS selector indicating that you're looking for a class not an element named MyPcf, and the other \ characters indicating that this is a long class name that uses dots, not a string of classes on the same element, so this should work:

.MyPcf\.Foo\.Bar\.FooBarControl #inputid {background-color: red;}

Visual Studio Code showing what this CSS selector would match

[hansgfixed]

Many thanks Greg. This obviously was the issue all along.