css dependencies

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

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

Sean P. DeNigris wrote:
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.

--
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.

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.

--
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.

Herby Vojčík wrote:
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.

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.

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

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

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.

--
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.

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.

--
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.

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?

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.

--
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.