Lucius/Cassius mixins

[okdewit]

If I implement the Lucius mixin example:

transition val =
    [luciusMixin|
        -webkit-transition: #{val};
        -moz-transition: #{val};
        -ms-transition: #{val};
        -o-transition: #{val};
        transition: #{val};
    |]

myCSS =
    [lucius|
        .some-class {
            ^{transition "all 4s ease"}
        }
    |]

I get a type error:

 No instance for (IsString a0)
      arising from the literal ‘"all 0.2s ease-out"’
    The type variable ‘a0’ is ambiguous

Which I solved by defining the type explicitly, although I do not know if this is correct.

module Mixin where

{-# LANGUAGE QuasiQuotes #-}
import Text.Lucius
import Data.Text

transition :: Text -> Mixin
transition val =
    [luciusMixin|
        -webkit-transition: #{val};
        -moz-transition: #{val};
        -ms-transition: #{val};
        -o-transition: #{val};
        transition: #{val};
    |]

Then, in a .lucius template file this works fine:

#menu {
    ^{transition "all 0.2s ease-out"}
}

but in a .cassius file this doesn't, both with luciusMixin and cassiusMixin:

#menu
    ^{transition "all 0.2s ease-out"}

#menu {
    ^{transition "all 0.2s ease-out"};}
" (line 12, column 1):
unexpected end of input
expecting "#", "@", "/*", "\\" or ":"
    Code: widgetFile "main"
    In the splice: $(widgetFile "main")

[okdewit]

To clarify:

luciusMixin in a quasiquoted lucius fragment works if I specify the type signature for the mixin.
luciusMixin in a lucius template works if I specify the type signature for the mixin.
cassiusMixin in a lucius template works if I specify the type signature for the mixin.

luciusMixin in a quasiquoted cassius fragment fails with unexpected end of input.
cassiusMixin in a cassius template fails with unexpected end of input.

My experience with Yesod & Shakespeare is limited, but it seems something is going wrong when handling interpolation in Cassius?

[snoyberg]

Could you provide a Gist or similar demonstrating the full failing case?

[okdewit]

https://gist.github.com/okdewit/5c9e02def4d6b4e8793d35bc7ca74165

It's a very basic setup, after generating a scaffolded site I only changed some routing. I wanted to keep the sample homepage intact as a quick reference, so I made a route/handler/templates next to it called "main".

I created a "Service" directory with a Mixin.hs and Theme.hs in it. Coming from PHP frameworks I felt like I should keep the controllers/handlers as clean as possible, so I wrote those snippets as modules, and registered them in the cabal file under exposed-modules. All of that works very well!

If I keep the Mixin.hs file unchanged (with the cassiusMixin), change the file extension of the style template from main.cassius to main.lucius, and add the brackets, the mixin works!

The main.cassius template also works as expected if I use a normal Text interpolation:

#menu
    background: #{menuBackground theme};

So I suspect that even though Cassius & Lucius use the same parser, Cassius just can't deal with the caret interpolation?

[snoyberg]

Turns out that Lucius didn't have support for dealing with a trailing semicolon after a mixin. I've just pushed a commit to master that should fix this, can you test it out and confirm it works? Assuming you're building with Stack, you'll want to modify your stack.yaml to include the 7e3bbf7 commit of this repo with something like this in your packages:

- location:
    git: https://github.com/yesodweb/shakespeare
    commit: 7e3bbf700b2104e4297bcc6d49bcd05211a5ecc8
    extra-dep: true

[MaxGabriel]

It's really cool how easy Stack makes it to test a bugfix like this 👍

[okdewit]

After adding the package location to stack.yaml and performing a stack clean / stack build, I can confirm that it works great now!

[snoyberg]

Awesome, I've just released this to Hackage as 2.0.11.1.