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.

Rhoades

Adding a bounty...161 warnings on compilation is simply unmanageable. I can generate a sample stripped down Flex Builder project that produces this issue if anyone wants it. – Rhoades

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

Balsamiferous

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. – Rhoades

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.

Rhoades

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. – Rhoades

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

Velvavelvet

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. – Stoichiometric

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

Stantonstanway

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. – Rhoades

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

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

No, the style tag is first thing inside application tag – Rhoades

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

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.

Rattlebox

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

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. – Rattlebox

I believe this throws a different warning. – Bruit

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. – Deface

Answer 6

Add this to compiler flags in project properties:

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

Genous

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 ? – Agle

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

Fran