CSS type selectors are not supported in components
Monday April 23, 2007
The Flex compiler has a few confusing warnings IMO.
This simple compiler warning (while being of little significance), indicates that you have boogied all over the rulebook, and are declaring styles for types within a component where you shouldn’t be.
Quite often it crops up when people do the following
[MyApplication.mxml]
<mx:Application ....>
<myNamespace:MyComponent />
</mx:Application>
[MyStyles.css]
TextInput { // a “Type” selector
paddingLeft: 10; height: 30;
}
.thisIsAllowed { // a class selector
paddingLeft: 10; height: 30;
}
[MyComponent.mxml]
<mx:VBox>
<mx:Style source="css/MyStyles.css">
<mx:TextInput>
<mx:TextInput styleName="thisIsAllowed" />
</mx:VBox>
In the above example, the first instance of TextInput (with no styleName attribute) will not have the styles applied. This is because a “Type” selector (TextInput {...}) has been used within a component, which is not allowed.
Such selectors can go under the <mx:Application> tag, so if you moved the CSS reference to the first file, and remove the declaration for “thisIsAllowed”, both components will get the style.
[MyApplication.mxml]
<mx:Application ....>
<mx:Style source="css/MyStyles.css">
<myNamespace:MyComponent />
</mx:Application>
[MyStyles.css]
TextInput { // a “Type” selector
paddingLeft: 10; height: 30;
}
.thisIsAllowed { // a class selector
paddingLeft: 10; height: 30;
}
[MyComponent.mxml]
<mx:VBox>
<mx:TextInput>
<mx:TextInput styleName="thisIsAllowed" />
</mx:VBox>
9 Responses to "CSS type selectors are not supported in components"
May 9, 05:27 PM
um, flex is a total downer in my opinion. Found ur blog by looking for my official 100th warning/error. Best of luck.
May 29, 03:18 PM
Gotta say, I disagree somewhat. It can make simple things appear complicated, but it’s just enforcing a set of paradigms that can be a little confusing at first – although the reason for those paradigms existing is because they just “work”. Especially when building larger applications. It’s not so much of a “downer” after surmounting the learning curve… everything is complicated until it’s understood =)
Jun 1, 11:23 AM
Yes, but what if you want to embed css in a component which happens to be an mx:Application which my real application extends?
Here’s my situation. I have a framework with various components in it which are used in multiple applications. The framework is in a framework project. I’d like to have my css and skin swf in the framework folder to keep from duplicating things. I can use <mx:Source source="../framework_dir/file.css"/> to include it but this just works as a side-effect of how I have my projects laid out. I’d like to just have the tag in an Application component in the framework that my applications then use as their root tag.
Jun 1, 01:15 PM
Hi Justin,
I’m not sure I understand what you’re saying, but from what I got it seems like you’re trying to centralize your resources. All well and good so you’re not duplicating the files, but you’ll always end up duplicating your references to them in this case (i.e. you'll always have a reference under an application tag to your framework styles).
Flex needs style declarations like skins and Components to appear under the mx:Application tag. Alternatively, you can extend mx:Application in your framework, and have your framework apply all the necessary CSS/Skins, bu you must instantiate this extended tag in MXML somewhere. I’ve not tried, but I’m sure you could then load in Type selectors for CSS directly under this customized application tag.
Subclassing the application tagJun 1, 04:14 PM
Ugh…sorry, it removed my mxml tags that I was trying to post (I’d suggest instead of stripping “tags” you convert them to HTML entities). The example I was posting was essentially the same as the one linked to in your comment. example.Application is a component which extends mx:Application and has an mx:Style declaration in it. main.mxml uses example:Application as its root node. I still get the error about the example.Application “component” even though it’s an mx:Application.
Jun 1, 04:16 PM
Ugh…this multi-step comment submission is not intuitive at all. Here’s the missing comment.
Actually what I’m saying is that I did exactly that. I have a subclass of the Application tag in my framework which I then instantiate as the root tag of the application. The “component” extended Application gives me the error this article is about if I try to include my full style sheet in it.
—- com.example.Application —-
—-
—- main.mxml —-
...
—-
This doesn’t work as flex is building the example.Application as a component, even though it extends mx:Application. I just tried it to make sure that it wouldn’t just work anyway and it doesn’t. I think the limitation is not that the style has to be in an Aplication tag, but that it has to be a direct child of the root of the application.
That’s pretty annoying, for exactly the use-case I outline. I’d like to be able to store the css in my framework project and include it (somehow) into all of my projects which need it without using the hack of prepending “../framework_project” to the path.
Jun 4, 03:08 PM
On the comments and stuff – sorry if it’s being a pain in the ***. The multi-step submission is an anti-spam tactic. Feel free to mail me instead if it helps. Textpattern manages this jazz. I guess it doesn’t expect code examples in comments by default. I’m due to make a lot more optimizations to the site… so bear with me.
What you say sounds about right, I’m not surprised mxmlc throws a wobbler. The reason for Type selectors not being allowed in non-application tags is that flex doesn’t support specificity in the same way as normal CSS. If type selectors were allowed in components, there would be major problems with CSS included further down the line erasing global definitions for class-wide styles.
CSS handling is rather special in mxml. Type selectors are translated by mxmlc to instances of CSSStyleDeclaration at compile time. If you use -keep-generated-actionscript you can see the effect here.
One way to handle framework styles would be to follow the cues of the compiler, and in your subclass of Application, override createChildren() and create all your styles manually here.
Sadly I’m not aware of a better way to apply them globally. There is class (flash.text.StyleSheet) that provides a parseCSS() method. Perhaps you could involve that somehow to keep your styles in a Textual block..
Jun 4, 03:26 PM
Linkee
CSS Framework Application
Mar 26, 11:37 PM
The main reason I get this error is because I want to use the Design mode Styles, but they don’t show up in the drop downs unless you put the style definitions in your component…Just ignore the warnings and make sure you test on a computer without any embedded fonts installed to make sure everything is working as expected.