unocss icon indicating copy to clipboard operation
unocss copied to clipboard

Published 20 hours ago • verified publisher icon unocss

Input support at @unocss/cli to process css

Open humrochagf opened this issue 1 year ago • 2 comments

Clear and concise description of the problem

The main thing that is blocking me from adopting Unocss is the possibility to pass a css file as input to be parsed by the cli.

Static site generators and backend frameworks that are not js based don't need a super big js setup to work and most of the time the js setup is just to parse the css.

Right now if I want to use the cli to not need to make a big js setup I can't fully use Unocss, all screen size specific logic needs to be written outside Unocss because I can't pass a css file with the cli to run the transformers in it.

Suggested solution

Having an input config to the @unocss/cli to process the css and apply the transformers would be awesome :slightly_smiling_face:

Alternative

Maybe an integration guide on how to have a minimal js setup of a non js project just to be able to use the transformers would be also a nice option.

I tried to make it run with postcss just with a plain html page and a single css file with just @unocss in it and it didn't turn out as expected, it took a long time to process and generated a huge output in comparison with the same run using the cli.

Additional context

No response

Validations

  • [X] Read the Contributing Guidelines.
  • [X] Read the README.md of using the package.
  • [X] Already used the Interactive Docs.
  • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

humrochagf avatar Dec 14 '23 02:12 humrochagf

I found out a config that works, maybe it worth having it in the docs.

Minimal HTML layout:

index.html
main.css
package.json
postcss.config.cjs
uno.config.ts

The index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="styles.css" rel="stylesheet">
</head>

<body>
  <h1 class="text-center">Hello World</h1>
</body>

</html>

The main.css file:

@unocss;

@screen md {
  body {
    @apply bg-red-800;
    color: theme('colors.red.300');
  }
}

The package.json file:

{
  "scripts": {
    "dev": "postcss main.css --watch -o styles.css",
    "build": "postcss main.css -o styles.css"
  },
  "devDependencies": {
    "@unocss/postcss": "^0.58.0",
    "@unocss/transformer-directives": "^0.58.0",
    "postcss-cli": "^11.0.0",
    "unocss": "^0.58.0"
  }
}

The postcss.config.cjs

module.exports = {
  plugins: {
    '@unocss/postcss': {},
  },
}

The uno.config.ts file:

import {
  defineConfig,
  presetUno,
} from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  content: {
    filesystem: [
      'index.html',
    ],
  },
  presets: [
    presetUno,
  ],
  transformers: [
    transformerDirectives(),
  ],
})

With this setup I can run unocss in a non javascript setup and have access to the transformers feature.

With @unocss/cli this is not possible because you can't pass a css input to the cli.

humrochagf avatar Dec 15 '23 02:12 humrochagf

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] avatar Feb 13 '24 02:02 stale[bot]