@master/css 1.37.7 β†’ 1.37.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +95 -107
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,116 +1,104 @@
1
- <br><br>
1
+ <br>
2
2
  <div align="center">
3
3
 
4
4
  <p align="center">
5
- <img src="https://raw.githubusercontent.com/master-co/package/document/images/logo-and-text.svg" alt="logo" width="142">
5
+ <a href="https://css.master.co">
6
+ <picture>
7
+ <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/33840671/201701649-3bb7d698-abec-4d5f-ac30-ccc4d7bafcd4.svg">
8
+ <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg">
9
+ <img alt="Master CSS" src="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg" width="100%">
10
+ </picture>
11
+ </a>
6
12
  </p>
13
+ <p align="center"><!-- package.description -->A Virtual CSS language with enhanced syntax ~13KB<!----></p>
14
+
7
15
  <p align="center">
8
- <b><!-- name -->CSS<!----></b>
16
+ <a aria-label="GitHub release (latest by date including pre-releases)" href="https://github.com/master-co/css/releases">
17
+ <picture>
18
+ <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=212022&label=&style=for-the-badge&logo=github&logoColor=fff">
19
+ <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github&logoColor=%23000">
20
+ <img alt="NPM Version" src="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github">
21
+ </picture>
22
+ </a>
23
+ <a aria-label="NPM Package" href="https://www.npmjs.com/package/@master/css">
24
+ <picture>
25
+ <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/@master/css?color=212022&label=%20&logo=npm&style=for-the-badge">
26
+ <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dm/@master/css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
27
+ <img alt="NPM package ( download / month )" src="https://img.shields.io/npm/dm/@master/css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
28
+ </picture>
29
+ </a>
30
+ <a aria-label="JSDelivr" href="https://www.jsdelivr.com/package/npm/@master/css">
31
+ <picture>
32
+ <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/jsdelivr/npm/hm/@master/css?color=212022&label=%20&logo=jsdelivr&style=for-the-badge">
33
+ <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/jsdelivr/npm/hm/@master/css?color=f6f7f8&label=%20&logo=jsdelivr&style=for-the-badge">
34
+ <img alt="JSDelivr hits (npm scoped)" src="https://img.shields.io/jsdelivr/npm/hm/@master/css?color=f6f7f8&label=%20&logo=jsdelivr&style=for-the-badge">
35
+ </picture>
36
+ </a>
37
+ <a aria-label="Discord Community" href="https://discord.gg/sZNKpAAAw6">
38
+ <picture>
39
+ <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/discord/917780624314613760?color=212022&label=%20&logo=discord&style=for-the-badge">
40
+ <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge">
41
+ <img alt="Discord online" src="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge">
42
+ </picture>
43
+ </a>
44
+ <a aria-label="Follow @mastercorg" href="https://twitter.com/mastercorg">
45
+ <picture>
46
+ <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=212022&logo=twitter&style=for-the-badge">
47
+ <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
48
+ <img alt="Follow @mastercorg" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
49
+ </picture>
50
+ </a>
51
+ <a aria-label="Github Actions" href="https://github.com/1aron/repo/actions/workflows/release.yml">
52
+ <picture>
53
+ <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/workflow/status/master-co/css/Release?label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
54
+ <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/workflow/status/master-co/css/Release?label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
55
+ <img alt="Github release actions" src="https://img.shields.io/github/workflow/status/master-co/css/Release?label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
56
+ </picture>
57
+ </a>
9
58
  </p>
