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

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 2

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 3

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 4

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 5

Junior developers ignore compiler warnings Senior developers treat warnings as errors

People who should never be allowed to develop code recompile their compiler to better enable ignoring warnings.