Remove bulma dependency?

[Lanayx]

Hi, thank you for the great library, finally I am able to write F# code without using elmish! Can you please provide example of how to use another CSS framework, rather than bulma (I'm mostly interested in tailwindcss at the moment)? I would also recommend leaving bulma as opt-in dependency rather than hard dependency for Sutil. It seems some support has already been done for Fable and Feliz.

[davedawkins]

Thank for the very nice message, I appreciate that.

I agree with you, Bulma will become an additional package at some point. However, you can ignore it. If you write your code like this:

    Html.div [
        class' "w-64 h-3 bg-gradient-to-br"
    ]

and include tailwindcss into the index.html, it should work just fine.

I'll be happy to put together a working example later if you like.

What we could also do is think about an F# wrapper for tailwind too.

[Lanayx]

I see, my initial thought was that since some work was done for Feliz engine and Sutil uses it, then it can leverage vscode plugin as well, but it doesn't seem to be the case, right? Another big feature of tailwind is the ability to purge unused css, just referencing the whole thing won't make it happen

[davedawkins]

Feliz was reimplemented in Feliz.Engine, and Feliz.Bulma was ported to Bulma.Engine, partly to support Sutil, but also to support any DOM DSL or application that wants to build DOM.

I'm not sure what you mean by vscode plugin. Can you explain a little more? (I use vscode, and plugins, including Ionide, but I'm not sure what you want to leverage).

Regarding unused CSS: I remember seeing something about that. Let me look into it. At this time, I don't know how the unused CSS is being purged. It's possible we can make that work, but I'll need to study it.

[davedawkins]

..OK.. it's possible we can make use of tailwind's purgecss command - it works by searching for class names, and then (I think) strips out unused rules from the CSS. In theory, this could work without any modifications as part of the fable build sequence.

[davedawkins]

https://tailwindcss.com/docs/optimizing-for-production

[Lanayx]

I'm not sure what you mean by vscode plugin. Can you explain a little more? (I use vscode, and plugins, including Ionide, but I'm not sure what you want to leverage).

I meant the link I gave in the first message tailwindlabs/tailwindcss-intellisense#154

[davedawkins]

An update: I have Sutil using tailwind, and purging unused classes. I will check something in later.

Next steps:

• Check basic example in
• Either add intellisense support or create as typed-wrapper (like the Bulma Engine in Sutil). Otherwise you can't tell if you've used a valid class name.

I notice that we may be able to get some use of the Sutil feature 'addClass':

let appStyle = [
    rule "button" [
        addClass "bg-red-50 p-2"
        // Other css styles if you like, but then that's a little non-tailwind
    ]
]   

This says that any <button> element will have classes bg-red and p-2

[davedawkins]

As I said, I'll create a new repo sutil-template-tailwind, but here's how it looks so far.

module App

open Sutil
open Sutil.DOM
open Sutil.Attr

let view() =
    Html.div [
        class' "p-1 bg-gray-200 text-red-400"
        text "Hello World"
    ]

view() |> mountElement "sutil-app"

Here's my package.json (I didn't see the point in complicating the webpack.config.js, but you may disagree)

{
  "private": true,
  "scripts": {
    "start": "dotnet fable watch src/App --runWatch npm run pack",
    "build": "dotnet fable       src/App --run npm run pack:prod",

    "pack": "npm run tailwind && webpack serve",    
    "pack:prod": "npm run tailwind:prod && webpack --mode production",

    "tailwind:prod": "NODE_ENV=production tailwindcss-cli build -o public/tailwind.css",
    "tailwind": "tailwindcss-cli build -o public/tailwind.css"
  },
  "dependencies": {
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.10",
    "tailwindcss": "^2.1.1",
    "tailwindcss-cli": "^0.1.2"
  }
}

tailwind.config.js

module.exports = {
    purge: [
        './src/**/*.fs.js',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

and finally index.html

<!doctype html>
<html>
<head>
  <title>Sutil Hello World</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="fable.ico" />
  <link rel="stylesheet" href="tailwind.css"/>
</head>
<body>
    <div id="sutil-app"></div>
    <script src="bundle.js"></script>
</body>
</html>

[davedawkins]

Output from build

> @ tailwind /Users/david/projects/sutil-template-tailwind
> NODE_ENV=production tailwindcss-cli build -o public/tailwind.css

  
   tailwindcss 2.1.1
  
   🚀 Building from default CSS... (No input file provided)
  
   ✅ Finished in 2.14 s
   📦 Size: 10.08KB
   💾 Saved to public/tailwind.css
  
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./public
ℹ ｢wdm｣: asset bundle.js 1.48 MiB [emitted] (name: main)

We can see the purge has take the CSS down from a potential 3MB to 10KB

[Lanayx]

Wow, thanks for your help! This is already smth to work with, I think this issue can be closed once separate repos are created

[davedawkins]

One more thing. Add this to VSCode's settings.json, and you can use the Tailwind Intellisense plugin :-)

    "tailwindCSS.experimental.classRegex": [
        "class'\\s+\"([^\"]*)\""
    ],
    "tailwindCSS.includeLanguages": {
        "fsharp": "html",
        "fs": "html"
    }

[davedawkins]

[davedawkins]

Example repo here, as promised:

https://github.com/davedawkins/sutil-template-tailwind

[Jlll1]

Is this something that's still on the roadmap? I also think that CSS frameworks should be external to the core library and Bulma shouldn't be included by default.

[davedawkins]

I agree with you. It's not a bad time to split these into separate libraries. I'm pleased people are still interested, thank you