I made CSS preprocessor for Vanilla Extract

[black7375]

Hello, Vanilla Extract community!

I'm excited to share a new CSS-in-JS library project I've been working on called 'mincho'. This project is based on Vanilla Extract and aims to provide powerful CSS preprocessor features optimized for TypeScript.

Here are some key features we've implemented so far:

1. Nesting Syntax:
   Similar to SCSS, we support nesting for properties, selectors, and media queries.

   const sample = css({
     width: 200,
     font: {
       size: 10,
       weight: "bold"
     },
     ":hover": {
       background: "blue"
     },
     "@media": {
       "(min-width: 768px)": {
         width: 300
       }
     }
   });

2. Conditional Styles:
   Inspired by Panda CSS's Conditional Styles, we use _ for easy representation of pseudo-classes and pseudo-elements.

   const sample = css({
     background: "#EEEEEE",
     _hover: {
       background: "blue"
     },
     __before: {
       content: '""',
       display: "block"
     }
   });

3. Property Merging:
   Drawing from Less's Merge feature, we allow writing complex property values across multiple lines.

   const sample = css({
     boxShadow$: ["inset 0 0 10px #555", "0 0 20px black"],
     transform_: ["scale(2)", "rotate(15deg)"]
   });

4. Property Value Referencing:
   Implementing Stylus's property value referencing, we allow referencing values from other properties.

   const sample = css({
     width: 100,
     marginLeft: "@width",
     marginTop: "calc(-(@width / 2))"
   });

This project is still in its early stages, and the API may be unstable. However, we're exploring new possibilities in CSS-in-JS through this work.

For a more detailed discussion about the project, our future plans, and an in-depth exploration of CSS-in-JS and design systems, please check out the full article here:

• Link: https://dev.to/black7375/rethinking-css-in-js-5dip

We welcome your thoughts and feedback. Let's work together to create a better CSS-in-JS ecosystem!

Lastly, I'd like to express my sincere gratitude to the @askoufis who answered my questions. Your responses were invaluable and made writing tests for this project much easier. Without your help, it would have been extremely challenging to properly test and validate our implementations. Thank you for your support and guidance!

Thank you!

[cqh963852]

Hi, I have been using vanilla-extract for a while. But there is one thing that does not meet my needs, and I would like to see if your library has a solution.

When I create a style, I want to be able to use it inline, for example on devices of different sizes.

// demo.css.ts
const demo = style({
//   ... some style
})

// Demo.tsx
<div classname={css({
   media:{
       lg: demo
   }
})}>

---

This method is a bit like the usage in tailwindcss <div classname="lg:demo">

[black7375]

Static analysis of these cases requires AST traversal, so this is not yet supported.
Even if it is implemented, there will be trade-offs such as build time.