diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..4b7a46c --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,28 @@ +# Changelog + +## [v1.1.0] - 2024-11-23 + +> Full release notes: [releases/v1.1.0.md](./releases/v1.1.0.md) + +### Added + +- Grimoire CSS JS: JavaScript wrapper for seamless integration. +- Plugins for Vite, Webpack, Rollup. +- 632 new animations. + +### Improved + +- Component initialization performance (2x boost). +- Enhanced error messaging. + +### Fixed + +- Improved regex patterns to support all types of quotes. + +--- + +## [v1.0.0] - 2024-10-21 + +**Initial Release** + +Grimoire CSS debuts as a powerful CSS system engine designed for flexibility and performance. diff --git a/README.md b/README.md index 117b23d..8bc72d2 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ <div align="center"> -<img height="128" alt="Grimoire CSS logo" src="./assets/grimoire-css-logo.png"> +<img height="128" alt="Grimoire CSS logo" src="./assets/grimoire-css-logo.svg"> [![Current Crates.io Version](https://img.shields.io/crates/v/grimoire_css.svg)](https://crates.io/crates/grimoire_css) [![Test Status](https://github.com/persevie/grimoire-css/actions/workflows/quality.yml/badge.svg)](https://github.com/persevie/grimoire-css/actions/workflows/quality.yml) @@ -16,12 +16,13 @@ <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> -**Table of Contents** + - [ -- [Welcome to the Circle: Unlock the Magic of CSS with Grimoire](#welcome-to-the-circle-unlock-the-magic-of-css-with-grimoire) - [ - Craft Your Code, Cast Your Spells - ](#craft-your-code-cast-your-spells) - - [A Spell System That Unleashes the Full Power of CSS - With No Limits, No Extra Learning](#a-spell-system-that-unleashes-the-full-power-of-css--with-no-limits-no-extra-learning) +Craft Your Code, Cast Your Spells +](#craft-your-code-cast-your-spells) + +- [Welcome to the Circle: Unlock the Magic of CSS with Grimoire](#welcome-to-the-circle-unlock-the-magic-of-css-with-grimoire) + - [A Spell System That Unleashes the Full Power of CSS - With No Limits, No Extra Learning](#a-spell-system-that-unleashes-the-full-power-of-css---with-no-limits-no-extra-learning) - [Recap](#recap) - [Scroll: Crafting Reusable, Dynamic CSS with Infinite Flexibility](#scroll-crafting-reusable-dynamic-css-with-infinite-flexibility) - [Inheritance with `Scrolls`: The Power of Composition](#inheritance-with-scrolls-the-power-of-composition) @@ -47,8 +48,8 @@ - [`mrs`: Make Responsive Size](#mrs-make-responsive-size) - [Example Usage](#example-usage) - [The Power of Grimoire’s Variables and Functions](#the-power-of-grimoires-variables-and-functions) - - [CSS Optimization: Minification, Vendor Prefixes, and Deduplication - All with CSS Cascade in Mind](#css-optimization-minification-vendor-prefixes-and-deduplication--all-with-css-cascade-in-mind) - - [Performance-Driven by Rust: Parallel Processing and Auto-Scaling Built In](#performance-driven-by-rust-parallel-processing-and-auto-scaling-built-in) + - [CSS Optimization: Minification, Vendor Prefixes, and Deduplication - All with CSS Cascade in Mind](#css-optimization-minification-vendor-prefixes-and-deduplication---all-with-css-cascade-in-mind) + - [Performance-Driven by Rust](#performance-driven-by-rust) - [Language-Agnostic Parser: Extracting Spells from Any File, Any Format](#language-agnostic-parser-extracting-spells-from-any-file-any-format) - [Spells in Plain Text with Template Syntax](#spells-in-plain-text-with-template-syntax) - [A Streamlined CLI with a Strict and Straightforward API](#a-streamlined-cli-with-a-strict-and-straightforward-api) @@ -59,7 +60,7 @@ <!-- END doctoc generated TOC please keep comment here to allow auto update --> -> Demo projects, contribution guides, instructions, and recipes are on the way. Stay tuned for updates! +> Demo projects and recipes are on the way. Stay tuned for updates! # Welcome to the Circle: Unlock the Magic of CSS with Grimoire @@ -356,7 +357,7 @@ Grimoire CSS doesn’t just give you the tools to build powerful styles from scr ### Built-In Animations: Ready When You Are -Grimoire CSS comes loaded with **hundreds of built-in animations**. These animations are lightweight and efficient - they are only compiled if you actually use them. To trigger one, simply use its name in either the `animation-name` or `animation` CSS rule. But Grimoire CSS doesn’t stop at just applying animations; it also simplifies the process of adding associated rules. +Grimoire CSS comes loaded with **hundreds of built-in animations** (700+ at the moment). These animations are lightweight and efficient - they are only compiled if you actually use them. To trigger one, simply use its name in either the `animation-name` or `animation` CSS rule. But Grimoire CSS doesn’t stop at just applying animations; it also simplifies the process of adding associated rules. For example, the predefined scroll `g-anim` allows you to apply an animation and its associated rules at the same time. Here, `g-` is the prefix, and `anim` is a short version of the spell `animation`. With this scroll, you can quickly inject an animation along with the necessary rules - saving time and keeping your styles clean and organized. @@ -469,16 +470,10 @@ But it doesn’t stop there. Grimoire CSS integrates **LightningCSS** to take yo All of this happens while preserving the **CSS cascade** - no unintentional overwrites, no broken styles. Just clean, optimized CSS that’s ready for any environment. -## Performance-Driven by Rust: Parallel Processing and Auto-Scaling Built In +## Performance-Driven by Rust Grimoire CSS is written entirely in **Rust**, a language designed for high performance. But we didn’t stop at Rust’s natural speed. Grimoire CSS is built with a commitment to efficiency, ensuring your CSS generation is fast, scalable, and precise. -One of the key features is **parallel processing**. Grimoire CSS knows when to scale - automatically. For projects with more than 10 files to process (whether parsing, writing, or injecting), Grimoire kicks into **parallel mode**, running tasks simultaneously to save time. For smaller projects with fewer than 10 files, it sticks to the classic execution method, ensuring order is maintained without sacrificing performance. - -This **auto-scaler** ensures that whether you're working on a large-scale project or a small, focused application, Grimoire CSS adapts to meet your needs, processing your CSS efficiently and reliably. - -Here’s the polished version of your next two sections, maintaining the technical depth while making it more engaging and professional: - ## Language-Agnostic Parser: Extracting Spells from Any File, Any Format Grimoire CSS isn’t just tied to traditional CSS, JavaScript, or HTML files. The beauty of its **language-agnostic parser** is that it can parse spells from any file or extension. Whether you’re working with `.html`, `.tsx`, `.mdx`, or something else entirely, Grimoire CSS can handle it. @@ -515,7 +510,7 @@ Here’s a refined version of the remaining parts, keeping the technical depth a ## Easy Migration with Grimoire CSS Transmute (gcsst) Utility -Migrating to Grimoire CSS is simple, thanks to the Grimoire CSS Transmute utility, also known as gcsst. This CLI tool takes the paths of your built CSS files (or the content of built CSS if you’re working in a web environment) and returns a transmuted.json file in the following format: +Migrating to Grimoire CSS is simple, thanks to the Grimoire CSS Transmute utility, also known as **gcsst**. This CLI tool takes the paths of your built CSS files (or the content of built CSS if you’re working in a web environment) and returns a transmuted.json file in the following format: ```json { @@ -529,7 +524,7 @@ Migrating to Grimoire CSS is simple, thanks to the Grimoire CSS Transmute utilit } ``` -`gcsst` parses the existing CSS and automatically generates corresponding spells for each class. One of the standout features of **gcsst** is the structure of the **transmuted.json** file, particularly the classes property. It’s designed to look like the structure of a scroll, except for the `oneliner` property. This makes it incredibly easy to create a scroll or copy-paste the single-line class into your component with minimal effort. +**gcsst** parses the existing CSS and automatically generates corresponding spells for each class. One of the standout features of **gcsst** is the structure of the **transmuted.json** file, particularly the classes property. It’s designed to look like the structure of a scroll, except for the `oneliner` property. This makes it incredibly easy to create a scroll or copy-paste the single-line class into your component with minimal effort. By simplifying the migration process, **gcsst** helps you move to Grimoire CSS without hassle, and you can instantly start leveraging the power of spells. @@ -541,14 +536,24 @@ Grimoire CSS is built to integrate seamlessly into a wide range of ecosystems. I - **Single Executable Application**: A standalone binary for those who prefer a direct, no-nonsense approach. - **NPM Library**: A Node.js-compatible interface, perfect for JavaScript and web developers. + - gcssjs - bin/cli versions (repo)[https://github.com/persevie/grimoire-css-js] + - webpack/rollup/vite plugins (repo)[https://github.com/persevie/grimoire-css-js/tree/main/plugins] - **Rust Crate**: For developers building in Rust or those who want to integrate Grimoire CSS at the system level. The core of Grimoire CSS is architected entirely in Rust, ensuring top-notch performance and scalability. The main repository compiles both into a standalone executable (SEA) and a Rust crate, meaning you can use it in different environments with ease. -The `grimoire-css-js` _(WIP)_ takes the core crate and wraps it into a Node.js-compatible interface, which is then compiled into an npm package. Whether you’re working with Rust, Node.js, or need a direct CLI, Grimoire CSS is ready to integrate into your workflow and bring powerful CSS management wherever you need it. +The `grimoire-css-js` takes the core crate and wraps it into a Node.js-compatible interface, which is then compiled into an npm package. Whether you’re working with Rust, Node.js, or need a direct CLI, Grimoire CSS is ready to integrate into your workflow and bring powerful CSS management wherever you need it. ### Installation +**Rust crate:** + +If you’re using Rust, simply add Grimoire CSS to your Cargo.toml, and follow the link for documentation about crate: [docs.rs](https://docs.rs/grimoire_css/1.0.0). + +```bash +cargo install grimoire_css +``` + **Single Executable Application (SEA):** 1. Download the binary for your operating system from the [releases page](https://github.com/persevie/grimoire-css/releases). @@ -557,7 +562,7 @@ The `grimoire-css-js` _(WIP)_ takes the core crate and wraps it into a Node.js-c **NPM Library:** ```bash -npm install grimoire-css-js +npm i @persevie/gcssjs ``` **Once installed, you can run the following commands:** @@ -565,31 +570,27 @@ npm install grimoire-css-js Initialize a Grimoire CSS config in your project: ```bash -grimoire-css init +grimoire_css init ``` or if you are using NPM library: ```bash -grimoire-css-js init +gcssjs init ``` Build your CSS using the Grimoire CSS config: ```bash -grimoire-css build +grimoire_css build ``` or if you are using NPM library: ```bash -grimoire-css-js build +gcssjs build ``` -**Rust Crate:** - -If you’re using Rust, simply add Grimoire CSS to your Cargo.toml, and follow the link for documentation about crate: [docs.rs](https://docs.rs/grimoire_css/1.0.0). - ## The Arcane Circle Grimoire CSS gives you the freedom to create styles that work exactly the way you want them to - no rigid rules or constraints. Whether you’re crafting dynamic interactions or fine-tuning layouts, Grimoire adapts to your needs, making each step straightforward and rewarding. diff --git a/assets/grimoire-css-logo.svg b/assets/grimoire-css-logo.svg new file mode 100644 index 0000000..228716d --- /dev/null +++ b/assets/grimoire-css-logo.svg @@ -0,0 +1,5 @@ +<svg width="445" height="400" viewBox="0 0 445 400" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M92.8498 185.267C99.7243 192.337 101.192 202.653 97.718 211.705C96.0668 216.008 93.4574 220.016 91.1351 223.982L83.1281 237.647C80.6767 241.839 77.6862 246.433 77.6624 251.451C77.644 255.33 79.3236 259.271 82.0714 261.996C83.9687 263.879 86.5604 265.509 89.2389 265.883C95.4285 266.747 102.024 266.312 108.271 266.311L139.819 266.308C174.019 266.305 208.282 266.759 242.473 266.305C235.115 281.298 223.898 291.578 206.833 293.722C200.083 294.571 193.029 294.181 186.237 294.173C175.465 294.158 164.675 294.289 153.906 294.144C150.938 294.105 145.44 293.232 143.055 295.283C142.298 295.935 141.98 296.819 141.951 297.799C141.926 298.725 142.127 299.625 142.807 300.293C143.762 301.233 145.352 301.524 146.642 301.598C151.288 301.866 156.144 301.51 160.817 301.51L239.423 301.517C247.88 301.522 256.376 301.713 264.827 301.478C259.658 312.7 251.869 321.469 240.136 326.089C238.18 326.873 236.177 327.509 234.127 327.995C232.077 328.482 230.002 328.814 227.902 328.991C220.619 329.633 212.989 329.18 205.664 329.177L162.729 329.195C157.516 329.215 151.941 328.679 146.775 329.144C145.413 329.267 143.774 329.565 142.777 330.568C142.185 331.163 141.947 331.896 141.95 332.725C141.953 333.739 142.185 334.895 142.96 335.611C143.667 336.262 144.654 336.547 145.592 336.626C149.299 336.942 153.221 336.68 156.952 336.679L279.746 336.674C273.25 351.324 261.14 361.53 245.108 363.879C240.003 364.627 234.737 364.392 229.59 364.385L159.27 364.348C154.998 364.314 146.139 363.142 142.81 365.772C142.245 366.218 141.764 366.879 141.711 367.619C141.631 368.701 142.259 369.898 143.002 370.647C143.671 371.322 144.657 371.67 145.59 371.752C148.205 371.98 151.023 371.71 153.662 371.708L231.788 371.748C225.948 383.15 218.75 391.866 206.384 396.553C201.949 398.234 197.329 399.142 192.605 399.475C184.115 400.074 175.389 399.671 166.87 399.666L78.0004 399.669C69.5794 399.671 60.9157 400.055 52.5283 399.27C50.8995 399.133 49.2797 398.927 47.6688 398.651C46.058 398.375 44.4619 398.03 42.8807 397.617C41.2994 397.203 39.739 396.722 38.1993 396.173C36.6595 395.626 35.1462 395.012 33.6593 394.333C19.509 387.911 8.9351 375.989 3.50877 361.505C-0.4554 350.925 -1.11678 338.074 1.81162 327.133C4.88253 315.661 12.1757 305.094 18.0875 294.915L47.5946 243.795C49.9904 239.638 52.3137 235.44 54.7716 231.318C57.047 227.503 58.9982 223.982 61.434 219.61C76.2166 193.079 85.0309 177.677 85.0309 177.677C85.0309 177.677 89.9299 182.263 92.8498 185.267Z" fill="#663399"/> +<path d="M233.213 389.434C235.898 379.945 244.099 373.516 253.675 371.999C258.227 371.277 263.003 371.533 267.599 371.561L283.437 371.663C288.292 371.69 293.766 371.983 298.124 369.494C301.492 367.571 304.065 364.146 305.052 360.403C305.733 357.819 305.85 354.759 304.834 352.253C302.488 346.46 298.814 340.966 295.688 335.556L279.912 308.236C262.81 278.62 246.071 248.721 228.583 219.337C245.245 218.212 259.757 222.787 270.147 236.494C274.256 241.915 277.446 248.219 280.835 254.106C286.208 263.441 291.716 272.72 296.976 282.119C298.425 284.709 300.418 289.906 303.387 290.947C304.33 291.276 305.255 291.11 306.118 290.644C306.933 290.203 307.611 289.579 307.85 288.656C308.186 287.36 307.644 285.836 307.063 284.683C304.972 280.525 302.236 276.498 299.899 272.451L260.602 204.372C256.378 197.046 252.295 189.593 247.866 182.391C260.169 181.257 271.658 183.618 281.525 191.469C283.183 192.771 284.735 194.188 286.181 195.72C287.627 197.252 288.952 198.883 290.156 200.612C294.353 206.6 297.775 213.434 301.435 219.779L322.919 256.952C325.543 261.457 327.867 266.553 330.852 270.795C331.639 271.912 332.716 273.183 334.084 273.545C334.895 273.76 335.649 273.599 336.366 273.183C337.242 272.673 338.127 271.894 338.359 270.865C338.57 269.927 338.323 268.93 337.923 268.078C336.343 264.71 334.155 261.444 332.288 258.213L270.888 151.873C286.823 150.174 301.717 155.558 311.767 168.268C314.967 172.316 317.396 176.993 319.964 181.455L355.092 242.372C357.198 246.089 360.613 254.346 364.555 255.915C365.224 256.181 366.037 256.266 366.704 255.943C367.681 255.471 368.404 254.329 368.681 253.31C368.931 252.394 368.739 251.366 368.344 250.516C367.234 248.138 365.591 245.833 364.27 243.548L325.241 175.869C338.036 175.226 349.183 177.101 359.425 185.467C363.099 188.468 366.195 192.014 368.845 195.939C373.609 202.992 377.623 210.751 381.879 218.131L426.316 295.092C430.527 302.385 435.192 309.696 438.706 317.352C439.402 318.831 440.033 320.337 440.599 321.87C441.166 323.403 441.666 324.957 442.098 326.533C442.53 328.109 442.894 329.701 443.189 331.309C443.484 332.917 443.71 334.534 443.865 336.161C445.378 351.627 440.341 366.745 430.51 378.686C423.33 387.409 412.531 394.408 401.591 397.342C390.122 400.418 377.324 399.386 365.552 399.356L306.528 399.362C301.729 399.366 296.933 399.452 292.134 399.385C287.692 399.321 283.667 399.392 278.663 399.469C248.295 399.932 230.549 400 230.549 400C230.549 400 232.072 393.464 233.213 389.434Z" fill="#663399"/> +<path d="M338.774 166.334C329.214 168.753 319.546 164.865 313.444 157.331C310.542 153.75 308.377 149.486 306.103 145.492L298.272 131.725C295.868 127.506 293.384 122.619 289.05 120.089C285.7 118.134 281.448 117.618 277.714 118.635C275.134 119.337 272.427 120.766 270.764 122.899C266.92 127.827 263.999 133.756 260.877 139.168L245.105 166.491C228.008 196.11 210.484 225.556 193.781 255.393C184.476 241.525 181.182 226.67 187.857 210.819C190.497 204.549 194.362 198.635 197.765 192.757C203.163 183.436 208.445 174.026 213.955 164.771C215.474 162.221 218.978 157.896 218.394 154.805C218.208 153.824 217.602 153.106 216.767 152.591C215.978 152.106 215.098 151.831 214.179 152.085C212.889 152.442 211.84 153.674 211.132 154.754C208.577 158.644 206.457 163.027 204.121 167.074L164.811 235.145C160.579 242.467 156.165 249.729 152.144 257.166C145.01 247.078 141.31 235.948 143.176 223.477C143.474 221.391 143.925 219.338 144.529 217.32C145.133 215.301 145.883 213.338 146.779 211.431C149.865 204.802 154.072 198.422 157.737 192.08L179.189 154.887C181.778 150.363 185.029 145.802 187.21 141.096C187.784 139.855 188.346 138.287 187.976 136.922C187.757 136.112 187.24 135.539 186.521 135.127C185.641 134.623 184.524 134.246 183.517 134.559C182.6 134.845 181.859 135.558 181.322 136.331C179.195 139.383 177.46 142.911 175.596 146.143L114.203 252.488C104.764 239.537 101.98 223.946 107.962 208.887C109.867 204.092 112.703 199.65 115.283 195.196L150.475 134.315C152.641 130.632 158.085 123.546 157.472 119.349C157.368 118.636 157.036 117.889 156.422 117.473C155.525 116.863 154.174 116.808 153.153 117.078C152.235 117.319 151.44 117.999 150.902 118.766C149.398 120.917 148.223 123.492 146.905 125.778L107.807 193.418C100.853 182.659 96.9039 172.068 99.0277 159.015C99.7891 154.333 101.312 149.879 103.386 145.621C107.113 137.968 111.825 130.613 116.088 123.238L160.521 46.2732C164.73 38.9797 168.729 31.2848 173.603 24.4134C174.536 23.0714 175.524 21.7717 176.568 20.5146C177.613 19.2574 178.709 18.0475 179.858 16.8849C181.007 15.7223 182.204 14.6115 183.449 13.5524C184.693 12.4928 185.981 11.4889 187.312 10.5407C199.95 1.49747 215.561 -1.69897 230.818 0.843734C241.962 2.70071 253.422 8.55337 261.434 16.5601C269.832 24.9551 275.337 36.5549 281.197 46.7642L310.714 97.8781C313.117 102.032 315.59 106.142 317.931 110.332C320.097 114.21 322.171 117.66 324.74 121.956C340.325 148.024 349.256 163.358 349.256 163.358C349.256 163.358 342.835 165.307 338.774 166.334Z" fill="#663399"/> +</svg> diff --git a/releases/v1.1.0.md b/releases/v1.1.0.md new file mode 100644 index 0000000..e2bf690 --- /dev/null +++ b/releases/v1.1.0.md @@ -0,0 +1,51 @@ +# v1.1.0 Arcana: Unleashing Core Magic + +Grimoire CSS takes a major leap forward with the **v1.1.0 Arcana** release, bringing **double the performance**, hundreds of new animations, and significant ecosystem expansions. This update introduces **Grimoire CSS JS (gcssjs)**, a dedicated JavaScript wrapper for seamless integration with the JavaScript ecosystem, alongside plugins for popular bundlers like Vite, Webpack, and Rollup. All related work for **gcssjs** and its plugins is now managed in a separate repository with its own **GitHub Projects board** for better organization and visibility. + +## Key Highlights + +- **2x Performance Boost** thanks to optimized processing. +- **632 New Animations** added to the core collection. +- **Introduction of Grimoire CSS JS** and plugins for modern JavaScript build tools. +- Comprehensive updates to documentation for easier onboarding. + +## Full Details + +### Enhancements + +- **Enhanced Components Initialization ((#8)[https://github.com/persevie/grimoire-css/issues/8])** + + - Optimized initialization to improve performance by ensuring components initialize only once. + - Restructured component architecture for greater flexibility. + - Introduced a two-way dictionary to support both full and shorthand syntax options. + +- **Improved Error Messaging and User Feedback ((#10)[https://github.com/persevie/grimoire-css/issues/10])** + + - Enhanced error messages and feedback mechanisms for a better user experience. + +- **Parallel Execution Improvements ((#11)[https://github.com/persevie/grimoire-css/issues/11])** + - Refactored CSSBuilder and Parser to process files sequentially, eliminating unnecessary parallelism (removed rayon dependency). + - Performance has **doubled** in scenarios involving large-scale projects, thanks to recent optimizations. + +### New Ecosystem: Grimoire CSS JS + +- **Grimoire CSS JS (gcssjs) ([#4](https://github.com/persevie/grimoire-css/issues/4))**: + - Introduced a JavaScript wrapper for Grimoire CSS, enabling seamless integration into the JavaScript ecosystem. +- **Plugins for Bundlers**: + - Released plugins for Webpack ([#5](https://github.com/persevie/grimoire-css/issues/5)), Vite ([#6](https://github.com/persevie/grimoire-css/issues/6)), and Rollup ([#7](https://github.com/persevie/grimoire-css/issues/7)). +- **Separate Repository**: + - All work related to Grimoire CSS JS and its plugins is now maintained in a dedicated repository with its own **GitHub Projects board**. + +### Bug Fixes + +- **Parser Regex Fix ([#28](https://github.com/persevie/grimoire-css/issues/28))** + - Improved regex patterns to support all types of quotes. + +### Documentation + +- Updated README with: + - Recent features. + - Installation instructions. + - Usage examples. + - Basic configuration guidelines. + - Improved logo.