Roadmap v2.0

Release states

Master CSS is currently in the Beta stage and is progressing toward the RC release.

~~Alpha － 2.0.0-alpha.80~~
Beta － 2.0.0-beta.204
Release Candidate － 2.0.0-rc.1
Stable － 2.0.0

Beta ( Current )

This phase will encompass completing all core features and breaking changes, providing a solid foundation for v2.

Getting Started
🟢Code Linting	An official ESLint plugin for enforcing team coding styles, making your template markup more organized, and catching syntax errors early.
🟢Genernal Installation	The easiest way to use Master CSS from scratch is to initialize the runtime engine directly in the application's entry file.
🟢Installation	Master CSS is a markup-driven CSS language with smart rules allowing you to write familiar CSS using concise syntax within HTML.
	Comparing the rendering modes, syntax differences, advantages in usage and functional positioning of mainstream frameworks.
🚧Language Service	Enhanced Master CSS development experience, including syntax highlighting, code completion, syntax rule preview, and more.
🟢Language Service for Visual Studio Code	Language Service APIs for major IDE extensions.
🚧Migration	Easily migrate CSS technologies and projects you are currently using to the Master CSS.
🟢Using CDNs	Copy and paste CDNs to instantly launch the runtime engine in your browser out of the box.
🟢Progressive Rendering in Angular	Guide to setting up Master CSS progressive rendering in your Angular project.
🟢Progressive Rendering in Next.js	Guide to setting up Master CSS progressive rendering in your Next.js project.
🟢Progressive Rendering in Nuxt.js	Guide to setting up Master CSS progressive rendering in your Nuxt.js project.
🟢Progressive Rendering in React	Guide to setting up Master CSS progressive rendering in your React project.
🟢Progressive Rendering in Svelte	Guide to setting up Master CSS progressive rendering in your Svelte project.
🟢Progressive Rendering in Vue.js	Guide to setting up Master CSS progressive rendering in your Vue.js project.
🟢Runtime Rendering in Angular	Guide to setting up Master CSS runtime rendering in your Angular project.
🟢Runtime Rendering in Astro	Guide to setting up Master CSS runtime rendering in your Astro project.
🟢Runtime Rendering in Blazor	Guide to setting up Master CSS runtime rendering in your Blazor project.
🟢Runtime Rendering in Laravel	Guide to setting up Master CSS runtime rendering in your Laravel project.
🟢Runtime Rendering in Next.js	Guide to setting up Master CSS runtime rendering in your Next.js project.
🟢Runtime Rendering in Nuxt.js	Guide to setting up Master CSS runtime rendering in your Nuxt.js project.
🟢Runtime Rendering in React	Guide to setting up Master CSS runtime rendering in your React project.
🟢Runtime Rendering in Svelte	Guide to setting up Master CSS runtime rendering in your Svelte project.
🟢Runtime Rendering in Vite	Guide to setting up Master CSS runtime rendering in your Vite project.
🟢Runtime Rendering in Vue.js	Guide to setting up Master CSS runtime rendering in your Vue.js project.
🟢Runtime Rendering in Webpack	Guide to setting up Master CSS runtime rendering in your Webpack project.
🟢Runtime with esm.sh CDN	Paste the esm.sh CDN to instantly launch the Master CSS runtime engine.
🟢Static Extraction in Angular	Guide to setting up Master CSS static extraction in your Angular project.
🟢Static Extraction in Astro	Guide to setting up Master CSS static extraction in your Astro project.
🟢Static Extraction in Blazor	Guide to setting up Master CSS static extraction in your Blazor project.
🟢Static Extraction in Laravel	Guide to setting up Master CSS static extraction in your Laravel project.
🟢Static Extraction in Next.js	Guide to setting up Master CSS static extraction in your Next.js project.
🟢Static Extraction in Nuxt.js	Guide to setting up Master CSS static extraction in your Nuxt.js project.
🟢Static Extraction in React	Guide to setting up Master CSS static extraction in your React project.
🟢Static Extraction in Svelte	Guide to setting up Master CSS static extraction in your Svelte project.
🟢Static Extraction in Vite	Guide to setting up Master CSS static extraction in your Vite project.
🟢Static Extraction in Vue.js	Guide to setting up Master CSS static extraction in your Vue.js project.
🟢Static Extraction in Webpack	Guide to setting up Master CSS static extraction in your Webpack project.
	Apply styles based on theme, print, and other modes and queries.
