Tailwind, Windi, Twind, UnoCSS or similar Atomic CSS support

[heinthanth]

Hii,

This is feature request. Currently, I can import unocss/runtime script tag and generate CSS only the fly. But this is client side generation.

Can we have atomic CSS support with a nice SSR?

[mashaal]

Better CSS tooling has been on our list for a while. Ideally, we would love to have 1st class support for CSS module import assertions. Posting some links for reference...

denoland/deno#11961
denoland/deno#13898
https://web.dev/css-module-scripts
https://github.com/guybedford/es-module-shims#css-modules

But these may still be a while off -- we can explore other options in the interim, unocss looks great.

[mashaal]

This one just came across my desk: https://open-props.style

This wouldn't require any changes to core to work, if anyone is interested

[cdoremus]

What about -- as a start -- to just minify the static CSS before it is deployed to prod. Use something like https://github.com/postcss/postcss-deno with a minification utility.

[deckchairlabs]

What about -- as a start -- to just minify the static CSS before it is deployed to prod. Use something like https://github.com/postcss/postcss-deno with a minification utility.

Yeah this is a good idea, although I'd recommend using https://github.com/parcel-bundler/parcel-css

[heinthanth]

Yeah ... currently, only way is to write CSS separately, build it and import in Ultra.

[nnmrts]

In case anyone is interested, here is how I implemented postcss support and it's surprisingly easy and performant (works with the current [email protected] version):

src folder structure:

api/
	style.css.js
app.jsx
style.pcss

style.css.js:

import postcss from "postcss";
import postcssNestedProps from "postcss-nested-props";
import postcssNesting from "postcss-nesting";
import postcssHasPseudo from "postcss-has-pseudo";

const {
	readTextFile
} = Deno;

export default async () => {
	const cssFilePath = "./src/style.pcss";

	const cssText = await readTextFile(cssFilePath);

	const output = (await postcss([
		postcssNestedProps,
		postcssNesting,
		postcssHasPseudo
	]).process(cssText, { from: cssFilePath, map: true })).css;

	return new Response(output, {
		headers: new Headers({
			"content-type": "text/css; charset=utf-8"
		})
	});
};

app.jsx:

import React from "react";
import { SWRConfig } from "swr";
import { Helmet } from "react-helmet";
import { Route, Switch } from "wouter";
import ultraCache from "ultra/cache";

const options = (cache) => ({
  provider: () => ultraCache(cache),
  suspense: true,
});

const Ultra = ({ cache }) => {
  return (
    <SWRConfig value={options(cache)}>
      <Helmet>
        <title>Ultra</title>
        <link rel="stylesheet" href="./api/style.css" />
      </Helmet>
      <main>
        <Switch>
          <Route path="/">
            <h1>@__@</h1>
          </Route>
          <Route>
            <strong>404</strong>
          </Route>
        </Switch>
      </main>
    </SWRConfig>
  );
};

export default Ultra;

my import map includes these postcss modules:

    "postcss": "https://deno.land/x/[email protected]/mod.js",
    "postcss-nested-props": "https://esm.sh/postcss-nested-props?deps=postcss@8",
    "postcss-nesting": "https://cdn.jsdelivr.net/npm/postcss-nesting@10/mod.js",
    "postcss-has-pseudo": "https://esm.sh/css-has-pseudo@3",

[mashaal]

Twind, Emotion and Stitches should work in V2