Use elm-css

[pinx]

https://github.com/rtfeldman/elm-css is nearly out of beta. Maybe an interesting candidate to integrate in elm-ui.

[gdotdesign]

Yes at some point I'll plan to migrate the CSS over to elm-css, there are some issues with generating CSS on the fly that needs to be weighed before committing to it though, also I want to wait until a stable release is ready (both elm-ui and elm-css).

I'll keep this issue open for discussion.

[rtfeldman]

@gdotdesign this is a cool project! I'm not sure what the issues are with generating CSS on the fly, but happy to help and talk through things! 😸

[gdotdesign]

@rtfeldman thanks for offering you help :smile:

So there are a couple of things that needs to be considered about this issue, I'll start with explaining how things currently are and what are the possible alternatives I see for it in elm-css:

• The styles are written in Sass
• All components are using custom tags (like ui-app or ui-button), this is mainly because they are not predefined with any styles and it's not likely that any library or framework can effect them. As I seen there is no way other then using Css.selector which I might behaves differently then a Css.Element (I didn't really dive into the source yet)
• There are some mixins that theoretically can be converted to Css.Mixin, though I'm not sure how complex nested selectors would work (for example https://github.com/gdotdesign/elm-ui/blob/master/stylesheets/ui/states/picker.scss)
• There are variables that can be easily replaced by an options record
• There are some color functions, they can be migrated over without problem or even added to the elm-color-mixing package
• Currently Ionicons and Open Sans are hard coded into the styles which probably needs to change, (The Ionicons can be a seperate SVG package for example)
• Autoprefixer is used provide browser compatibilty
• There are lot of :before / :after are used to provide clues or elements, I'm not sure if it's supported (tried to use them without success).

In a different project we are generating CSS on the fly from a tree like component structure where components can inherit from each other so I have some experience from there, also using autoprefixer there as well:

• one of the problems is that CSS compilation time is ~1s which runs every time the page is loaded, which could be avoided if the CSS is in a separate file then the browser can cache it
• one of the good thing is that the styles and the business logic of the component are in the same file, if we do that with elm-css then either we need to expose everything polluting the scope or prefixing with hinders readablity so if it goes that way then it probably will a separate file for each components style
• in the beginning the styles generated reflected only the components that were visible on the page, but that turned out to be slow because when a new component was introduced we needed to recompile them (with autoprefixer)

So summing up the requirements:

• CSS should be cached (either served in a different file or stored in LocalStorage)
• CSS should be one whole instead of for example multiple style tags or files
• Variables to customize the colors and stuff
• Styles should be readable
• Common styles should be reused among components
• Maybe experiment with CSS Modules (I don't have experience with that)

Huh that ended up more than I though :sweat_smile:

[bgourlie]

I've taken an interest in getting this converted over to elm-css. I've started with implementing scale-color and have submitted a PR for it here.

[gdotdesign]

That's awesome! :)

I've started to migrate some of the CSS in the scoped-css branch: https://github.com/gdotdesign/elm-ui/compare/github-install...scoped-css the scoping and styledNode is as it turns out is a bad idea for multiple reasons, but the rest of the styles can be used as a starting point.

[bgourlie]

Sounds good! For any work I do on this, should I branch off the scoped-css branch and submit PR's to that branch?

[gdotdesign]

No, please create a branch from master, and start the styles in a separate directory somewhere.

Just ignore this module https://github.com/gdotdesign/elm-ui/blob/scoped-css/source/Ui/Styles/Html.elm because it's problematic to go this way.

So what I think we should do is just converting the styles to elm-css as is, meaning one style tag or one external file in the end.

[gdotdesign]

I've migrated all Sass stylesheets to Elm with the 1.0.0 release. I've opted for not using elm-css at this stage, but instead created a more Sass like version of it.

If any of you are interested in how it works check out these files: https://github.com/gdotdesign/elm-ui/blob/master/source/Css/Properties.elm https://github.com/gdotdesign/elm-ui/blob/master/source/Css.elm https://github.com/gdotdesign/elm-ui/blob/master/source/Ui/Styles/Theme.elm https://github.com/gdotdesign/elm-ui/blob/master/source/Ui/Styles.elm https://github.com/gdotdesign/elm-ui/blob/master/source/Native/Styles.js

And the styles are living here: https://github.com/gdotdesign/elm-ui/tree/master/source/Ui/Styles

It should not be hard to migrate them over to use elm-css provided it supports all of the features they need.

I'm closing this since it's been implemented (sort of).