🚧State Selectors	Apply styles based on user interactions, element states, and other states.
🟢Style Declarations	Master CSS covers all native CSS features with a structured syntax and simplifies CSS with smart rules.
	Creating design tokens for consistent-looking user interfaces.
	Implement styles with more flexibility, using dynamic variables.
🟢Markup-driven	Master CSS styles are driven by template markups and generate CSS rules on demand.
🟢Global Styles	Normalize browser and preset global styles for more concise-style programming.
🟢Rendering Modes	Master CSS provides three rendering modes, which you can choose according to project scale and application scenarios to meet your current business requirements.
🟢Responsive Design	Adapt your user interface to different devices with flexible responsive syntax.
	This guide helps develop concepts for code reuse and de-duplication techniques.
	Use design tokens to switch between different theme modes.
🟢Browser Support	The core engine of Master CSS hardly affects CSS support for browsers.
🟢Unstyled Content	Improve the page loading experience and ensure seamless rendering of content.
	Speed up initial page loads by lazy loading the runtime engine.
	Render pages early to improve user experience and SEO.
🟢Critical Resources	The runtime engine plays a crucial role in the initial display of a page.
🚧Class Variant	Create reusable, extensible, and customizable style class variants.
🚧Theme Service	Standard CSS theme switching and service for Master CSS.
🟢Core	The core syntax parsing and runtime engine of Master CSS.
🟢ESLint	The ESLint configuration and plugin reference for Master CSS.
🚧Extractor	Master CSS static extractor for various raw text extraction.
🚧Renderer	Pre-render CSS on demand based on HTML.
🚧Validator	Validator for Master CSS syntactic class.

🟠 Color palette

See the issue #171.

Humans perceive different lightness for different color shades in the current color palette, which can lead to visual inconsistencies in the UI.

We'll refactor on a visually consistent general palette based on intuition.

It's expected to be the final breaking change during the beta stage.

🟠 Other APIs

We may check whether each property, parameter, and external API needs to be improved when writing configuration-related documents.

This work is critical to the popularity of third-party plugin authoring for Master CSS, and breaking configuration changes will not be made in the future unless necessary.

Release Candidate

At this stage, Master CSS is stable, which means there will be no further breaking changes. We'll refine the documentation and complete tasks for the upcoming v2.

🟠 Syntax documentation

Initially, the v1 docs were rushed into release, making its content rather rudimentary and potentially challenging to comprehend.

Our goal for our upcoming v2 docs is to present a comprehensive and elegantly crafted syntax document. This enables developers to grasp the intricacies of CSS effortlessly, thus enhancing CSS understanding through our meticulous documentation.

At the same time, we hope to get in touch with actual examples by writing syntax-related documents to obtain new improvements, such as simplifying syntax, adding utilities, etc.

