Mistcss Versions Save

Mist Hashira

Vue Support

I'm proud to announce that MistCSS now supports Vue! Also, following Vue's tradition, this release is named after an anime.

You can now write your atomic Vue components in CSS only! :green_heart:

/* Button.mist.css */
@scope (button.custom-button) {
  /* ... */
}

mistcss ./components --target=vue

// App.vue
import CustomButton from 'Button.mist`

What's Changed

• fix(cli): handle unknown target by @HaecheonLee in https://github.com/typicode/mistcss/pull/48

New Contributors

• @HaecheonLee made their first contribution in https://github.com/typicode/mistcss/pull/48

Full Changelog: https://github.com/typicode/mistcss/compare/v0.5.0...v0.5.1

🚀

mistcss ./components --target=astro

What's Changed

• Add Astro support
• Add childless html functionality by @The-Code-Monkey in https://github.com/typicode/mistcss/pull/45
• Update TailwindCSS docs
• Various bug fixes
• 0.5.0 by @typicode in https://github.com/typicode/mistcss/pull/47

Breaking

• Rename --render option to --target

Full Changelog: https://github.com/typicode/mistcss/compare/v0.4.0...v0.5.0

0.4.0

• Add Hono support
• Add CSS variables support
• Update https://typicode.github.io/mistcss/
• Fix many bugs

What's Changed

• Add tailwind v4 example by @The-Code-Monkey in https://github.com/typicode/mistcss/pull/37
• Update Tailwind V4 solution by @The-Code-Monkey in https://github.com/typicode/mistcss/pull/38
• 0.4.0 by @typicode in https://github.com/typicode/mistcss/pull/41

Breaking changes

Before:

@scope (.badge) {
  div:scope {

Now:

@scope (div.badge) {
  :scope {

Full Changelog: https://github.com/typicode/mistcss/compare/v0.3.8...v0.4.0

What's Changed

• refactor: fix lint errors by @typicode in https://github.com/typicode/mistcss/pull/30
• test: improve renderer testing by @typicode in https://github.com/typicode/mistcss/pull/31
• feat: improve typing by @The-Code-Monkey in https://github.com/typicode/mistcss/pull/34

Full Changelog: https://github.com/typicode/mistcss/compare/v0.3.7...v0.3.8

What's Changed

• chore: format all files by @typicode in https://github.com/typicode/mistcss/pull/25
• style: component output by @typicode in https://github.com/typicode/mistcss/pull/26
• refactor: split files by @typicode in https://github.com/typicode/mistcss/pull/28
• Keeps original classname as making classname pascal case would break the css. by @The-Code-Monkey in https://github.com/typicode/mistcss/pull/29

Full Changelog: https://github.com/typicode/mistcss/compare/v0.3.6...v0.3.7

What's Changed

• fix: fix rendered code tag having trailing space by @godnondsilva in https://github.com/typicode/mistcss/pull/20
• docs: fix invalid documentation on tailwind the example by @godnondsilva in https://github.com/typicode/mistcss/pull/21
• Update filename creation script by @The-Code-Monkey in https://github.com/typicode/mistcss/pull/23

New Contributors

• @The-Code-Monkey made their first contribution in https://github.com/typicode/mistcss/pull/23

Full Changelog: https://github.com/typicode/mistcss/compare/v0.3.5...v0.3.6

• fix: remove console.log

What's Changed

• feat: support multiple components in a single .mist.css file
• fix: fix rendered code when user defined props are not passed by @godnondsilva in https://github.com/typicode/mistcss/pull/13

Example

Card.mist.css

@scope (.card) { /* ... */ }
@scope (.card-title) { /* ... */ }
@scope (.card-image) { /* ... */ }

App.tsx

import { Card, CardTitle, CardImage } from 'Card.mist`

New Contributors

• @godnondsilva made their first contribution in https://github.com/typicode/mistcss/pull/13

Full Changelog: https://github.com/typicode/mistcss/compare/v0.3.3...v0.3.4

• internal: improved CSS parser