Skip to content

Commit

Permalink
chore: update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
dmtrshat committed Nov 23, 2024
1 parent a186b83 commit 33ee5c1
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 29 deletions.
28 changes: 28 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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.
59 changes: 30 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -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

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
{
Expand All @@ -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.

Expand All @@ -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).
Expand All @@ -557,39 +562,35 @@ 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:**

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.
Expand Down
51 changes: 51 additions & 0 deletions releases/v1.1.0.md
Original file line number Diff line number Diff line change
@@ -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.

0 comments on commit 33ee5c1

Please sign in to comment.