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.

Answer 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".

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

Answer 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

Answer 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; }

Answer 5

It looks as though you need to namespace your CSS: from the documentation: "Type selectors that are either not qualified by a namespace or do not resolve to an ActionScript class linked into the Application cause a warning at compile time."

The example they give is:

<Style>
    @namespace "library://ns.adobe.com/flex/spark";
    @namespace cx "com.mycompany.*";

    Button { color: #990000; }
    cx|MyFancyButton { color: #000099; }
</Style>

From your example, you seem to be missing the custom namespace, and, since your architecture is modular, the classes don't resolve to the application at compile time.

Answer 6

Add this to compiler flags in project properties:

-show-unused-type-selector-warnings=false

Answer 7

If you still have these warnings, can you check if you have marked one of your components to be build as an application?

Those 'incorrect' css type selector warnings showed up in one of my projects. I noticed that Flex Builder made an extra application for one of my components (you can check this in your bin-debug folder). As soon as I removed the component as an application, the warnings went away.

Note that there was no css declaration in the component, and the warnings showed up at my main application resource.

You can remove the 'build as an application' mark for a component by going to the properties panel of your application, open the Flex Application tab, select the component and click the 'remove' button.

As an extra bonus, the compilation time decreased (at least 5 times faster).