Ex CSS (sass simile in pure elixir)

Your Libraries & OS Mentoring Libraries
,
21

Yep, I’m also not in the loop so don’t know what has to be taken into consideration and limitations or who are the stakeholders. Still annoyed though.

Yeah, some times it’s a bit finicky - but to be honest with so much complexity in tooling, sprawl in packages, etc, I’m amazed it usually just kinda works - though personally I don’t think this is a sane default for “web-dev” work.

22

The package is now available in hex.pm and has been tested under an umbrella, with webpack and without and also on a deployment to to render.com, using the included task to generate the CSS files prior to processing them with npm and phx.digest.

The only dependency is on the file_system package.
If you try it out and find some problem or have suggestions open an issue on GitHub.

CSSEx on hex

Example of a small framework written in CSSEx

1 Like
23

Nice. Do you support postcss’s @apply directive? It is very useful to compose complex css class from simpler and orthogonal building blocks.

24

No, I just checked what it does and if I’m not mistaken it would be doable with the functionality cssex has out of the box.

Imagining you have a theme defined as:


@!theme_a %{
    "background-color": "rebeccapurple";
    "color: "white";
    "border": "1px solid green";
};

You could define a function as:

@fn apply_theme(theme) ->
      Enum.reduce(theme, "", fn({k, v}, acc) -> acc <> "#{k}:#{v};" end)
end;

And then use it as:

.some-class {
    @fn::apply_theme(@::theme_a)
}

And get:

.some-class {
  background-color: rebeccapurple;
  color: white;
  border: 1px solid green;
}

You could also define that in a single file to be used as an includes

@?theme %{
    "background-color": "rebeccapurple";
    "color: "white";
    "border": "1px solid green";
};

background-color: rebeccapurple;
color: white;
border: 1px solid green;

And then:

.some-class {
  @include ./path/to_that_file;
}

And to override the them you would just set it on the parent

@!theme .....;

before doing that.

25

Right now I am using tailwindcss, and I have very long @apply chain:

    .button {
        @apply flex-none px-6 py-1 text-purple-600 inline-block rounded appearance-none font-bold whitespace-nowrap text-lg text-center uppercase;
    }

To rewrite that into your syntax does not seems to be ergonomic?

26

Yeap, for that use case as is no. How are those classes defined?

But it shouldn’t be very difficult to replicate as long as you defined the classes in a way that can be reused by name.

27

Those classes are provided by tailwindcss. The value proposition of tailwindcss is write css horizontally, using the numerous built in utility classes, instead of vertically.

28

Ah yeah there’s no out-of-the-box classes either

I like the idea of @apply, I had not implemented other’s such as @mixin from sass (because @fn would cover it since you can pass a block as the last arg) but I can imagine extending variables to accept blocks and adding a directive like apply where you can write them “free-form” as in your example might be useful.

Can you also just define a class like .flex-one { flex: 1; flex-flow: row wrap;} and then use it in @apply or is some special construct you need to declare?

I usually use a very simple basic stylesheet (the other link) that I wrote in sass and have been using ever since.

29

I have not tried myself, but I think I can. Tailwind has a notion of layers, and it defines 3: base, components and utilities. I think you can reference lower layer classes by name using @apply. I don’t think same layer classes can reference each other though.

30

It seems you need to declare it as a utility class and afterwards you can use it.
Tailwind does a lot of more stuff though.

It could simply be that each selector you declare would become available with something like @expand, and as long as you had referenced it before it would be available - but this might get messy though as if you then change the selector it would affect all others, perhaps you could annotate a selector by declaring @expandable .selector, &etc { rules....; } and this would both create the regular selector and make it available to be expanded, and then @expand .would-take .a-list-of #of-whatever-expandables ? (or @apply works as a name too)

31

Hey, just published a new version with improvements and @expandable & @apply.

$!color red;

@expandable .hoverable {
  color: <$color$>;
  &:hover {
    color: @fn::darken(<$color$>, 10);
  }
  container& {
    background-color: black;
  }
}

.class-1 {
  @apply hoverable;
}

$!color blue;

.class-2 {
  @apply !hoverable;
}

.class-3 {
  @apply ?hoverable;
}

I wrote docs for it on the section I linked above.