Can we use Master CSS for React Component Library? #69

elamandeep · 2022-09-28T06:39:29Z

elamandeep
Sep 28, 2022

Hi Master CSS Team! Loved the idea behind Master CSS. Actually , I am working on my React UI library and I don't want to use CSS in JS library. So, I am looking towards utility frameworks like Tailwind CSS. The problem with Tailwind CSS we can't use sass like feature. So , i thought of using something like sass and I found Master CSS. I will soon going to learn and implement into my React UI Library.

Few questions wandering in my mind 👇

Will it works for JSX?
Final bundle size of final css code
How will I use finale css code?
Any Concept of grouping
Will it work properly for my library ?

I am bit tensed about last question.

1aron · 2022-09-28T08:02:38Z

1aron
Sep 28, 2022
Maintainer

@elamandeep Thx for the support and these questions are sensible 👍🏻

Q1: Will it works for JSX?

We created a syntactic sugar similar to the concept of Styled Components, which can greatly simplify and reuse your code.
I personally rely heavily on the package, and you can do something magically like this:

import element from '@master/style-element.react'
const Button = element.button`inline-flex font:14`
export default function App() {
    return (
        <Button className="uppercase">submit</Button>
    )
}

The official website uses Next.js + Master CSS so it works really well.

Q2: Final bundle size of final CSS code

It depends on the compilation mode you adopt.

JIT Compilation

It's 🤯 zero CSS bundle in JIT compilation.
You can enable the JIT engine for a fixed cost of ~14KB and all CSS will be injected on the fly at browser runtime.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.master.co/css"></script>
</head>
<body>
    <h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
</body>
</html>

The matching and generation cycle for each class name takes about ~0.01ms. It's super fast, so you hardly have to worry about performance.

CSS Hydration ( SSG/SSR + JIT )

We're probably the first CSS language to come up with CSS hydration techniques. We currently only have the guide for Next.js and let me explain with it.

The following example is to add pre-generated CSS to the Next.js main file and inject it inline into the <head> of each page. At this stage of execution, all JSX has been rendered into HTML, so most dynamic class names including conditional expressions can be predicted and generated, which can improve the drawbacks of FCP caused by simply using JIT.

So what role does JIT play here? You might have logic like this in your JSX source code:

<div className={isOpen ? 'block' : 'hide'}>

Assuming isOpen is true at SSR/SSG, block will be pre-generated in <style>:

...
<head>
    <style>.block{display:block}</style>
</head>
...

But the CSS rule of hide has not been generated, because it has not yet appeared in the DOM tree, such class names dynamically generated on the client side due to interaction/input cannot be predicted. At this time, the hydration of JIT comes in handy.

You can even do things that AOT can't:

<div className={`font:${size}`}>

So now, you get runtime flexibility and faster page loads.

AOT Compilation at v2.0

We're currently working on 2.0 in full force, and the production version may be released in more than a month. Here's a brief introduction:

Master CSS AOT compilation scans your HTML, Javascript and any other files to extract class names, automatically generates CSS rules and injects them into corresponding HTML or static CSS files.

Q3: How will I use final CSS code?

One of the biggest features of using Master CSS is that the CSS rules are automatically generated, you don't need to open the CSS file at all, just import it according to the mode you use.

Writing something html:

<div class="font:heavy font:24@md hide@print">...

And automatically generate CSS to inject into HTML or browser:

.font\:heavy {
    font-weight: 900
}

@media print {
    .hide\@print {
        display: none
    }
}

@media (min-width:1024px) {
    .font\:24\@md {
        font-size: 1.5rem
    }
}

Q4: Any Concept of grouping

Use the official package as Q1 says —— @master/style-element.react

Use the Group Styles feature of Master CSS:

<ul class="{block;width:fit;text:center;font:24;font:blue/.5}>li:hover@md"></ul>

automatically generated as:

@media (min-width:1024px) {
    .\{block\;width\:fit\;text\:center\;font\:24\;font\:blue\/\.5\}\>li\:hover\@md>li:hover {
        display: block;
        width: fit-content;
        text-align: center;
        font-size: 1.5rem;
        font: blue/.5
    }
}

Use the .classes config:

The current v1 usage:

import { init, Style } from '@master/css';

Style.extend('classes', {
    btn: 'font:14 h:40 h:32.sm text:center bg:red:hover',
    card: 'p:20 b:1|solid|gray-80 bg:white'
});

init();

Upcoming usage in 2.0 master.css.js:

module.exports = {
    classes: {
        btn: 'font:14 h:40 h:32.sm text:center bg:red:hover',
        card: 'p:20 b:1|solid|gray-80 bg:white'
    }
}

Then add the semantic class name to the element as usual:

<button class="btn">...</button>
<div class="card">...</div>

Check out the simple documentation —— Reusing Design - Master CSS

Q5. Will it work properly for my library ?

Sure, it's a brand new CSS language that can be used in design systems, library development, projects of all sizes.

Any question ask us：Join our discord channel

0 replies

elamandeep · 2022-09-28T08:11:27Z

elamandeep
Sep 28, 2022
Author

@1aron Thanks for your response 🙏

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can we use Master CSS for React Component Library? #69

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Can we use Master CSS for React Component Library? #69

elamandeep Sep 28, 2022

Replies: 2 comments

1aron Sep 28, 2022 Maintainer

Q1: Will it works for JSX?

Q2: Final bundle size of final CSS code

JIT Compilation

CSS Hydration ( SSG/SSR + JIT )

AOT Compilation at v2.0

Q3: How will I use final CSS code?

Q4: Any Concept of grouping

Q5. Will it work properly for my library ?

elamandeep Sep 28, 2022 Author

elamandeep
Sep 28, 2022

1aron
Sep 28, 2022
Maintainer

elamandeep
Sep 28, 2022
Author