Disable Flex CSS type selector warning?

Question

I'm building a somewhat large Flex project that includes several modules (a single Flex project that produces multiple SWFs)

Right now, I have a single css file, being loaded in the main SWF tag:

<s:Application ... >
    <fx:Style source="css/main.css" />
...
</s:Application>

In the CSS file:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";

s|Panel { 
    skinClass: ClassReference("com.skins.DefaultPanelSkin"); 
} 

s|Button {
    skinClass: ClassReference("com.skins.DefaultButtonSkin");
}

The CSS file is not referenced anywhere else.

I have currently 6 modules (plus the main SWF, a total of 7 SWFs). I've noticed that the number of warnings is correlated to the number of modules...every time I add a module, I get more warnings. Right now, I get 6 warnings for every entry in the CSS file, so:

CSS type selectors are not supported in components: 'Panel'
CSS type selectors are not supported in components: 'Panel'
CSS type selectors are not supported in components: 'Panel'
CSS type selectors are not supported in components: 'Panel'
CSS type selectors are not supported in components: 'Panel'
CSS type selectors are not supported in components: 'Panel'

And repeat for Button, TextArea, etc etc. I have so many useless warnings, it is impossible to see if there are any valid ones.

Is this warning caused by something I'm doing wrong? The styles are all being applied correctly and appears to work just the way I want at runtime. If I'm doing nothing wrong, can I tell the compiler to ignore this warning?

NOTE: I've tried the -show-unused-type-selector-warnings=false compiler flag, and it does not work...that's for a similar but different warning.

Solution 1

If you're looking at the warnings in FlexBuilder, you should be able to use Eclipse's problem filtering GUI. Assuming Flex 4 is sufficiently similar to Flex 3 in this regard, on the problems tag at the top right, there's a button with the tooltip "Configure the filters to be applied to this view". It's the one with the arrows.

In the filters dialog, on the default filter, set description to "doesn't contain" and the text under it to "CSS type selectors are not supported in components".

Solution 2

So I ended up just downloading the source to the compiler, searching through it to find that warning, commented it out, and re-compiled the compiler. This is against the version tagged for gumbo beta2.

Index: modules/compiler/src/java/flex2/compiler/css/StylesContainer.java
===================================================================
--- modules/compiler/src/java/flex2/compiler/css/StylesContainer.java   (revision 10941)
+++ modules/compiler/src/java/flex2/compiler/css/StylesContainer.java   (working copy)
@@ -198,11 +198,11 @@
         {
             // [preilly] This restriction should be removed once the
             // app model supports encapsulation of CSS styles.
-            ComponentTypeSelectorsNotSupported componentTypeSelectorsNotSupported =
+            /*ComponentTypeSelectorsNotSupported componentTypeSelectorsNotSupported =
                 new ComponentTypeSelectorsNotSupported(getSource().getName(),
                                                        lineNumber,
                                                        selector);
-            ThreadLocalToolkit.log(componentTypeSelectorsNotSupported);
+            ThreadLocalToolkit.log(componentTypeSelectorsNotSupported);*/
             return true;
         }

Not the most elegant solution...but those warnings were really getting annoying.

Solution 3

One other cause I have found for this warning is in the case when you reference the parentApplication from within a class.

My project has 2 apps, and there are several cases when I needed to reach into one or the other of the applications for one reason or other.

If I reference my parentApplication as follows, I see the warnings:

(this.parentApplication as SomeAppName).someFunction();

If I leave the reference general, the errors go away:

this.parentApplication.someFunction();

This is not meant to comment on whether or not this is good practice, but it is to hopefully help some folks find a root cause.

hth

Solution 4

The problem is that you cannot define global styles in loaded modules. You can use a specific stylename for the Module tag and use descendant in your css to apply the styles to the sub components:

<mx:Module styleName='mySubStyle' .../>

and in the css use:

.mySubStyle s|Panel { color: #FF0000; }

View more solutions

Comments

[davr]

I'm not defining the global style in the loaded module, I'm defining it in my main, root, parent, non-module SWF. And that is the only place I am referencing the CSS file...none of the modules have <style> tags or anything.

[davr]

It's a warning, not an error, but yeah, the only place it's imported is in the root <s:Application> tag.

[sharvey]

Stupid question but have you done something like : <mx:Application> <mx:Panel> <mx:Style blah.../> ...

[davr]

No, the style tag is first thing inside application tag

[davr]

All my types in my CSS file are using namespaces. The types resolve ok, the styles get applied fine like I said.

[Oliver Turner]

I got that the styles were being applied, but that's irrelevant to the point you raised, which is that you were getting a warning.

[davr]

For future reference: if someone asks nicely enough I can upload the compiled compiler...but it's 100MB so I'm not gonna upload it just in case.

[davr]

This works, thanks! The GUI is a little different in Flex 4 (since it's based off a newer version of Eclipse), but the same basic idea works, it's in the secret little menu hidden by that triangle in the upper right corner of the Problems view.

[quoo]

This is a problem if your main <Application> node subclasses Application, the compiler doesn't realize it's an Application and throws a warning.

[quoo]

I believe this throws a different warning.

[supervacuo]

I have 62 "CSS type selectors are not supported..." messages across my (inherited) Flex 3.5 project. I wasn't namespacing my type selectors at all; doing so made no difference to the warnings, sadly.

[JK Patel]

i have updated my Adobe Air SDF from 3.1 to 17.0 using overlay method, now it found 10 warning about css, while i have just a button in my application, so i try to find a solution and your answer is found & i have tried your solutions but it wont work, is there any other solution to remove this warning ?

[Bruno Ranschaert]

I was in this situation, I solved it by creating an interface IApp and using this interface in the rest of the code where I was using the main module Main before.