Accessibility
🚧Screen Readers	Style utility for imporving the accessibility with screen readers.
Animation
🟢Animation	Style syntax for applying an animation between styles.
🚧Animation Delay	Style syntax for setting a time to delay before beginning to perform the animation.
🟢Animation Direction	Style syntax for setting the direction of the animation.
🚧Animation Duration	Style syntax for setting the length of time that an animation takes to complete one cycle.
🚧Animation Fill Mode	Style syntax for setting how a CSS animation applies styles to its target before and after its execution.
🟢Animation Iteration Count	Style syntax for setting the number of times an animation should be played.
🚧Animation Name	Style syntax for setting the names of the animation.
🟢Animation Play State	Style syntax for setting whether an animation is running or paused.
🚧Animation Timing Function	Style syntax for setting speed curve of the animation.
Appearance
🚧Accent Color	Style syntax for setting the accent color of user interface elements or controls.
🚧Appearance	Style syntax for controlling the native appearance of UI controls.
🚧Caret Color	Style syntax for setting the color of the cursor in text input.
🚧Color	Style syntax for setting foreground color of an element.
🚧Cursor	Style syntax for setting the mouse cursor style.
Background
🚧Background	Style syntax for setting all background style properties at once.
🚧Background Attachment	Style syntax for setting whether position of background image is fixed when scrolling.
🚧Background Blend Mode	Style syntax for setting how an element's background images should blend with the background color.
🚧Background Clip	Style syntax for controlling how clip the background.
🚧Background Color	Style syntax for setting the background color of an element.
🚧Background Image	Style syntax for setting background images on an element.
🚧Background Origin	Style syntax for setting the background's origin.
🚧Background Position	Style syntax for setting the initial position for background image.
🚧Background Repeat	Style syntax for setting how background images are repeated.
🚧Background Size	Style syntax for setting the size of the background image.
Border
🚧Border	Style syntax for setting an element’s border.
🚧Border Color	Style syntax for setting the color of an element’s border.
🚧Border Radius	Style syntax for setting radius of an element’s corners.
🚧Border Style	Style syntax for setting the line style for an element’s border.
🚧Border Width	Style syntax for setting the width of an element’s border.
Effect
🚧Backdrop Filter	Style syntax for applying filter effects to the area behind an target element.
🚧Box Shadow	Style syntax for adding shadow effects around an element.
🚧Filter	Style syntax for applying graphic effects to an element.
🚧Mask Image	Style syntax for setting the image that is used as mask layer for an element.
🚧Mix Blend Mode	Style syntax for setting how an element's content should blend with its parent background.
Flex
🚧Flex	Style syntax for setting how flex items grow or shrink.
🚧Flex Basis	Style syntax for setting the initial main size of a flex item.
🚧Flex Direction	Style syntax for setting the direction of flex items.
🚧Flex Grow	Style syntax for setting how flex items grow.
🚧Flex Shrink	Style syntax for setting how flex items shrink.
🚧Flex Wrap	Style syntax for setting how flex items wrap.
Font
🚧Font	Style syntax for setting font properties of an element.
🟢Font Family	Style syntax for setting the font for an element.
🚧Font Feature Settings	Style syntax for controling advanced typographic features in OpenType fonts.
🚧Font Size	Style syntax for setting the font size of elements.
🚧Font Smoothing	Style syntax for controlling the font smoothing of an element.
🚧Font Style	Style syntax for setting font style of an element.
🚧Font Variant Numeric	Style syntax for controlling the usage of alternate glyphs for numbers, fractions, and ordinal markers.
🚧Font Weight	Style syntax for setting the weight of the font.
Grid
🚧Grid	Style syntax for setting layout of grid system.
🚧Grid Auto Columns	Style syntax for setting the size of the grid columns.
🚧Grid Auto Flow	Style syntax for controlling how auto-placed items get inserted in the grid.
🚧Grid Auto Rows	Style syntax for setting the size of the grid rows.
🚧Grid Column	Style syntax for setting a grid items's size and location in a grid layout.
🚧Grid Columns	Style utility for creating multiple grid columns.
🚧Grid Row	Style syntax for setting a grid items's size and location in a grid layout.
🚧Grid Rows	Style utility for creating multiple grid rows.
🚧Grid Template	Style syntax for setting grid columns, grid rows, and grid areas.
🚧Grid Template Areas	Style syntax for setting areas in the grid container
🚧Grid Template Columns	Style syntax for creating columns in a grid layout.
🚧Grid Template Rows	Style syntax for creating rows in a grid layout.
Grid And Flexbox
🚧Align Content	Style syntax for controlling how multiple rows or columns are aligned along its cross axis.
🚧Align Items	Style syntax for controlling how items are aligned along its cross axis.
🚧Align Self	Style syntax for controlling how an individual item is aligned along its cross axis.
🚧Gap	Style syntax for setting the gutters between rows and columns.
🚧Justify Content	Style syntax for controlling how items are aligned along its main axis.
🚧Justify Items	Style syntax for controlling how items are aligned along its inline axis.
🚧Justify Self	Style syntax for controlling how an individual item is aligned along its inline axis.
🚧Order	Style syntax for changing the order of item in flex or grid container.
🚧Place Content	Style syntax for setting align-content and justify-content at the same time.
🚧Place Items	Style syntax for setting align-items and justify-items at the same time.
🚧Place Self	Style syntax for setting align-self and justify-self at the same time.
Interactivity
🚧Pointer Events	Style syntax for setting whether an element reacts to pointer events.
🚧Resize	Style syntax for setting whether an element is resizable.
🚧Touch Action	Style syntax for setting how an element's region can be manipulated by a touchscreen user.
🚧User Drag	Style syntax for controlling whether the user can drag element.
🚧User Select	Style syntax for controlling whether the user can select text.
Layout
🚧Box Decoration Break	Style syntax for setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
🚧Break After	Style syntax for controlling how page, column, or region breaks should occur after an element.
🚧Break Before	Style syntax for controlling how page, column, or region breaks should occur before the specified element.
🚧Break Inside	Style syntax for controlling how page, column, or region breaks should occur within the specified element.
🚧Clear	Style syntax for moving an element below floating elements instead of floating to the left or right.
🚧Column Span	Style syntax for setting how elements span across multiple columns.
🚧Columns	Style syntax for setting the number of columns within the container.
🚧Direction	Style syntax for setting the direction of text.
🚧Display	Style syntax for controlling the element's inner and outer display types.
🟢Float	Style syntax for placing an element on the left or right side of its container.
🚧Inset	Style syntax for setting distance between an element and the parent element.
🚧Isolation	Style syntax for controlling whether an element should create a new stacking context.
🚧Overflow	Style syntax for controlling the desired behavior for an element's overflow.
🚧Position	Style syntax for setting an element is positioned in a document.
🚧Z Index	Style syntax for set the z-order of a positioned element.
List Style
🚧List Style	Style syntax for setting all the list style properties at once.
🚧List Style Image	Style syntax for replacing the list item marker with an image.
🚧List Style Position	Style syntax for setting the position of the list item marker.
🚧List Style Type	Style syntax for setting the style of the list item marker.
Media
🚧Object Fit	Style syntax for setting how the content should be resized to fit its container.
🚧Object Position	Style syntax for setting the alignment of the selected replaced element within the element's box.
Outline
🚧Outline	Style syntax for setting all the outline properties at once.
🚧Outline Color	Style syntax for setting the color of an element’s outline.
🚧Outline Offset	Style syntax for setting the spacing between an outline and the border of an element.
🚧Outline Style	Style syntax for setting the style of an element's outline.
🚧Outline Width	Style syntax for setting the thickness of an element's outline.
Performance
🚧Contain	Style syntax for providing performance benefits by limiting calculations of layout.
🚧Will Change	Style syntax for setting how an element is expected to change in the browser.
Scroll
🚧Overscroll Behavior	Style syntax for setting what a browser does when reaching the boundary of a scrolling area.
🚧Scroll Behavior	Style syntax for setting the scrolling behavior for a scrolling box.
🚧Scroll Margin	Style syntax for setting the scroll margin of an element.
🚧Scroll Padding	Style syntax for setting the scroll padding of an element.
🚧Scroll Snap Align	Style syntax for setting the scroll snap position.
🚧Scroll Snap Stop	Style syntax for setting whether scroll container is pass over snap positions.
🚧Scroll Snap Type	Style syntax for setting how strictly snap points are enforced on the scroll container.
Shape
🚧Clip Path	Style syntax for creating a clipping region.
🚧Shape Image Threshold	Style syntax for setting the alpha channel threshold for a CSS shape.
🚧Shape Margin	Style syntax for setting a margin for a CSS shape.
🚧Shape Outside	Style syntax for setting a shape around which adjacent inline content should wrap.
Sizing
🚧Aspect Ratio	Style syntax for setting the ratio for the box.
🚧Box Sizing	Style syntax for setting how the total width and height of an element is calculated.
🚧Height	Style syntax for setting an element’s height.
🚧Max Height	Style syntax for setting the maximum height of an element.
🚧Max Width	Style syntax for setting the maximum width of an element.
🚧Min Height	Style syntax for setting the minimum height of an element.
🚧Min Width	Style syntax for setting the minimum width of an element.
🚧Width	Style syntax for setting an element’s width.
Spacing
🚧Margin	Style syntax for setting the margin area on all four sides of an element.
🚧Padding	Style syntax for setting the padding area on all four sides of an element.
Svg
🚧Stroke	Style syntax for setting the outline color of an SVG shape.
🚧Stroke Width	Style syntax for setting the width of the stroke to be applied to the SVG shape.
Tables
🚧Border Collapse	Style syntax for setting whether table cell have shared or separate borders.
Text
🚧Text Align	Style syntax for setting the text alignment of an element.
🚧Text Decoration	Style syntax for setting the appearance of decorative lines on text.
🚧Text Decoration Color	Style syntax for setting the color of decorative lines on text.
🚧Text Decoration Line	Style syntax for setting the kind of decoration that is used on text.
🚧Text Decoration Style	Style syntax for setting the style of the decoration line that is used on text.
🚧Text Decoration Thickness	Style syntax for setting thickness of the decoration line.
🚧Text Fill Color	Style syntax for setting the color of text.
🚧Text Indent	Style syntax for setting indentation of the first line.
🚧Text Orientation	Style syntax for setting orientation of the text characters in a line.
🚧Text Overflow	Style syntax for handling how hidden overflow content.
🚧Text Rendering	Style syntax for setting what to optimize when rendering text.
🚧Text Shadow	Style syntax for adding shadows to text.
🚧Text Size	Style utility for setting the font size with a golden-ratio line height.
🚧Text Stroke	Style syntax for setting the width and color of strokes for text characters.
🚧Text Stroke Color	Style syntax for setting the color of the stroke for text characters.
🚧Text Stroke Width	Style syntax for setting the width of the stroke for text characters.
🟢Text Transform	Style syntax for controlling capitalization of text.
🚧Text Underline Offset	Style syntax for setting the distance of a text decoration line from its original position.
Transform
🚧Transform	Style syntax for controlling rotate, scale, skew, or translate an element.
🚧Transform Box	Style syntax for defining the layout box to which transform and transform-origin properties relate.
🚧Transform Origin	Style syntax for setting the origin for an element’s transformations.
🚧Transform Style	Style syntax for setting how children of an element are rendered in the 3D space.
Transition
🚧Transition	Style syntax for controlling animation speed when changing CSS properties.
🚧Transition Delay	Style syntax for setting a time to delay before starting transition.
🚧Transition Duration	Style syntax for setting the length of time a transition should takes to complete.
🚧Transition Property	Style syntax for setting the CSS properties to which a transition effect should be applied.
🚧Transition Timing Function	Style syntax for setting speed curve of the transition effect.
Typography
🚧Content	Style syntax for replacing an element with a generated value.
🚧Letter Spacing	Style syntax for setting the spacing between text characters.
🚧Line Clamp	Style syntax for limiting the contents of a container to the specified number of lines.
🚧Line Height	Style syntax for setting the height of a line box.
🚧Vertical Align	Style syntax for setting vertical alignment.
🚧White Space	Style syntax for controlling how whitespace and line breaks within an element are handled.
🚧Word Break	Style syntax for setting whether words should break.
🚧Word Spacing	Style syntax for setting the spacing between words.
🚧Writing Mode	Style syntax for setting different writing mode.
Variable
🚧Variable	CSS variables defined specific values to be reused throughout a document.
Visibility
🚧Opacity	Style syntax for setting the opacity of an element.
🚧Visibility	Style syntax for controlling whether an element is visible.

