css dependencies

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

css dependencies

Sean P. DeNigris
Administrator
Now that I'm specifying the css files in deploy.js [1]:
  define(['amber/deploy', 'bootstrap/dist/js/bootstrap', 'css!amber-cornucopiascorecards/css/cover'
it seems there is an ordering problem, and bootstrap's css clobbers that of the template. Since bootstrap's css is declared as a dependency of bootstrap [2]:
  "shim": {"bootstrap/dist/js/bootstrap": {"deps": [..."css!bootstrap/dist/css/bootstrap" ]}
I thought the thing to do is declare my css to be dependent on bootstrap, but I can't get it to work. I tried (probably stupid) things in shim like:
  "css!amber-cornucopiascorecards/css/cover": { "deps": [ "css!bootstrap/dist/css/bootstrap" ]
  "css!amber-cornucopiascorecards/css/cover": { "deps": [ "bootstrap/dist/js/bootstrap" ]
  "amber-cornucopiascorecards/css": { "deps": [ "css!bootstrap/dist/css/bootstrap" ]
  "amber-cornucopiascorecards/css": { "deps": [ "bootstrap/dist/js/bootstrap" ]

As a workaround, if I remove the css shim from bootstrap.amd.json and load bootstrap's css directly from deploy.js, it works, but I'd like to know the right way to do this...

[1] https://github.com/seandenigris/cornucopia-scorecards/blob/master/deploy.js#L4
[2] https://github.com/seandenigris/cornucopia-scorecards/blob/master/bootstrap.amd.json#L7
Cheers,
Sean
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Sean P. DeNigris
Administrator
Sean P. DeNigris wrote
I tried (probably stupid) things in shim like:
Forgot the link to local.amd.json... https://github.com/seandenigris/cornucopia-scorecards/blob/master/local.amd.json
Cheers,
Sean
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Herby Vojčík
In reply to this post by Sean P. DeNigris


Sean P. DeNigris wrote:

> Now that I'm specifying the css files in deploy.js [1]:
>    define(['amber/deploy', 'bootstrap/dist/js/bootstrap',
> 'css!amber-cornucopiascorecards/css/cover'
> it seems there is an ordering problem, and bootstrap's css clobbers that of
> the template. Since bootstrap's css is declared as a dependency of bootstrap
> [2]:
>    "shim": {"bootstrap/dist/js/bootstrap": {"deps":
> [..."css!bootstrap/dist/css/bootstrap" ]}
> I thought the thing to do is declare my css to be dependent on bootstrap,
> but I can't get it to work. I tried (probably stupid) things in shim like:
>    "css!amber-cornucopiascorecards/css/cover": { "deps": [
> "css!bootstrap/dist/css/bootstrap" ]
>    "css!amber-cornucopiascorecards/css/cover": { "deps": [
> "bootstrap/dist/js/bootstrap" ]

shim: {"css!foo": {deps: ...}} doesn't works iirc, but:

Two entries with the same key? The last wins, why didn't you simply put
both things into first deps array? This is JSON.

>    "amber-cornucopiascorecards/css": { "deps": [
> "css!bootstrap/dist/css/bootstrap" ]
>    "amber-cornucopiascorecards/css": { "deps": [
> "bootstrap/dist/js/bootstrap" ]

I don't know what is "amber-cornucopiascorecards/css". You can shim deps
only for modules, this seems like path.

> As a workaround, if I remove the css shim from bootstrap.amd.json and load

That css should load well, I see no point of removing it.

> bootstrap's css directly from deploy.js, it works, but I'd like to know the
> right way to do this...
>
> [1]
> https://github.com/seandenigris/cornucopia-scorecards/blob/master/deploy.js#L4
> [2]
> https://github.com/seandenigris/cornucopia-scorecards/blob/master/bootstrap.amd.json#L7
>
>
>
> -----
> Cheers,
> Sean
> --
> View this message in context: http://forum.world.st/css-dependencies-tp4833065.html
> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Herby Vojčík
In reply to this post by Sean P. DeNigris


Sean P. DeNigris wrote:
> Sean P. DeNigris wrote
>> I tried (probably stupid) things in shim like:
>
> Forgot the link to local.amd.json...
> https://github.com/seandenigris/cornucopia-scorecards/blob/master/local.amd.json

Ah. I still don't know what thatname/css maps. Directory css? File
css.js? File css.css? If it is the last, then you must load it as
css!thatname/css, without css! loader plugin it is always .js that is
tried to be loaded.

>
>
>
> -----
> Cheers,
> Sean
> --
> View this message in context: http://forum.world.st/css-dependencies-tp4833065p4833066.html
> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Herby Vojčík


Herby Vojčík wrote:

>
>
> Sean P. DeNigris wrote:
>> Sean P. DeNigris wrote
>>> I tried (probably stupid) things in shim like:
>>
>> Forgot the link to local.amd.json...
>> https://github.com/seandenigris/cornucopia-scorecards/blob/master/local.amd.json
>>
>
> Ah. I still don't know what thatname/css maps. Directory css? File
> css.js? File css.css? If it is the last, then you must load it as
> css!thatname/css, without css! loader plugin it is always .js that is
> tried to be loaded.

So I have looked around the repo, and it seems thatname/css is a
directory. It that case, it's no point to give shim deps to it. Instead
you should try (without the two-same-keys issue) try to shim deps to
css!thatname/css/firstone and css!thatname/css/secondone. It could work.
I'd say do not add the bootstrap itself into the deps (do the css
actually depend on bootstrap _library_ - I'd say no, they only want the
bootstrap css be applied before they themselves are), but you could try
to add only its css there (which you always erased using two-same-keys).

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Sean P. DeNigris
Administrator
Herby Vojčík wrote
try to shim deps to css!thatname/css/firstone and css!thatname/css/secondone
But since:
> shim: {"css!foo": {deps: ...}} doesn't works
What do I put on the left side? Or are you saying the above might work? Isn't that what I did in:
  "css!amber-cornucopiascorecards/css/cover": { "deps": [ "css!bootstrap/dist/css/bootstrap" ]

In answer to your question in the other reply about two entries with the same key, the four lines were four different things I tried as I flopped around, not at the same time, but in lieu of each other because I didn't know what to write.
Cheers,
Sean
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Sean P. DeNigris
Administrator
In reply to this post by Sean P. DeNigris
Sean P. DeNigris wrote
Now that I'm specifying the css files in deploy.js [1]...
I also asked on SO - http://stackoverflow.com/questions/30921081/amber-how-do-declare-dependencies-between-css-files
Cheers,
Sean
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Sean P. DeNigris
Administrator
In reply to this post by Sean P. DeNigris
Sean P. DeNigris wrote
it seems there is an ordering problem
Maybe explicitly listing bootstrap.css and cover.css in deploy.js is unavoidable. require-css's README says: "the order of CSS injection can't be guaranteed". I've made a few updates to the SO question [1] and emailed require-css's author, but have not gotten any help.

1. http://stackoverflow.com/questions/30921081/amd-how-do-declare-dependencies-between-css-files
Cheers,
Sean
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Herby Vojčík


Sean P. DeNigris wrote:
> Sean P. DeNigris wrote
>> it seems there is an ordering problem
>
> Maybe explicitly listing bootstrap.css and cover.css in deploy.js is

You aren't guaranteed any order there either. It's just a "conicidence"
(one that is earlier is probably processed earlier and if it is in
cache, it is actually applied earlier), because they are loaded
asynchronously. AFAIK.

> unavoidable. require-css's README says: "the order of CSS injection can't be
> guaranteed". I've made a few updates to the SO question [1] and emailed
> require-css's author, but have not gotten any help.
>
> 1.
> http://stackoverflow.com/questions/30921081/amd-how-do-declare-dependencies-between-css-files
>
>
>
> -----
> Cheers,
> Sean
> --
> View this message in context: http://forum.world.st/css-dependencies-tp4833065p4835009.html
> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Herby Vojčík


Herby Vojčík wrote:
>
>
> Sean P. DeNigris wrote:
>> Sean P. DeNigris wrote
>>> it seems there is an ordering problem
>>
>> Maybe explicitly listing bootstrap.css and cover.css in deploy.js is
>
> You aren't guaranteed any order there either. It's just a "conicidence"

The only foolproof solution is to make every cover css rule more
specific, for example put well-known class attribute into body, and
change every rule to precede it with body.classname / change to
body.classname.

> (one that is earlier is probably processed earlier and if it is in
> cache, it is actually applied earlier), because they are loaded
> asynchronously. AFAIK.
>
>> unavoidable. require-css's README says: "the order of CSS injection
>> can't be
>> guaranteed". I've made a few updates to the SO question [1] and emailed
>> require-css's author, but have not gotten any help.
>>
>> 1.
>> http://stackoverflow.com/questions/30921081/amd-how-do-declare-dependencies-between-css-files
>>
>>
>>
>>
>> -----
>> Cheers,
>> Sean
>> --
>> View this message in context:
>> http://forum.world.st/css-dependencies-tp4833065p4835009.html
>> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>>
>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Sean P. DeNigris
Administrator
Herby Vojčík wrote
The only foolproof solution is to make every cover css rule more
specific
Is this a design flaw in the Bootstrap cover template? I.e. is it best practice for them to have done it as you describe, or is this a problem specific to using it in Amber?
Cheers,
Sean
Reply | Threaded
Open this post in threaded view
|

Re: css dependencies

Herby Vojčík


Sean P. DeNigris wrote:
> Herby Vojčík wrote
>> The only foolproof solution is to make every cover css rule more
>> specific
>
> Is this a design flaw in the Bootstrap cover template? I.e. is it best
> practice for them to have done it as you describe, or is this a problem

best practice

the rules of what selector is preferred when same element is styled are known ahd well-documented. relying on "load this style after x" is bad design.

> specific to using it in Amber?
>
>
>
> -----
> Cheers,
> Sean
> --
> View this message in context: http://forum.world.st/css-dependencies-tp4833065p4835120.html
> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.