typicode / mistcss

💧 Write atomic components using only CSS! (JS-from-CSS™)

💧 MistCSS

Write components using CSS only

MistCSS is a new, better and faster way to write visual components. CSS-in-JS? Nope! JS-from-CSS 👍

Write your component in CSS only

@scope (button.custom-button) {
  :scope {
    background: black;
    color: white;

    &[data-variant="primary"] {
      background: blue;
    }

    &[data-variant="secondary"] {
      background: gray;
    }
  }
}

Get a type-safe component without writing TypeScript

import { CustomButton } from './Button.mist'

export const App = () => (
  <CustomButton variant="primary">Save</CustomButton>
)

Documentation

https://typicode.github.io/mistcss

Supports

• Next.js
• Remix
• React
• Hono
• Tailwind CSS

mistcss's Issues

Contribution

Hey there, love the idea I would like to help contribute, what sort of stuff is in the roadmap so I can take a look at it and see how I could help out.

Regards

Andy

[Question] Will there be support for other Javascript Frameworks, like VueJs?

Just curious, as the IDEA is great, but will there be support for other Javascript Frameworks thenn ReactJs? Maybe VueJs for example?

Nested composibility??

Just throwing the idea of having nested composibility.

E.g. making a button group from a button component that is also made by mist?

The GitHub page's buttons are redirecting to 404 not found

Hello,

In the GitHub page, there are two buttons: Get Started and Docs on the bottom. They are leading to https://typicode.github.io/mistcss/mistcss/intro and https://typicode.github.io/intro and it looks like not set up properly. It contains mistcss twice in the url, and the other one doesn't contain.

Use CSS Vars to allow direct passthrough of tailwind variables

This is a suggestion on how to handle #36 as it sounds pretty interesting.

The way i was thinking of it was to enable the use of something like

