That’s one option. Another way would be to have a way to declare CSS dependencies in classes.
The problem is that we have no way to handle CSS order for Classes which depend on CSS. I’m not sure what the best solution would be. > On Feb 12, 2020, at 8:11 PM, Alex Harui <[email protected]> wrote: > > I'm still not understanding. Are you asking for dependency order of output > of inject_html? > > -Alex > > On 2/12/20, 10:03 AM, "Harbs" <[email protected] > <mailto:[email protected]>> wrote: > > >> On Feb 12, 2020, at 7:16 PM, Alex Harui <[email protected]> wrote: >> >> I don't understand the problem. Maybe you can create a royale-compiler >> issue and put in the current index.html and show what the correct output >> should be. > > If you look at the source here: > > You’ll see the following lines: > <link rel="stylesheet" href="assets/css/components/inputgroup/dist.css"> > <link rel="stylesheet" href="assets/css/components/button/dist.css"> > <link rel="stylesheet" href="assets/css/components/icon/dist.css"> > <link rel="stylesheet" href="assets/css/components/textfield/dist.css"> > > inputgroup depends on textfield and textfield should be loaded before > inputgroup, like so: > > <link rel="stylesheet" href="assets/css/components/textfield/dist.css"> > <link rel="stylesheet" href="assets/css/components/inputgroup/dist.css"> > <link rel="stylesheet" href="assets/css/components/button/dist.css"> > <link rel="stylesheet" href="assets/css/components/icon/dist.css"> > > > inputgroup is used by ComboBox and friends which also use TextField. > > https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Funhurdle%2Fspectrum-royale%2Fblob%2Fmaster%2FSpectrum%2Fsrc%2Fcom%2Funhurdle%2Fspectrum%2FComboBoxView.as&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=l3Y6%2BYqepGCITjUEW1gYQZcGpmML%2FB7ntZ0OA324fWE%3D&reserved=0 > > <https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Funhurdle%2Fspectrum-royale%2Fblob%2Fmaster%2FSpectrum%2Fsrc%2Fcom%2Funhurdle%2Fspectrum%2FComboBoxView.as&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=l3Y6%2BYqepGCITjUEW1gYQZcGpmML%2FB7ntZ0OA324fWE%3D&reserved=0><https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Funhurdle%2Fspectrum-royale%2Fblob%2Fmaster%2FSpectrum%2Fsrc%2Fcom%2Funhurdle%2Fspectrum%2FComboBoxView.as&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=l3Y6%2BYqepGCITjUEW1gYQZcGpmML%2FB7ntZ0OA324fWE%3D&reserved=0 > > <https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Funhurdle%2Fspectrum-royale%2Fblob%2Fmaster%2FSpectrum%2Fsrc%2Fcom%2Funhurdle%2Fspectrum%2FComboBoxView.as&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=l3Y6%2BYqepGCITjUEW1gYQZcGpmML%2FB7ntZ0OA324fWE%3D&reserved=0>> > >> Besides inject_html, shouldn't you be able to use -html-template and specify >> the order in a custom index.html file? > > Yes, but I’d like to automatically only load the CSS actually required by > the components used. > >> >> -Alex >> >> On 2/12/20, 4:46 AM, "Harbs" <[email protected] >> <mailto:[email protected]> <mailto:[email protected] >> <mailto:[email protected]>>> wrote: >> >> The problem is caused by the fact that we have no mechanism of specifying >> CSS dependency order in Royale. >> >> The design of the CSS makes sense. Requiring a specific order for the CSS >> files is a valid strategy. >> >> NPM (via modules) does have a way to specify CSS order. >> >> I think this is a general problem which we should try to solve. To me, the >> only question is technically what’s the best way to do so. >> >> Possibly inject_html is the wrong tool (as we’ve already discussed), but >> it’s the only one we have as of now. >> >> I’m not sure how the order of the inject_html is determined. Maybe there >> should be some sorting logic which corresponds to dependency trees? >> >> Maybe the right answer is to have a way to declare file dependencies and >> that should include order as well? >> >> Harbs >> >>> On Feb 12, 2020, at 1:54 PM, Carlos Rovira <[email protected] >>> <mailto:[email protected]>> wrote: >>> >>> Hi Harbs, >>> >>> if I understand the issue correctly this not seems a Royale issue to me, >>> but a problem in Spectrum CSS structure design. >>> In Royale, we provide CSSs to the compiler from libraries, and that >>> generate just one compiled CSS file. User's project CSS takes precedence >>> over framework libraries, so if a user override a style, that wins over the >>> royale one. Since load an external CSS is outside the Royale sandbox, I >>> think the loaded CSS should solve its problem to not have >>> collision problems within them. >>> >>> >>> El mié., 12 feb. 2020 a las 10:04, Harbs (<[email protected] >>> <mailto:[email protected]>>) escribió: >>> >>>> I’ve run into an interesting issue while working on the Spectrum >>>> components.[1] >>>> >>>> To quickly summarize: >>>> >>>> I’m using inject_html to automatically add CSS links to the index.html >>>> file. Doing so gives no control over the order of said dependencies. >>>> >>>> The CSS files are required to be loaded in the declared dependency list >>>> (in the npm package). >>>> >>>> I think we need to resolve this issue somehow and I’m not sure of the best >>>> way to go about it. >>>> >>>> Thoughts? >>>> Harbs >>>> >>>> [1]https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fissues%2F481&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=K9P3B6HRCGckqxipsWY%2B8pUS3xEiOwmavWyK0mmCiBE%3D&reserved=0 >>>> >>>> <https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fissues%2F481&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=K9P3B6HRCGckqxipsWY%2B8pUS3xEiOwmavWyK0mmCiBE%3D&reserved=0> >>>> >>>> <https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fissues%2F481&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=K9P3B6HRCGckqxipsWY%2B8pUS3xEiOwmavWyK0mmCiBE%3D&reserved=0 >>>> >>>> <https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fissues%2F481&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=K9P3B6HRCGckqxipsWY%2B8pUS3xEiOwmavWyK0mmCiBE%3D&reserved=0>> >>>> < >>>> https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fissues%2F481&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=K9P3B6HRCGckqxipsWY%2B8pUS3xEiOwmavWyK0mmCiBE%3D&reserved=0 >>>> >>>> <https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fissues%2F481&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=K9P3B6HRCGckqxipsWY%2B8pUS3xEiOwmavWyK0mmCiBE%3D&reserved=0> >>>> >>>> <https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fissues%2F481&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=K9P3B6HRCGckqxipsWY%2B8pUS3xEiOwmavWyK0mmCiBE%3D&reserved=0 >>>> >>>> <https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fissues%2F481&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=K9P3B6HRCGckqxipsWY%2B8pUS3xEiOwmavWyK0mmCiBE%3D&reserved=0>>> >>> >>> >>> >>> -- >>> Carlos Rovira >>> https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=r%2BuS87qscX77rrwjLEMm%2FrE%2BqMU9h4fAA%2BNluxE1EMs%3D&reserved=0 >>> >>> <https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063733438&sdata=r%2BuS87qscX77rrwjLEMm%2FrE%2BqMU9h4fAA%2BNluxE1EMs%3D&reserved=0> >>> >>> <https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063743438&sdata=JJLhfY6%2FbhmbH7kR%2BBLZ%2BflzLadI6cJKIhrYzP4943k%3D&reserved=0 >>> >>> <https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C773ef03b90d34ea03f6008d7afe5d89b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637171274063743438&sdata=JJLhfY6%2FbhmbH7kR%2BBLZ%2BflzLadI6cJKIhrYzP4943k%3D&reserved=0>>
