1 month ago

Roadmap v2.0

On this page

Release states

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

  1. Alpha - 2.0.0-alpha.80
  2. Beta - 2.0.0-beta.204
  3. Release Candidate - 2.0.0-rc.1
  4. Stable - 2.0.0

Beta ( Current )

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

🟠 Core documentation

With over 200 documents in Master CSS 2.0, we've organized relevant documents affecting core functions as prerequisites for the stable release.

Finalizing these documents allows us to verify the rationality, ease of use, and scalability of core features for further improvement.

Getting Started
🟢Code LintingAn official ESLint plugin for enforcing team coding styles, making your template markup more organized, and catching syntax errors early.
🟢Genernal InstallationThe easiest way to use Master CSS from scratch is to initialize the runtime engine directly in the application's entry file.
🟢InstallationMaster 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 ServiceEnhanced Master CSS development experience, including syntax highlighting, code completion, syntax rule preview, and more.
🟢Language Service for Visual Studio CodeLanguage Service APIs for major IDE extensions.
🚧MigrationEasily migrate CSS technologies and projects you are currently using to the Master CSS.
🟢Using CDNsCopy and paste CDNs to instantly launch the runtime engine in your browser out of the box.
Installation
🟢Progressive Rendering in AngularGuide to setting up Master CSS progressive rendering in your Angular project.
🟢Progressive Rendering in Next.jsGuide to setting up Master CSS progressive rendering in your Next.js project.
🟢Progressive Rendering in Nuxt.jsGuide to setting up Master CSS progressive rendering in your Nuxt.js project.
🟢Progressive Rendering in ReactGuide to setting up Master CSS progressive rendering in your React project.
🟢Progressive Rendering in SvelteGuide to setting up Master CSS progressive rendering in your Svelte project.
🟢Progressive Rendering in Vue.jsGuide to setting up Master CSS progressive rendering in your Vue.js project.
🟢Runtime Rendering in AngularGuide to setting up Master CSS runtime rendering in your Angular project.
🟢Runtime Rendering in AstroGuide to setting up Master CSS runtime rendering in your Astro project.
🟢Runtime Rendering in BlazorGuide to setting up Master CSS runtime rendering in your Blazor project.
🟢Runtime Rendering in LaravelGuide to setting up Master CSS runtime rendering in your Laravel project.
🟢Runtime Rendering in Next.jsGuide to setting up Master CSS runtime rendering in your Next.js project.
🟢Runtime Rendering in Nuxt.jsGuide to setting up Master CSS runtime rendering in your Nuxt.js project.
🟢Runtime Rendering in ReactGuide to setting up Master CSS runtime rendering in your React project.
🟢Runtime Rendering in SvelteGuide to setting up Master CSS runtime rendering in your Svelte project.
🟢Runtime Rendering in ViteGuide to setting up Master CSS runtime rendering in your Vite project.
🟢Runtime Rendering in Vue.jsGuide to setting up Master CSS runtime rendering in your Vue.js project.
🟢Runtime Rendering in WebpackGuide to setting up Master CSS runtime rendering in your Webpack project.
🟢Runtime with esm.sh CDNPaste the esm.sh CDN to instantly launch the Master CSS runtime engine.
🟢Static Extraction in AngularGuide to setting up Master CSS static extraction in your Angular project.
🟢Static Extraction in AstroGuide to setting up Master CSS static extraction in your Astro project.
🟢Static Extraction in BlazorGuide to setting up Master CSS static extraction in your Blazor project.
🟢Static Extraction in LaravelGuide to setting up Master CSS static extraction in your Laravel project.
🟢Static Extraction in Next.jsGuide to setting up Master CSS static extraction in your Next.js project.
🟢Static Extraction in Nuxt.jsGuide to setting up Master CSS static extraction in your Nuxt.js project.
🟢Static Extraction in ReactGuide to setting up Master CSS static extraction in your React project.
🟢Static Extraction in SvelteGuide to setting up Master CSS static extraction in your Svelte project.
🟢Static Extraction in ViteGuide to setting up Master CSS static extraction in your Vite project.
🟢Static Extraction in Vue.jsGuide to setting up Master CSS static extraction in your Vue.js project.
🟢Static Extraction in WebpackGuide to setting up Master CSS static extraction in your Webpack project.
Core Syntax
Apply styles based on theme, print, and other modes and queries.
🚧State SelectorsApply styles based on user interactions, element states, and other states.
🟢Style DeclarationsMaster CSS covers all native CSS features with a structured syntax and simplifies CSS with smart rules.
Fundamentals
Creating design tokens for consistent-looking user interfaces.
Implement styles with more flexibility, using dynamic variables.
🟢Markup-drivenMaster CSS styles are driven by template markups and generate CSS rules on demand.
🟢Global StylesNormalize browser and preset global styles for more concise-style programming.
🟢Rendering ModesMaster CSS provides three rendering modes, which you can choose according to project scale and application scenarios to meet your current business requirements.
🟢Responsive DesignAdapt 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 SupportThe core engine of Master CSS hardly affects CSS support for browsers.
Production Optimization
🟢Unstyled ContentImprove 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 ResourcesThe runtime engine plays a crucial role in the initial display of a page.
Customization
Enhanced Service
🚧Class VariantCreate reusable, extensible, and customizable style class variants.
🚧Theme ServiceStandard CSS theme switching and service for Master CSS.
API Reference
🟢CoreThe core syntax parsing and runtime engine of Master CSS.
🟢ESLintThe ESLint configuration and plugin reference for Master CSS.
🚧ExtractorMaster CSS static extractor for various raw text extraction.
🚧RendererPre-render CSS on demand based on HTML.
🚧ValidatorValidator for Master CSS syntactic class.

