Composes with global class name

[juanluispaz]

Composes is really useful, but when I work with a shared css, sometimes, I need to compose with a global class name, but currently it is not allowed.

There is two variants:
1.- Compose with an global external class name, e.g.: from a shared css library.
2.- Compose with a global local class name. It is less useful, It currently doesn't work too, but actually I don't need this kind of functionality.

Thanks for all.

[felixakiragreen]

👍

YES THIS. I need this.

I was surprised when this didn't work:

.titleIcon {
  composes: :global(.indicator) :global(.icon-library-circle);
  position: relative;
  top: 4px;
  font-size: 12px;
}

[tslocke]

👍

I'd like this not for names from a library but for global classes from my own project.

It's a pretty interesting use-case, but would take a fair bit of describing. I was getting ready to write up the argument but saw, to my surprise, this issue already here : )

If folks are curious as to how I want to use this, I'll write it up.

In the mean time, I figured out a juicy hack to make this work now. I declare the class twice - one local, with no declarations inside, which I can use in composes, and one global, with all the declarations. I then hack the imported JS object -- using a regex to replace the local name with the global one. Works great, and doesn't pollute my code too badly.

[geelen]

Implementing this now, how's this syntax:

composes: foo bar baz from global;
composes: something-else from "somewhere-else.css";

Ok?

[tslocke]

+1

On 20 Oct 2015, at 09:43, Glen Maddern notifications@github.com wrote:

Implementing this now, how's this syntax:

composes: foo bar baz from global;
composes: something-else from "somewhere-else.css";
Ok?

—
Reply to this email directly or view it on GitHub.

[felixakiragreen]

@geelen looks good!

[bcomnes]

composes: foo bar baz from global;
composes: something-else from "somewhere-else.css";

Seems to be working! Should this get documented in the README?

[juanluispaz]

It looks good! Thanks!

[geelen]

Oh hey this should be closed! We're just finishing up documentation to tell everyone about this & @values and calling 1.0 done!

[ctaepper]

is this working? i don't see any documentation of this?

[nielk]

I'm currently using the composes: className from global; but I don't see any documentation on this. Is this syntax always be available?

[Avivhdr]

Hi @geelen
Do you know what's wrong with the following piece of code?
it doesn't work.

/* style.css */
:global .globalText {
  color: green;
}

Error in compilation:

/* otherStyle.css */
.text {
  composes: globalText from global;
  background-color: #777;
}