Skip to content

v2.0.0-rc.48

Pre-release
Pre-release
Compare
Choose a tag to compare
@github-actions github-actions released this 20 Jan 16:25
· 5 commits to rc since this release
v2.0.0-rc.48
9dc6407

New Features

Cascade layers, resolved #354 @1aron 92277ab

The new cascade layers allows you to manage styles and their precedences more systematically. You can just write your classes as usual without having to worry about style conflicts:

<body class="list-style:none_ul@base">
    <button class="btn flex">Submit</button>
    <ul class="@fade|1s">…</ul>
    <article class="text:16_p@preset">
        <p>…</p>
    </article>
</body>
export default {
    variables: {
        primary: {
            '@light': '#000000',
            '@dark': '#ffffff'
        }
    },
    components: {
        btn: 'inline-flex bg:primary'
    }
}

Generated CSS:

@layer base, theme, preset, components, general;
 
@layer base {
    .list-style\:none_ul\@base ul {
        list-style: none
    }
}
 
@layer theme {
 
    .light,
    :root {
        --primary: 0 0 0
    }
 
    .dark {
        --primary: 255 255 255
    }
}
 
@layer preset {
    .text\:16_p\@preset p {
        font-size: 1rem;
        line-height: calc(1rem + 0.875em)
    }
}
 
@layer components {
    .btn {
        display: inline-flex;
        background-color: rgb(var(--primary))
    }
}
 
@layer general {
    .flex {
        display: flex
    }
 
    .\@fade\|1s {
        animation: fade 1s
    }
}
 
@keyframes fade {
    0% {
        opacity: 0
    }
 
    to {
        opacity: 1
    }
}

Stateful Components, resolved #258

Now you can give abstract components states, such as btn-sm@<sm

<button class="btn btn-md btn-sm@<sm …">Submit</button>
export default {
    components: {
        btn: {
            '': '… inline-flex font:semibold',
            'sm': 'font:12 h:8x px:3x r:6',
            'md': 'font:14 h:10x px:4x r:6',
        }
    }
}

Generated CSS:

@layer base, theme, preset, components, general;
 
@layer components {
    .btn-md {
        font-size: 0.875rem;
        height: 2.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 0.375rem
    }
 
    .btn {
        display: inline-flex;
        font-weight: 600
    }
 
    @media (max-width:833.98px) {
        .btn-sm\@\<sm {
            font-size: 0.75rem;
            height: 2rem;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
            border-radius: 0.375rem
        }
    }
}

Improvements

export default {
-    syntaxes: { ... }
+    rules: { ... }
}
  • Rename the overly generic config.styles to config.components @1aron 5be593c
export default {
-    styles: { ... }
+    components: { ... }
}
React
  • Enhance config resolution and lifecycle management @1aron c027f5f
  • Optimize CSSRuntimeProvider for improved performance @1aron 1b7eebe
  • Prevent the initial secondary rendering of properties @1aron 1577fe9
Runtime
  • Prevent multiple RuntimeCSS instances for the same root element @1aron dc1ec35
Svelte
  • Refactor CSSRuntimeProvider for better config handling and lifecycle management @1aron 289a2b9
Vue
  • Enhance config resolution and lifecycle management @1aron b1492d7

Bug Fixes

Documentation

  • Add initial test cases and templates for CSS cascade layers @1aron 0026939
  • Add installation instructions for @master/normal.css package @1aron f0b26bf
  • Add note on native CSS cascade layers support in browser compatibility guide @1aron b320fc4
  • Revise styles guide with an overview and new examples for abstract styles @1aron bb9f55b
  • Update button class names to use rounded variants for consistency @1aron cee6213
  • Update descriptions for layers and enhance summary in cascade layers guide @1aron 2a44c30

Contributors

0Miles and 1aron
Assets 3
Loading