🟢 Completed🚧 Unfinished⚪️ Planning

🟠 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 ReadersStyle utility for imporving the accessibility with screen readers.
Animation
🟢AnimationStyle syntax for applying an animation between styles.
🚧Animation DelayStyle syntax for setting a time to delay before beginning to perform the animation.
🟢Animation DirectionStyle syntax for setting the direction of the animation.
🚧Animation DurationStyle syntax for setting the length of time that an animation takes to complete one cycle.
🚧Animation Fill ModeStyle syntax for setting how a CSS animation applies styles to its target before and after its execution.
🟢Animation Iteration CountStyle syntax for setting the number of times an animation should be played.
🚧Animation NameStyle syntax for setting the names of the animation.
🟢Animation Play StateStyle syntax for setting whether an animation is running or paused.
🚧Animation Timing FunctionStyle syntax for setting speed curve of the animation.
Appearance
🚧Accent ColorStyle syntax for setting the accent color of user interface elements or controls.
🚧AppearanceStyle syntax for controlling the native appearance of UI controls.
🚧Caret ColorStyle syntax for setting the color of the cursor in text input.
🚧ColorStyle syntax for setting foreground color of an element.
🚧CursorStyle syntax for setting the mouse cursor style.
Background
🚧BackgroundStyle syntax for setting all background style properties at once.
🚧Background AttachmentStyle syntax for setting whether position of background image is fixed when scrolling.
🚧Background Blend ModeStyle syntax for setting how an element's background images should blend with the background color.
🚧Background ClipStyle syntax for controlling how clip the background.
🚧Background ColorStyle syntax for setting the background color of an element.
🚧Background ImageStyle syntax for setting background images on an element.
🚧Background OriginStyle syntax for setting the background's origin.
🚧Background PositionStyle syntax for setting the initial position for background image.
🚧Background RepeatStyle syntax for setting how background images are repeated.
🚧Background SizeStyle syntax for setting the size of the background image.
Border
🚧BorderStyle syntax for setting an element’s border.
🚧Border ColorStyle syntax for setting the color of an element’s border.
🚧Border RadiusStyle syntax for setting radius of an element’s corners.
🚧Border StyleStyle syntax for setting the line style for an element’s border.
🚧Border WidthStyle syntax for setting the width of an element’s border.
Effect
🚧Backdrop FilterStyle syntax for applying filter effects to the area behind an target element.
🚧Box ShadowStyle syntax for adding shadow effects around an element.
🚧FilterStyle syntax for applying graphic effects to an element.
🚧Mask ImageStyle syntax for setting the image that is used as mask layer for an element.
🚧Mix Blend ModeStyle syntax for setting how an element's content should blend with its parent background.
Flex
🚧FlexStyle syntax for setting how flex items grow or shrink.
🚧Flex BasisStyle syntax for setting the initial main size of a flex item.
🚧Flex DirectionStyle syntax for setting the direction of flex items.
🚧Flex GrowStyle syntax for setting how flex items grow.
🚧Flex ShrinkStyle syntax for setting how flex items shrink.
🚧Flex WrapStyle syntax for setting how flex items wrap.
Font
🚧FontStyle syntax for setting font properties of an element.
🟢Font FamilyStyle syntax for setting the font for an element.
🚧Font Feature SettingsStyle syntax for controling advanced typographic features in OpenType fonts.
🚧Font SizeStyle syntax for setting the font size of elements.
🚧Font SmoothingStyle syntax for controlling the font smoothing of an element.
🚧Font StyleStyle syntax for setting font style of an element.
🚧Font Variant NumericStyle syntax for controlling the usage of alternate glyphs for numbers, fractions, and ordinal markers.
🚧Font WeightStyle syntax for setting the weight of the font.
Grid
🚧GridStyle syntax for setting layout of grid system.
🚧Grid Auto ColumnsStyle syntax for setting the size of the grid columns.
🚧Grid Auto FlowStyle syntax for controlling how auto-placed items get inserted in the grid.
🚧Grid Auto RowsStyle syntax for setting the size of the grid rows.
🚧Grid ColumnStyle syntax for setting a grid items's size and location in a grid layout.
🚧Grid ColumnsStyle utility for creating multiple grid columns.
🚧Grid RowStyle syntax for setting a grid items's size and location in a grid layout.
🚧Grid RowsStyle utility for creating multiple grid rows.
🚧Grid TemplateStyle syntax for setting grid columns, grid rows, and grid areas.
🚧Grid Template AreasStyle syntax for setting areas in the grid container
🚧Grid Template ColumnsStyle syntax for creating columns in a grid layout.
🚧Grid Template RowsStyle syntax for creating rows in a grid layout.
Grid And Flexbox
🚧Align ContentStyle syntax for controlling how multiple rows or columns are aligned along its cross axis.
🚧Align ItemsStyle syntax for controlling how items are aligned along its cross axis.
🚧Align SelfStyle syntax for controlling how an individual item is aligned along its cross axis.
🚧GapStyle syntax for setting the gutters between rows and columns.
🚧Justify ContentStyle syntax for controlling how items are aligned along its main axis.
🚧Justify ItemsStyle syntax for controlling how items are aligned along its inline axis.
🚧Justify SelfStyle syntax for controlling how an individual item is aligned along its inline axis.
🚧OrderStyle syntax for changing the order of item in flex or grid container.
🚧Place ContentStyle syntax for setting align-content and justify-content at the same time.
🚧Place ItemsStyle syntax for setting align-items and justify-items at the same time.
🚧Place SelfStyle syntax for setting align-self and justify-self at the same time.
Interactivity
🚧Pointer EventsStyle syntax for setting whether an element reacts to pointer events.
🚧ResizeStyle syntax for setting whether an element is resizable.
🚧Touch ActionStyle syntax for setting how an element's region can be manipulated by a touchscreen user.
🚧User DragStyle syntax for controlling whether the user can drag element.
🚧User SelectStyle syntax for controlling whether the user can select text.
Layout
🚧Box Decoration BreakStyle syntax for setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
🚧Break AfterStyle syntax for controlling how page, column, or region breaks should occur after an element.
🚧Break BeforeStyle syntax for controlling how page, column, or region breaks should occur before the specified element.
🚧Break InsideStyle syntax for controlling how page, column, or region breaks should occur within the specified element.
🚧ClearStyle syntax for moving an element below floating elements instead of floating to the left or right.
🚧Column SpanStyle syntax for setting how elements span across multiple columns.
🚧ColumnsStyle syntax for setting the number of columns within the container.
🚧DirectionStyle syntax for setting the direction of text.
🚧DisplayStyle syntax for controlling the element's inner and outer display types.
🟢FloatStyle syntax for placing an element on the left or right side of its container.
🚧InsetStyle syntax for setting distance between an element and the parent element.
🚧IsolationStyle syntax for controlling whether an element should create a new stacking context.
🚧OverflowStyle syntax for controlling the desired behavior for an element's overflow.
🚧PositionStyle syntax for setting an element is positioned in a document.
🚧Z IndexStyle syntax for set the z-order of a positioned element.
List Style
🚧List StyleStyle syntax for setting all the list style properties at once.
🚧List Style ImageStyle syntax for replacing the list item marker with an image.
🚧List Style PositionStyle syntax for setting the position of the list item marker.
🚧List Style TypeStyle syntax for setting the style of the list item marker.
Media
🚧Object FitStyle syntax for setting how the content should be resized to fit its container.
🚧Object PositionStyle syntax for setting the alignment of the selected replaced element within the element's box.
Outline
🚧OutlineStyle syntax for setting all the outline properties at once.
🚧Outline ColorStyle syntax for setting the color of an element’s outline.
🚧Outline OffsetStyle syntax for setting the spacing between an outline and the border of an element.
🚧Outline StyleStyle syntax for setting the style of an element's outline.
🚧Outline WidthStyle syntax for setting the thickness of an element's outline.
Performance
🚧ContainStyle syntax for providing performance benefits by limiting calculations of layout.
🚧Will ChangeStyle syntax for setting how an element is expected to change in the browser.
Scroll
🚧Overscroll BehaviorStyle syntax for setting what a browser does when reaching the boundary of a scrolling area.
🚧Scroll BehaviorStyle syntax for setting the scrolling behavior for a scrolling box.
🚧Scroll MarginStyle syntax for setting the scroll margin of an element.
🚧Scroll PaddingStyle syntax for setting the scroll padding of an element.
🚧Scroll Snap AlignStyle syntax for setting the scroll snap position.
🚧Scroll Snap StopStyle syntax for setting whether scroll container is pass over snap positions.
🚧Scroll Snap TypeStyle syntax for setting how strictly snap points are enforced on the scroll container.
Shape
🚧Clip PathStyle syntax for creating a clipping region.
🚧Shape Image ThresholdStyle syntax for setting the alpha channel threshold for a CSS shape.
🚧Shape MarginStyle syntax for setting a margin for a CSS shape.
🚧Shape OutsideStyle syntax for setting a shape around which adjacent inline content should wrap.
Sizing
🚧Aspect RatioStyle syntax for setting the ratio for the box.
🚧Box SizingStyle syntax for setting how the total width and height of an element is calculated.
🚧HeightStyle syntax for setting an element’s height.
🚧Max HeightStyle syntax for setting the maximum height of an element.
🚧Max WidthStyle syntax for setting the maximum width of an element.
🚧Min HeightStyle syntax for setting the minimum height of an element.
🚧Min WidthStyle syntax for setting the minimum width of an element.
🚧WidthStyle syntax for setting an element’s width.
Spacing
🚧MarginStyle syntax for setting the margin area on all four sides of an element.
🚧PaddingStyle syntax for setting the padding area on all four sides of an element.
Svg
🚧StrokeStyle syntax for setting the outline color of an SVG shape.
🚧Stroke WidthStyle syntax for setting the width of the stroke to be applied to the SVG shape.
Tables
🚧Border CollapseStyle syntax for setting whether table cell have shared or separate borders.
Text
🚧Text AlignStyle syntax for setting the text alignment of an element.
🚧Text DecorationStyle syntax for setting the appearance of decorative lines on text.
🚧Text Decoration ColorStyle syntax for setting the color of decorative lines on text.
🚧Text Decoration LineStyle syntax for setting the kind of decoration that is used on text.
🚧Text Decoration StyleStyle syntax for setting the style of the decoration line that is used on text.
🚧Text Decoration ThicknessStyle syntax for setting thickness of the decoration line.
🚧Text Fill ColorStyle syntax for setting the color of text.
🚧Text IndentStyle syntax for setting indentation of the first line.
🚧Text OrientationStyle syntax for setting orientation of the text characters in a line.
🚧Text OverflowStyle syntax for handling how hidden overflow content.
🚧Text RenderingStyle syntax for setting what to optimize when rendering text.
🚧Text ShadowStyle syntax for adding shadows to text.
🚧Text SizeStyle utility for setting the font size with a golden-ratio line height.
🚧Text StrokeStyle syntax for setting the width and color of strokes for text characters.
🚧Text Stroke ColorStyle syntax for setting the color of the stroke for text characters.
🚧Text Stroke WidthStyle syntax for setting the width of the stroke for text characters.
🟢Text TransformStyle syntax for controlling capitalization of text.
🚧Text Underline OffsetStyle syntax for setting the distance of a text decoration line from its original position.
Transform
🚧TransformStyle syntax for controlling rotate, scale, skew, or translate an element.
🚧Transform BoxStyle syntax for defining the layout box to which transform and transform-origin properties relate.
🚧Transform OriginStyle syntax for setting the origin for an element’s transformations.
🚧Transform StyleStyle syntax for setting how children of an element are rendered in the 3D space.
Transition
🚧TransitionStyle syntax for controlling animation speed when changing CSS properties.
🚧Transition DelayStyle syntax for setting a time to delay before starting transition.
🚧Transition DurationStyle syntax for setting the length of time a transition should takes to complete.
🚧Transition PropertyStyle syntax for setting the CSS properties to which a transition effect should be applied.
🚧Transition Timing FunctionStyle syntax for setting speed curve of the transition effect.
Typography
🚧ContentStyle syntax for replacing an element with a generated value.
🚧Letter SpacingStyle syntax for setting the spacing between text characters.
🚧Line ClampStyle syntax for limiting the contents of a container to the specified number of lines.
🚧Line HeightStyle syntax for setting the height of a line box.
🚧Vertical AlignStyle syntax for setting vertical alignment.
🚧White SpaceStyle syntax for controlling how whitespace and line breaks within an element are handled.
🚧Word BreakStyle syntax for setting whether words should break.
🚧Word SpacingStyle syntax for setting the spacing between words.
🚧Writing ModeStyle syntax for setting different writing mode.
Variable
🚧VariableCSS variables defined specific values to be reused throughout a document.
Visibility
🚧OpacityStyle syntax for setting the opacity of an element.
🚧VisibilityStyle 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:

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?

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.