🟢 Completed🚧 Unfinished⚪️ Planning

⚪️ Master CSS Language Service

🚧 The detailed content is under planning.

🟢 Master CSS ESLint

Released in v2.0.0-beta.175. Check out the new documentation.

It now implements a partial feature, with the rest scheduled for batch release after the v2 is launched.

⚪️ Homepage redesign

Redesign the homepage according to the features of v2.

FAQs

When is v2 expected to arrive?

Throughout the Beta phase, Master CSS v2.0 introduced many essential functions, services, and framework compatibility enhancements. Many of these underwent refactoring as part of the development journey or were fine-tuned in response to valuable input from the community.

Since the syntax and API of Master CSS are expected to be in use for many years, even though v2 is nearing completion, it will take us some time to validate its market acceptance and solidify its foundation.

Now that we're at the end of beta, we can more accurately estimate arrival times based on the task at hand:

Master CSS v2.0
- Release Candidate － December 2023
- Stable － February 2024
Master UI v1.0
- Alpha － April 2024
- Beta － May 2024
- Release Candidate － June 2024
- Stable － August 2024
Master UI Pro v1.0 － December 2024

Is it stable enough for now?

Only one breaking change remains during the beta, Color Palette. If you don't mind or are not affected by it, you can start using Master CSS in production!

How to keep track of the latest updates?

GitHub Releases － We've beautified the release changelog, which notes any version and package detailed changes.
Docs - Discord Channel － We'll post the latest documentation updates in the #docs channel in the Master discord server.

How to prevent version change conflicts?

When using a CDN in production, pining the current version to avoid potential conflicts due to version changes is strongly recommended, like so:

<script src="https://cdn.master.co/[email protected]"></script>

Where is the source code of the documentation?

The official documentation is now open source; welcome to contribute your expertise.