[
https://issues.apache.org/jira/browse/TRINIDAD-2399?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13700488#comment-13700488
]
Anand V Nath commented on TRINIDAD-2399:
----------------------------------------
The proposal is to add bottom up support for client side css rules. All rules
which are not processed currently will be rendered out as
@rule {
selector {
property: value;
...
}
}
Only exception is @page and @font-face which will be rendered as selector rules:
@rule { property: value; ... }
1. org.apache.myfaces.trinidadinternal.skin.SkinCSSDocumentHandler - To add
logic to parse css rule store it locally and make it available for
org.apache.myfaces.trinidadinternal.skin.SkinStyleSheetNode.
// holds the parsed value of client side css rules
// Eg: "@media foo1 {"
private String _clientRule;
// existing inner class
private static class CompleteSelectorNode {
// modify this to contain _clientRule
}
// existing method
private List <SkinStyleSheetNode> _createSkinStyleSheetNodes(...)
{
...
// pass the _clientRule for SkinStyleSheetNode creation
}
/**
* parses the special client side rules which are to be rendered as selectors
* and not rules
* @param atRule - client side rule content
* e.g. - @page:first { margin: 1in; }
* e.g. - @font-face { font-family: MyHelvetica; font-weight: bold; }
*/
private void _parseClientSideSelector(String atRule)
{
// process the @page and @font-face client rules separately so that they are
rendered as selectors
}
2. org.apache.myfaces.trinidadinternal.skin.SkinStyleSheetNode - To capture the
client side css rules, like we do for @agent etc
// member variable to store client side css rules
private final String _clientRule;
// existing method
public boolean matches(...) {
// Compare the client side css rules also for deciding matching
SkinStyleSheetNodes
// This ensures that same client side css rules are getting merged in skin
hierarchy
// Also, makes the nested rules work.
}
// provide getter for client side css rules so that it can be accessed later.
public String getClientRule()
{
return _clientRule;
}
3. org.apache.myfaces.trinidadinternal.style.xml.parse.StyleNode - add client
side css rules support into this
private final String _clientRule;
public String getClientRule() {
return _clientRule;
}
/**
* util method to determine is a StyleNode has clientRule or not
* @return true if clientRule exists
*/
public boolean hasClientRule()
{
return _clientRule != null && !_clientRule.isEmpty();
}
/**
* utility method to generate the cache id for a StyleNode.
* cache id is used in StyleSheetDocument object while resolving StyleNodes.
* cache id helps in distinguishing same selectors wrapped in different
clientRules.
*
* @return cacheId - clientRule if exists + selector or name whichever exist.
*/
String getCacheId()
{
// return the cache id as clientRule if exists + selector or name whichever
exist.
}
4. org.apache.myfaces.trinidadinternal.style.xml.parse.StyleSheetDocument -
change the resolution logic because there is a cache based on selector name,
now the cache should also honor client side css rules as well.
// existing method
public Iterator<StyleNode> getStyles(StyleContext context) {
// make sure the the iterator returned here has the resolved StyleNodes
containing same _clientRule .
}
// existing method
public Iterator<IconNode> getIcons(StyleContext context) {
// make sure the the iterator returned here has the resolved StyleNodes
within the IconNodes containing same _clientRule.
}
// existing inner class
private static class StyleEntry {
// This class needs to be made clientRule aware so that it generates the
StyleNode objects with the clientRule
}
5. org.apache.myfaces.trinidadinternal.style.util.CSSGenerationUtils -
rendering of skin should take care of grouping
org.apache.myfaces.trinidadinternal.style.xml.parse.StyleNode having same css
rule and render it under one rule.
// existing method
public static void writeCSS(...) {
// Any StyleNode having same property string is grouped together.
// eg; a {color:red }, b {color:red}
// will be grouped as [color:red, {a , b}]
// this grouping now needs to be done after an extra check for client side
css rules
// eg; a {color:red }, b {color:red}, @media { c {color:red} }
// should be grouped as [color:red, {a , b}], {"@media", [color:red, {c}]}
// so that they are rendered separately
// selectors containing same properties within the same clientRule needs to
be rendered together
// eg; @media only screen { myStyleA { color:red; } }, @media only screen {
myStyleB { color:red; } }
// should be rended as @media only screen { myStyleA, myStyleB { color: red;
} }
// when writing out StyleNodes check for client side css rules
// render the client side css rules followed by the property string and
// close with an extra brace for the client side css rules
}
> support css client side rules in skinning framework
> ---------------------------------------------------
>
> Key: TRINIDAD-2399
> URL: https://issues.apache.org/jira/browse/TRINIDAD-2399
> Project: MyFaces Trinidad
> Issue Type: New Feature
> Components: Skinning
> Affects Versions: 2.1.0-core
> Reporter: Anand V Nath
>
> This ER is for introducing client side css rule support in skinning framework.
> Here's a list of known CSS at-rules:
> @document - uses nested selectors that need to be resolved
> @font-face - probably safe to blindly pass through
> @keyframes - probably safe to blindly pass through
> @media - uses nested selectors that need to be resolved
> @page - probably safe to blindly pass through
> @supports - uses nested selectors that need to be resolved
> These rules can be split into two based on its usage:
> @document, @keyframes, @media, @support uses following syntax:
> @rule {
> selector
> {
> property : value;
> property : value;
> property : value;
> }
> }
> @font-face and @page uses following syntax:
> @rule {
> property : value;
> property : value;
> property : value;
> }
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira
