Hello! I released a project template and generator:
It creates an Elm app with:
- Local web server and serverless functions (Parcel and Netlify Dev)
- Hot code and style reloading, keeping app state
- CSS transformations with postcss (
- Testing (elm-test and Cypress)
- Optimized and minified production build
- Preview and production deployments
The demo app also has minimal code examples of
Json.Decode to get started with these modules.
Here is a screenshot of the generated app being tested with Cypress:
Woo - many hours saved of setting it up every time.
Thanks a lot !
I was just looking into purgecss, and I couldn’t find much on it in relation to elm. How does it detect the classes in your elm files? Just regex-ing through the files?
Thanks! Indeed, it:
- Looks for files with
.elm extensions: postcss.config.js#L21
- Finds (with a regex) if the class exists in these files: postcss.config.js#L7 (the class extractor works for Tailwind classes, that includes
Note that in elm-batteries,
purgecss is only used for production builds, saving some build time in local development: postcss.config.js#L12
Known limitations and alternatives:
purgecss won’t find and preserve classes created dynamically. Alternatively, we can explicitly whitelist class and tag names: postcss.config.js#L26
- class names found in unused Elm functions will be preserved. Alternatively, and when removing dead code from sources is not an option, we could inspect the
.js production build.
That’s pretty cool, I guess the possibility of including a class by mistake (i.e having a variable or function somewhere of the same name) is more than offset by how simple and predictable it is.
Thanks for making this, as a non-JS person most of these tools are new to me. I’m learning a lot from just browsing through your template and finding out what the build does.
I am curious - why do you favor yarn over npm?
Exactly The main motivation is to use CSS framework like Tailwind (that has thousands of utility classes like
border-l-4…) while controlling the size of the production css.
Thanks for your feedback, I really appreciate!
I have no particular recommandation, is this something you read in the documentation ?
elm-batteries generator and project template support both npm and yarn. For example:
npm init elm-batteries ./my-elm-app
cd my-elm-app && npm run dev
yarn create elm-batteries ./my-elm-app
cd my-elm-app && yarn dev
I have another question: What is the reason for using
rtfeldman/elm-css if you’re using tailwind? Do you want to mix tailwind classes with the option to do something custom here and there?
Exactly, like in the demo
See also configuration and customization via tailwind.config.js
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.