royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From OmPrakash Muppirala <bigosma...@gmail.com>
Subject Re: Inject a Font
Date Wed, 14 Mar 2018 19:04:20 GMT
Ignoring the behind the screen mechanics, as a developer, I would like
something like this:

*styles.css:*

@font-face {
    font-family: error;
    src: url(helvetica_bold.woff);
}

@font-face {
    font-family: warning;
    src: url(sans_light.woff);
}

.error {
  color: red;
  font-family: error;
}

.warning {
  color: orange;
  font-family: warning;
}


*Component.as:*

package components {
  import styles.css;
  import org.apache.royale.core.WrappedHTMLElement;
  import org.apache.royale.html.util.addElementToWrapper;
  import org.apache.royale.core.UIBase;

  public class Component extends UIBase {
    private var myStyles:CSS = styles.css;
    private var myDiv: WrappedHTMLElement = addElement.wrapper(this,'div');

//Elsewhere:
   if(condition) {
     myDiv.className = myStyles.classNames.error;
   }
   else {
     myDiv.className = myStyles.classNames.warning;
   }

  }
}


The act of "importing" the styles.css should automatically inject the
appropriate html for importing the css file.
The CSS class can be a simple object (with perhaps some util methods) which
is constructed by reading all the classnames in the css file.

This approach is sort of inspired from the CSS Modules component used in
React development here [1]

Just my 2 cents.

Thanks,
Om

[1] https://github.com/gajus/react-css-modules

On Wed, Mar 14, 2018 at 10:09 AM, Alex Harui <aharui@adobe.com.invalid>
wrote:

> The Jewel Theme wants to add a <link> element to the HTML to bring in a
> font.  The <inject_html> directive was introduced to add elements to the
> HTML needed for code in the class decorated by the <inject_html>.   Jewel
> is using a dummy class with <inject_html> which probably means that the AS
> code doesn't need the link element, but the CSS in the theme does.
>
> IMO, that means that there should be a directive in CSS that also injects
> html.  I don't think comments are retained in CSS, so using inject_html in
> a comment is not something I would recommend.  IMO, the directive should
> be on/in the selectors that need it, and not at the file level.
>
> One way to do this would be a fake media-query like:
>
> @media -inject_html
>
> That could contain selectors with fake properties like:
>
> Button {
>  foo: <link .... />
> }
>
> If a Button is used in the app, then the compiler would see the Button
> selector in the -inject_html media, and inject the html for every property
> in the selector.  IOW, if you did:
>
> Button {
>   foo: <link .... />
>   bar: <style ... />
> }
>
> Then both link and style would be injected into the output HTML.
>
> Another approach would be to introduce a special inject_html property that
> you would use in the selector as needed.  So, if Button sets
> font-family="Lato" it would also set inject_html like below:
>
> Button {
>   font-family: Lato;
>   inject-html: <link ... />
> }
>
>
> This has the advantage of keeping the links with the font-family that
> needs it, but you will have to duplicate inject-html in each of the
> selectors that need it.
>
> Other ideas are welcome.  Thoughts?
> -Alex
>
>

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message