10
- <p align="center"><!-- package.description -->A Virtual CSS language with enhanced syntax. ~13KB<!----></p>
11
-
12
- [![MIT License](https://flat.badgen.net/github/license/master-co/css?color=yellow)](https://github.com/master-co/css/blob/main/LICENSE)
13
- [![Latest Release](https://flat.badgen.net/npm/v/@master/css?icon=npm&label&color=yellow)](https://www.npmjs.com/package/@master/css)
14
- [![Bundle Size](https://flat.badgen.net/bundlephobia/minzip/@master/css?icon=packagephobia&label&color=yellow)](https://bundlephobia.com/package/@master/css 'gzip bundle size (including dependencies)')
15
- [![Package Size](https://flat.badgen.net/badgesize/brotli/https://cdn.jsdelivr.net/npm/@master/css?icon=jsdelivr&label&color=yellow)](https://unpkg.com/@master/css 'brotli package size (without dependencies)')
16
- [![Documentation](https://flat.badgen.net/badge/icon/Documentation?icon=awesome&label&color=yellow)](https://css.master.co)
17
- [![Github](https://flat.badgen.net/badge/icon/master-co%2Fcss?icon=github&label&color=yellow)](https://github.com/master-co/css)
18
- [![Discord](https://flat.badgen.net/badge/icon/discord?icon=discord&label&color=yellow)](https://discord.gg/sZNKpAAAw6)
19
- [![CI](https://flat.badgen.net/github/status/master-co/css/main/ci/circleci?icon=circleci)](https://circleci.com/gh/master-co/workflows/css/tree/main)
20
59
 
21
60
  </div>
22
61
 
23
- ![image](https://raw.githubusercontent.com/master-co/css-language-service/alpha/images/cover.jpg)
24
-
25
- - Visit [css.master.co](https://css.master.co) for full documentation.
26
- - Browse our [discussion community](https://github.com/master-co/css/discussions).
27
- - Join our [discord channel](https://discord.gg/sZNKpAAAw6).
28
- - Follow our [twitter](https://twitter.com/mastercorg).
29
-
30
- ##### On this page
31
-
32
- - [Features](#features)
33
- - [Why Master CSS](#why-master-css)
34
- - [Quick Start](#quick-start)
35
- - [Developer Tools](#developer-tools)
36
- - [Inspiration](#inspiration)
37
- - [Related](#related)
38
-
39
- # Features
40
- Let's have a quick overview of the **groundbreaking features** of Master CSS:
41
-
42
- - πŸ”₯ A whole new **CSS language** instead of utilities/libraries.
43
- - πŸ”“ Write CSS properties, functions, selectors and even media queries directly in `class="..."`.
44
- - 🧠 Automatically generate corresponding CSS rules based on class names.
45
- - πŸ’– With enhanced CSS syntax, you can **build UIs with less code**.
46
- - ⚑️ Directly use **performant JIT in production**. **~13KB**
47
- - 🧬 [An enhanced and structured CSS syntax](https://docs.master.co/css/syntax-tutorial) for class names.
48
- - 🌈 [A forerunner to syntax highlighting](https://docs.master.co/css/why-master-css#a-forerunner-to-syntax-highlighting) for class names.
49
- - ✨ [Hybrid Rendering](https://docs.master.co/css/hybrid-rendering) that allows you to **pre-generate CSS from HTML on the server side**, and then continue to **use JIT on the client side**.
50
- - ✨ [Group Styles](https://docs.master.co/css/syntax-tutorial#group-styles) that allows you to extract the same selectors and media query styles and make it short.
51
- - ✨ [Reactive Styles](https://docs.master.co/css/syntax-tutorial#style-an-element-based-on-target-state) that allows you to style an element based on parent/sibling state.
52
-
53
- To learn more, check out the [documentation](https://docs.master.co/css/why-master-css).
54
-
55
- # [Why Master CSS](https://docs.master.co/css/why-master-css)
56
- A brief introduction starts by giving you an understanding of **markup-driven CSS**.
57
-
58
- 😐 Traditional
59
- ```html
60
- <style>
61
- .home-section {
62
- background-color: blue;
63
- padding: 2rem;
64
- text-align: center;
65
- }
66
-
67
- .home-section:hover {
68
- background-color: red;
69
- }
70
-
71
- @media (min-width: 1024px) {
72
- .home-section {
73
- padding: 3rem;
74
- }
75
- }
76
- </style>
77
-
78
- <section class="home-section">...</section>
79
- ```
80
- 🀩 Now, refactor it with a whole new CSS language to make it easier. ↓ 86% code
81
- ```html
82
- <section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>
83
- ```
84
- To learn more, check out the [Why Master CSS](https://docs.master.co/css/why-master-css) documentation.
85
-
86
- # Quick Start
87
- This is a quick start guide, check out the [full setup guide](https://docs.master.co/css/setup) to integrate with your build tools and frameworks.
88
-
89
- ```shell
90
- npm install @master/css
91
- ```
92
- ```js
93
- import '@master/css';
94
- ```
95
- or use a CDN
96
- ```html
97
- <script src="https://cdn.master.co/css"></script>
98
- ```
99
- Now, start styling HTML with Master CSS. πŸŽ‰
100
- ```html
101
- <h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
102
- ```
103
- To learn more, check out the [Syntax tutorial](https://docs.master.co/css/syntax-tutorial) documentation.
104
-
105
- # Developer Tools
106
- - [Master CSS Language Service](https://marketplace.visualstudio.com/items?itemName=masterco.master-css-language-service) - A Visual Studio Code extension for Master CSS. Provides code-completion and syntax highlighting.
107
-
108
- # Inspiration
109
- Some of our core concepts and designs are inspired by these giants.
110
- - __Language__ - Master is a language, but it was originally inspired by [ACSS](https://acss.io/)'s concept of atomic classes.
111
- - __Virtual CSS__ - Difference algorithms, virtual models, etc. are inspired by [Virtual DOM](https://reactjs.org/docs/faq-internals.html).
112
-
113
- # Related
114
- - [@master/normal.css](https://github.com/master-co/normal.css) - Normalize browser's styles. ~1KB
115
- - [@master/keyframes.css](https://github.com/master-co/keyframes.css) - Simple and useful CSS keyframes. ~0.4KB
116
- - [@master/style-element.react](https://github.com/master-co/style-element.react) - Quickly create styled React elements with conditional class names. ~800B
62
+ ## Documentation
63
+ Visit [css.master.co](https://css.master.co) to view the full documentation
64
+
65
+ ## Getting Started
66
+ Check out the [guides](https://docs.master.co/css) to get started with Master CSS
67
+
68
+ ## Ecosystem
69
+
70
+ #### Integrations
71
+
72
+ - [Compiler](https://github.com/master-co/css/tree/beta/packages/compiler) - The ahead-of-time compiler of Master CSS
73
+ - [Vite Plugin](https://github.com/master-co/css/tree/beta/packages/vite) - A vite plugin for integrating Master CSS AOT compilation
74
+ - [Webpack Plugin](https://github.com/master-co/css/tree/beta/packages/webpack) - A webpack plugin for integrating Master CSS AOT compilation
75
+ - [React](https://github.com/master-co/css/tree/beta/packages/react) - React hooks for Master CSS
76
+
77
+ #### Native Plugins
78
+
79
+ - [Normal CSS](https://github.com/master-co/css/tree/beta/packages/normal.css) - Normalize the browser's styles
80
+ - [Keyframes CSS](https://github.com/master-co/css/tree/beta/packages/keyframes.css) - Simple and useful CSS keyframes
81
+
82
+ #### Extensions
83
+ - [Master CSS Language Service](https://github.com/master-co/css-language-service) <sub><sup>Visual Studio Code</sup></sub> - Includes code completion, syntax highlighting, CSS hover preview, and inline color decorators
84
+
85
+ #### Related
86
+
87
+ - [Style Element for React](https://github.com/master-co/style-element.react) - Quickly create reusable React elements driven by class names
88
+
89
+ ## Community
90
+ The Master CSS community can be found here:
91
+
92
+ - [Discuss on GitHub](https://github.com/master-co/css/discussions) - Ask questions, voice ideas, and do any other discussion.
93
+ - [Join our Discord Server](https://discord.com/invite/sZNKpAAAw6) - Casually chat with other people using the language. <sup><sub>βœ“ δΈ­ζ–‡</sub></sup>
94
+
95
+ ###### [γ€Š Code of Conduct 》](https://github.com/master-co/css/blob/main/CODE_OF_CONDUCT.md) applies to all Master CSS community channels.
96
+
97
+ ## Contributing
98
+ Please see our *🚧 CONTRIBUTING.md* for workflow.
99
+ <!-- Please see our [🚧 CONTRIBUTING.md](https://github.com/master-co/css/blob/beta/.github/CONTRIBUTING.yml) for workflow. -->
100
+
101
+ ## Inspiration
102
+ Some of the core concepts and designs are inspired by these giants.
103
+ - The concept of enhanced syntax is inspired by [SASS](https://sass-lang.com/) and [Typescript](https://www.typescriptlang.org/)
104
+ - The concept of Virtual CSS is inspired by the [Virtual DOM](https://reactjs.org/docs/faq-internals.html)
package/package.json CHANGED
@@ -25,5 +25,5 @@
25
25
  "type": "git",
26
26
  "url": "https://github.com/master-co/css.git"
27
27
  },
28
- "version": "1.37.7"
28
+ "version": "1.37.8"
29
29
  }