div:scope {
  --padding: 0;
  padding: var(--padding);

 &[data-padding="--spacing-"] {}

which the parser would see this as

type BazProps = {
  children?: ReactNode,
  padding?: string,
} & JSX.IntrinsicElements['p']

export function Baz({ children, padding, ...props }: BazProps) {
  return (
    <p {...props} className="baz" style={{ "--padding": `var(--spacing-${padding})` }>
      {children}
    </p>
  )
}

I know its not the prettiest solution but it could work in terms of how simple it is, or maybe we could even remove the need for the &[data-padding] somehow and resolve this value from the --padding var directly e.g.

div:scope {
  --padding: var(--spacing-0); <-  default value
  padding: var(--padding);

this way we could infer that for padding prop to grab the first half of the assigned ts variable and then concat the prop onto the end.

className not apply

Generates {... props} before className.

Can use the cva solution or just add other classes after the "scoped" class?

'worfklow' typo spotted

hey, the project looks really interesting, cant wait to try it out, spotted a little typo in the docs though :D

Logo isn't shown on the website

Despite working in dev
https://github.com/typicode/mistcss/blob/main/docs/.vitepress/config.ts#L19

Compiler issue with latest version

using version 0.3.5 when running mistcss ./src my button.mist.css gets read but then a file called button.mist.css.tsx got created according to the docs it should be button.mist.tsx.

I am on mac if thats the difference.

Error on NextJS 14: Element type is invalid

I was just trying out usage with a brand new NextJS 14 project, following the steps in the documentation.

When using the Button.mist.css component in a NextJS page I get the following error:

Reproduction here:
https://stackblitz.com/edit/nextjs-qhemj9?file=app%2Fpage.tsx

Apologies if I have set something up wrong!

EDIT:
It appears that NextJS gets confused by the import? appending .tsx onto the end of it fixes the issue.

Added more example cases to the stackblitz, it seems NextJS is trying to import the css file and therefore the import is undefined when used. Another fix is removing the .css bit from the component

New renderer feedback.

Hey @typicode

Is it possible to support variables like this aswell.

https://github.com/The-Code-Monkey/mistcss/blob/feat/variables/fixtures/Foo.mist.tsx

Also with the rewrite it's not possible to have multiple elements per file.

And there are also some html elements that do not support child elements e.g. input.

I can take a look at things like childless elements next week but in terms of the variables unless I get time to understand the new parser fully I won't be able to implement this.

I've linked my repo where I added some stuff prior to the rewrite, but it was very custom to my needs rather than the packages aim

Lowercase classnames

Just noticed something if you use a lowercase classnames the compiler makes it uppercase meaning styles won't apply. I'll make a fix for this tomorrow and send it over.

Generated components' name end with mist.css.tsx

AS-IS

• I followed exactly what the tutorial from the document says.
• I compiled the mistCSS filed using the command below:

"mist": "mistcss ./src",

• However the file name of components generated ends with mist.css.tsx.
  • e.g. from src/components/Button.mist.css to src/components/Button.mist.css.tsx

TO-BE

• The file name should end with mist.tsx following the document.

Ability to send custom parser dir.

Hey, as we have the ability to bake in different renderers for different libraries, could it be possible to pass a dir as an option on --render so we could have fully custom parsers.

PostCSS plugin ?

Hello, I was wondering if it was possible, or if there was a technical reason/limitation for why it isn't a postCSS plugin that could be used inside my chain of postCSS processing ?

I believe it wouldn't break the compatibility (quite the opposite), and would allow to pass an input css file that has been transformed by something else (like my auto-prefixer or whatever).

I know panda-CSS has this, and they also codegen React components.

Have a great day!

[Feature] : Pass the prop directly to the TailwindCSS

Hi @typicode ,

Thank you for this new library.

I like the idea of generating components from CSS instead of integrating CSS in JS.

Honestly, adding CSS to JS is kind of a mess.

I already started using the library (or tool), however, while I was trying to discover the syntax, an idea came to me and I wanted to share it if it is possible to implement it.

@scope (.button) {
  button:scope {
    /* Default style */
    @apply text-base rounded-sm;

    &[data-size='lg'] {
      @apply text-lg;
    }

    &[data-size='sm'] {
      @apply text-sm;
    }

    &[data-danger] {
      @apply bg-red-700 text-white;
    }
  }
}

In the code above, yu see that we repeating the prop checking to apply the TailwidCSS, is it possible to make it like this :

@scope (.button) {
  button:scope {
    /* Default style */
    @apply text-base rounded-sm;
    &[data-size]{
     @apply text-[data-size]
     }  
  }
}

Compiled code example

This seems like such a cool project! While I'm planning to mess around to understand it - I think if you showed the App example as a compiled button it would allow users to see it all in action.

Sass support

@typicode what are your thoughts on sass support I was looking to add it would this be ok?

[Question] There is no way get autocompletion?

when i hit control + space i can't see any css rule, only pseudo things
am i doing something wrong or it is expected?

i use latest mistcss v0.4.0

@scope (button.my-button) {
  :scope {
   /* ...rules */    
  }
}

Request for Additional Usage Examples in Documentation

Dear Maintainers,

Greetings!

I am a developer from the community who has been working with your project. While the existing documentation provides a solid foundation for understanding and applying the project, I believe that including more usage examples would greatly assist both newcomers and experienced developers in mastering the various features and best practices of the project.

Specifically, I think the following areas could benefit from additional examples:

Beginner-Level Examples: Detailed, step-by-step examples for beginners would help them quickly get started with the project.

Advanced Feature Demonstrations: Examples that showcase advanced features or complex use cases can help developers understand how to tackle complex problems in real-world scenarios.

Common Issue Solutions: Providing examples of common issue solutions can allow developers to quickly find answers when they encounter problems.

Best Practice Guidelines: Examples illustrating best practices can help developers avoid common pitfalls and improve the quality and maintainability of their code.

Integration with Third-Party Services: If the project is often used for integration with third-party services, examples in this area would be invaluable.

I understand that creating and maintaining documentation requires a significant amount of time and effort, but I believe that adding more examples will enhance the usability of the documentation and the popularity of the project. If needed, I am willing to contribute my part by providing some examples or helping to improve the existing documentation.

Thank you for your contributions to the project and the community!

Best regards,