Shadow-cljs: packaging of .css assets

[zcaudate]

I'm following a tutorial for: https://github.com/ag-grid/ag-grid and on it there's a statement to import .css files:

import {Grid} from "ag-grid/main";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/ag-theme-balham.css";

I know it's easy enough to copy the css files over, but I'm wondering how this works with shadow-cljs.

[thheller]

shadow-cljs currently has no support for "building" css files. You must include them manually via other tools.

I do have plans for making this easier but didn't have time to work on it yet.

[thheller]

Oops. Clicked the wrong button. I'll use this issue to track any progress I make on this subject.

[wangzhe1995]

have any idea?

[thheller]

No Progress. I use the node-sass CLI which works reliable enough.

[kennyjwilli]

@thheller Do you have an example of how you use node-sass in combination with shadow-cljs?

[thheller]

@kennyjwilli I'm not using any special integration with shadow-cljs. Just the regular node-sass CLI.

See https://github.com/sass/node-sass#command-line-interface

[rumaysaalvina]

SHUT UP

On Sat, Jun 29, 2019, 2:30 PM Thomas Heller [e-mail]
wrote:

@kennyjwilli https://github.com/kennyjwilli I'm not using any special
integration with shadow-cljs. Just the regular node-sass CLI.

See https://github.com/sass/node-sass#command-line-interface

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/thheller/shadow-cljs/issues/353?email_source=notifications&email_token=AG3MVVT4V4LT7PQAQ25OUN3P44MTFA5CNFSM4FM6SEKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODY3URZQ#issuecomment-506939622,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AG3MVVVDFT4K6W5M3NEDGSTP44MTFANCNFSM4FM6SEKA
.

[kennyjwilli]

@thheller Right. I was mostly interested in if you start up both shadow-cljs and node-sass in the same terminal somehow? Having to run two separate terminals to start dev'ing the frontend is a bit annoying.

[thheller]

Typically I just run 2 separate terminals. But there are enough other options to run multiple processes by just starting one. I have used

• npm-run-all
• node-foreman

in the past. They get the job done just fine.

[thheller]

I've been struggling for over 2 years whether or not I want to do this and finally decided that I don't. If anyone is seriously interested I'm happy to walk you through how it could be done as a build-hook or plugin.

[ghivert]

Hi and thanks for the information.

I ended up using two separate process: one for shadow-cljs, and another one with Gulp running PostCSS with CSS Modules, watching files in background, and generating corresponding cljs files with correct CSS class names, with one CSS file imported in shadow-cljs.

This works like a breeze, even if the tool is not really mature yet (modular-styles), it's on my planning to make it more robust and remove as much dependencies as possible (and a little bit more agnostic to be able to use it in different languages). Maybe it could be used to compile CSS directly from shadow-cljs?

[P233]

Inspired by @ghivert, I created a rollup configuration to integrate sass / postcss / autoprefixer / css modules / minify class to shadow-cljs project. If anyone is interested, please see https://github.com/P233/re-frame-template/blob/master/rollup.config.js

Thank you @ghivert