Ex CSS (sass simile in pure elixir)

Great idea. If you are introducing elixir grammar into CSS, I’d like to see something that is completely elixir; ie a full set of elixir macros and functions to write CSS in 100% elixir grammar, sort of like what ecto does for SQL.

The current landscape of various CSS techs is sad. The only thing that has momentum is tailwind, and it is incredibly slow to compile. Also the new version has the brilliant idea of changing whitespace-no-wrap to whitespace-nowrap for no apparent reason.

Thanks

What syntax/api are you thinking? And how would that work? IT would generate the files on compile?

I personally like how CSS works - just miss not having some basic constructs to generate repetitions with slight changes or not being able to do nested selectors (with sass’ &) that results in repeating a lot of declarations. I haven’t used tailwind that much, I can see it working but I think it adds a lot of class declarations to the html being generated (although some people swear by it and its maintainability), I’m just not sure it’s the best approach to CSS.

Great! I don’t want to put you to any bother, but could you please in the next step replace webpack and npm?

I haven’t think it through, but I think a elixir-ish DSL that compiles down to plain CSS is doable. I prefer it to be true elixir instead of some eex template so I can use the full power of elixir. If it can express 99% of the CSS constructs, the remaining 1% can be done in a escape hatch similar to an ecto fragment.

Like Temple - HTML DSL for Elixir and Phoenix but for CSS?

I actually wrote my own html DSL: html_writer

but for CSS if there are more people interested we could do something more advanced, think something like Ecto.

Building CSS is really straightforward, parsing isn’t complex but it’s more complex than building it.

I’m just not sure about what would be the syntax and the benefits of having it written in Elixir (while in HTML I can clearly see why it can help).

Taking this example from Temple

    header do
      section class: "container" do
        nav role: "navigation" do
          ul do
            li do: a("Get Started", href: "https://hexdocs.pm/phoenix/overview.html")
          end
        end

        a href: "http://phoenixframework.org/", class: "phx-logo" do
          img src: Routes.static_path(@conn, "/images/phoenix.png"),
              alt: "Phoenix Framework Logo"
        end
      end
    end

CSS is already sort of structured and using the & for instance to style the header & section with a class “container”

@!bg_color white; // these need not be set in a file,  while usually you would
// write it in files, the parser itself can take these as values when started in the
// form of a map where each key is variable name, like %{bg_color: "white", text_color: ...}
@!text_color rgb(75,75,75);

header {
  background-colour: <$bg_color$>;
  color: <$text_color$>;
  width: 100%;
  section.container {
     width: 100%;
     display: flex;
     flex-flow: row no wrap;
     justify-content: space-between;
     //....
  }
}

Are you thinking of something like:

Stylesheet.new()
|> rule("header section.container", width: "100%",  other: "rules", ...)
|> media(type: :print, min: "565px", width: "95%")

?

Just trying to understand what it would look like.

Someone’s working on an erlang to js implementation!

A different syntax only makes sense if it enables new and productive way to refactor the code. Sorry I don’t use CSS heavy enough to make any good suggestion.

Parsing CSS is really annoying because test suits assume that you want have the same experience as you do with browsers which is that you can throw a lot of crap at it and it still works

But if you want to have a fairly standard compliant parser then I have one. It’s based of the CSS spec, it’s I believe only failing because I have to match test suits:
https://github.com/olafura/ex_css

It doesn’t not yet support the nesting tricks that postcss and sass use.

My intent was and is still to have something akin on styled components available for Elixir. It’s just sometimes hard to find time