Hi Alex,
if as you said all pieces are in place, maybe I'm doing something wrong,
since I don't get it to work.
Can you check the current example in "feature/vivid" branch?
*First build "Vivid" project (in projects folder)*. Here only look to
"TextField" component. This component uses "TextField" type selector as
main css class. Then, it builds two subcomponents that uses "
vTextField--input" and "vTextField--label" (I'll check later when this
problem is solved what we said internal structure and see how much we can
make it as plain as possible, so this is temporal structure and mostly I'm
still experimenting to see results and implications of those results). In
this project I only want to add for now beads like a Model or
Controller...the rest View and css rules will go on theme project
*Then build theme project: VividBlueTheme (in projects folder)*. Here you
will have css rules mainly, svg, and beads that define visuals, like a View
bead. So we should not expect classes here, or only classes that create
visuals, but will have several .css files. Right now we have "defaults.css"
and "TextField.css".
I added the second along defaults to pom.xml
<includeFiles>
<include-file>
<name>defaults.css</name>
<path>../src/main/resources/defaults.css</path>
</include-file>
<include-file>
<name>TextField.css</name>
<path>../src/main/resources/TextField.css</path>
</include-file>
</includeFiles>
So the final swc has the right files. (If you unzip both files are in
place). As we solve this problem, we should see if we can merge all files
into one, to improve load performance.
*Finaly we have VividExample project (in example folder).* In this project
we are using vivid UI set in concrete <v:TextField/>
I linked theme in pom.xml with
<additionalCompilerOptions>
-theme=${basedir}/../../../frameworks/projects/VividBlueTheme/target/VividBlueTheme-${royale.framework.version}-js.swc
</additionalCompilerOptions>
anad is working
This TextField should get *defaults.css* base styles (mainly model bead)
from Vivid.swc and styles from *TextField.css* (rest of css rules).
But this is not happen, since *TextField.css *in theme, although is
included in the theme .swc is not being used in the example
So I'm a bit lost at this point.
Hope you can let me know if this is a bug, or maybe I'm doing something
wrong
thanks!
Carlos
2018-02-15 10:25 GMT+01:00 Piotr Zarzycki <piotrzarzyck...@gmail.com>:
> If you end up with the issue let's fill a bug on github! Let's track some
> things through the github issues.
>
> Piotr
>
> 2018-02-15 10:21 GMT+01:00 Alex Harui <aha...@adobe.com.invalid>:
>
> > Right now, all css files are combined into one final css file. If you
> > compile App.mxml, you will get an App.css with all selectors from all
> SWCs
> > that applied to the classes in the output. I've actually been thinking
> > about changing that so that if you specify a css file in an fx:Style we
> > copy it as-is to the output folder. That way you could update the source
> > CSS and copy it over and see the changes without a recompile.
> >
> > The code sure looks like if VividBlueTheme is listed in the -theme option
> > that the compiler would pick it up. Did you actually look in the final
> > .css file? It could be an ordering problem where some other css stomps
> on
> > the things you specified in VividBlueTheme.
> >
> > Also, unzip VividBlueTheme.swc and make sure the .css files are in the
> SWC.
> >
> > If that all looks good, post a small test case so I can look into it.
> >
> > -Alex
> >
> >
> > On 2/14/18, 11:16 PM, "carlos.rov...@gmail.com on behalf of Carlos
> Rovira"
> > <carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> wrote:
> >
> > >Hi Alex,
> > >
> > >I'm a bit confused here. I created the thread since I'm already trying
> it.
> > >In VividBlueTheme, I added in pom.xml two <includefiles>
> > >one for typical defaults.css and another for TextField.css
> > >Both, are in theme SWC thanks to maven build, at that point is ok.
> > >
> > >The problem is that final app is not using TextField.css, but is using
> > >defaults.css
> > >
> > >So I think I only need to know how defaults.css is been applied to be
> used
> > >in final example App and get Textfield.css be applied as well in the
> same
> > >way so the final user don't need to link in the final App.
> > >
> > >One thing that could be great to make this better is to make all
> > >components
> > >css files developed at "creation time" be joined into one single
> > >"defaults.css" file (or other name) for production purposes and remove
> the
> > >load of lots of css files. But this is an improvement over the first
> part
> > >
> > >thanks for looking into this
> > >
> > >
> > >
> > >
> > >2018-02-14 23:38 GMT+01:00 Alex Harui <aha...@adobe.com.invalid>:
> > >
> > >> Hi Carlos,
> > >>
> > >> I looked at the compiler some more. It appears that this feature
> > >>already
> > >> exists. When I answered earlier, I was looking at code that loads
> SWCs
> > >> off the library path and the compiler only looks at defaults.css in
> > >>those
> > >> files, but I just saw that in SWCs specified as themes it will use
> every
> > >> .css file.
> > >>
> > >> Please try it and let us know if it works. One thing to be careful of
> > >>is
> > >> that I'm not sure you can control the order of the .css files. Maybe
> by
> > >> specifying the order they are specified to COMPC (the SWC compiler).
> > >> Order will only matter for overriding style properties.
> > >>
> > >> HTH,
> > >> -Alex
> > >>
> > >> On 2/14/18, 2:26 PM, "carlos.rov...@gmail.com on behalf of Carlos
> > >>Rovira"
> > >> <carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> wrote:
> > >>
> > >> >Hi Alex,
> > >> >
> > >> >I read @import and seems is not recommended for many reasons
> > >>(concurrence
> > >> >mainly) so I think is not a solution.
> > >> >My bet is that this will make more easy to develop themes since I can
> > >>go
> > >> >directly to the css file "Textfield.css" and make changes over a few
> > >>set
> > >> >of
> > >> >lines.
> > >> >I never touched the compiler, so If you could add support for this
> > >>feature
> > >> >in order to use all css files included (I think this would must be
> the
> > >> >ones
> > >> >listed in the pom.xml)
> > >> >It would be more easy to me to continue developing this feature.
> Could
> > >>you
> > >> >help me with this? For what you said maybe for you is not a long task
> > >>and
> > >> >can be ready in moderate few time,
> > >> >
> > >> >@Harbs, could you tell us a bit more of you MXML proposal, maybe some
> > >> >explanation with few example names could help me see your method
> > >> >
> > >> >Thanks both with this!
> > >> >
> > >> >Carlos
> > >> >
> > >> >
> > >> >
> > >> >2018-02-13 19:44 GMT+01:00 Gabe Harbs <harbs.li...@gmail.com>:
> > >> >
> > >> >> Why not just use MXML files?
> > >> >>
> > >> >> You can use MXML files to subclass components and specify the CSS
> in
> > >>the
> > >> >> <fx:Style> section.
> > >> >>
> > >> >> > On Feb 13, 2018, at 1:20 PM, Carlos Rovira
> > >><carlosrov...@apache.org>
> > >> >> wrote:
> > >> >> >
> > >> >> > Hi,
> > >> >> >
> > >> >> > I'm organizing CSS files in Vivid (new ui set) - VividBlueTheme
> > >>(first
> > >> >> > theme) - VividExample (example to show all working)
> > >> >> >
> > >> >> > I want to develop each component look-and-feel and style in a
> > >>single
> > >> >>file
> > >> >> > in the theme project:
> > >> >> >
> > >> >> > default.css (this could hold global styling like body, headers,
> > >> >> background
> > >> >> > color, and more)
> > >> >> > TextField.css (all css to make a TextField be represented in a
> > >> >>particular
> > >> >> > way)
> > >> >> > Button.css
> > >> >> > Slider.css
> > >> >> > ...
> > >> >> >
> > >> >> > in my theme pom I have:
> > >> >> >
> > >> >> > <includeFiles>
> > >> >> > <include-file>
> > >> >> > <name>defaults.css</name>
> > >> >> > <path>../src/main/resources/defaults.css</path>
> > >> >> > </include-file>
> > >> >> > <include-file>
> > >> >> > <name>TextField.css</name>
> > >> >> > <path>../src/main/resources/TextField.css</path>
> > >> >> > </include-file>
> > >> >> > </includeFiles>
> > >> >> >
> > >> >> > and I check the resulting VividBlueTheme.swc and has default.css
> > >>and
> > >> >> > TextField.css
> > >> >> >
> > >> >> > * First question here is: Can I collapse all css content in
> > >>multiple
> > >> >> files
> > >> >> > in a single .css (i.e: defaults.css or themename.css)?
> > >> >> >
> > >> >> > Then in vivid example how CSS in theme projects are referenced? I
> > >>see
> > >> >> > "defaults.css" is begin applied, but "TextField.css" is not
> > >> >> >
> > >> >> > * Second question how to apply a included .css file to be used in
> > >> >>example
> > >> >> >
> > >> >> > Notice that if we get all css in one single file we don't need
> the
> > >> >>second
> > >> >> > part.
> > >> >> >
> > >> >> > Hope you could help me on this in order to continue progress with
> > >>this
> > >> >> > effort
> > >> >> >
> > >> >> > thanks
> > >> >> >
> > >> >> >
> > >> >> >
> > >> >> >
> > >> >> > --
> > >> >> > Carlos Rovira
> > >> >> >
> > >> >>https://na01.safelinks.protection.outlook.com/?url=
> > >> http%3A%2F%2Fabout.me%
> > >> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> > >> 7Cc93b59f46bd14932987808
> > >> >>d573fa170f%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> > >> 7C63654244033165639
> > >>
> > >>>>8&sdata=xDHvYWVSZxZ%2FgZRYrXVYw1Z%2BqXaGMRGOKyCh0U%2FIvBo%3D&
> > reserved=0
> > >> >>
> > >> >>
> > >> >
> > >> >
> > >> >--
> > >> >Carlos Rovira
> > >> >https://na01.safelinks.protection.outlook.com/?url=
> > >> http%3A%2F%2Fabout.me%2
> > >> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> > >> 7Cc93b59f46bd14932987808d5
> > >> >73fa170f%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> > >> 7C636542440331656398&s
> > >> >data=xDHvYWVSZxZ%2FgZRYrXVYw1Z%2BqXaGMRGOKyCh0U%2FIvBo%3D&reserved=0
> > >>
> > >>
> > >
> > >
> > >--
> > >Carlos Rovira
> > >https://na01.safelinks.protection.outlook.com/?url=
> > http%3A%2F%2Fabout.me%2
> > >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> > 7C1ff2d174b6fe40b590be08d5
> > >744423ab%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> > 7C636542758395312206&s
> > >data=Ax1BfqYXSQveONWJyi1bbhaTXeiebLAyNKbMjtFDOeI%3D&reserved=0
> >
> >
>
>
> --
>
> Piotr Zarzycki
>
> Patreon: *https://www.patreon.com/piotrzarzycki
> <https://www.patreon.com/piotrzarzycki>*
>
--
Carlos Rovira
http://about.me/carlosrovira
