From ffea92ffb25cb05edc0b0cd040bcd67e4ea4ea29 Mon Sep 17 00:00:00 2001 From: Nelson Uprety Date: Tue, 12 Dec 2023 11:02:15 -0700 Subject: [PATCH 1/3] Fixed the typo to improve readability --- apps/docs/docs/learn/03-installation.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/learn/03-installation.mdx b/apps/docs/docs/learn/03-installation.mdx index 577d7f0b..d39bbabc 100755 --- a/apps/docs/docs/learn/03-installation.mdx +++ b/apps/docs/docs/learn/03-installation.mdx @@ -66,7 +66,7 @@ done with any bundler that supports Babel, using the metadata generated by the StyleX plugin. See the API reference for more details on the `@stylexjs/babel-plugin` API. -To make this easier for commonly used packagers and meta-frameworks, StyleX +To make this easier for commonly used packages and meta-frameworks, StyleX provides plugins for Webpack, Rollup, and Next.js.
From 6f15b24ca45bdb55c430f9566db55798dac7a739 Mon Sep 17 00:00:00 2001 From: Nelson Uprety Date: Tue, 12 Dec 2023 11:09:45 -0700 Subject: [PATCH 2/3] Fixed typo and grammar to enhance readability of the document --- apps/docs/docs/learn/02-thinking-in-stylex.mdx | 16 ++++++++-------- apps/docs/docs/learn/index.mdx | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/docs/docs/learn/02-thinking-in-stylex.mdx b/apps/docs/docs/learn/02-thinking-in-stylex.mdx index c04ef0a0..fa356f8a 100755 --- a/apps/docs/docs/learn/02-thinking-in-stylex.mdx +++ b/apps/docs/docs/learn/02-thinking-in-stylex.mdx @@ -46,11 +46,11 @@ Most existing solutions to this problem rely on rules and conventions.
Utility Classes Atomic utility class names like Tailwind CSS and Tachyons rely on conventions and lint rules - to ensure that conflicting class names are not applied on the same element. Such tooling adds + to ensure that conflicting class names are not applied to the same element. Such tooling adds constraints on where and how styles can be applied, putting architectural limitations on styling.
-StyleX aims to improve on both the consistency and predictability of styles +StyleX aims to improve both the consistency and predictability of styles _and_ the expressive power available. We believe this is possible through build-tools. @@ -162,7 +162,7 @@ function MyComponent({style}) { This is a little more code, but the runtime cost is still minimal because of how fast the `stylex.props()` function is. -Most other styling solutions don't enable composition of styles across file +Most other styling solutions don't enable the composition of styles across file boundaries. The state of the art is to combine lists of class names. ### Small API surface @@ -181,8 +181,8 @@ At its core, StyleX can be boiled down to two functions: those styles to an element. Within these two functions, we choose to rely on common JS patterns rather than -introduce unique API or patterns for StyleX. For example, we don't have an API for -conditional styles. Instead we support applying styles conditionally with +introduce unique APIs or patterns for StyleX. For example, we don't have an API for +conditional styles. Instead, we support applying styles conditionally with boolean or ternary expressions. Things should work as expected when dealing with JavaScript objects and arrays. @@ -248,7 +248,7 @@ type Props = { }; ``` -Styles being typed enables extremely sophisticated rules about the ways in which +Styles being typed enables extremely sophisticated rules about how a component's styles can be customized with **zero-runtime cost**. ### Shareable constants @@ -294,11 +294,11 @@ distance": - `.className ~ *` - `.className:hover > div:first-child` -All of these patterns, while powerful, makes styles fragile and less predictable. +All of these patterns, while powerful, make styles fragile and less predictable. Applying class names on one element can affect a completely different element. Inheritable styles such as `color` will still be inherited, but that is the -_only_ form of style-at-a-distance that StyleX allows. And in those cases too, +_only_ form of style-at-a-distance that StyleX allows. In those cases too, the styles applied directly on an element always take precedence over inherited styles. diff --git a/apps/docs/docs/learn/index.mdx b/apps/docs/docs/learn/index.mdx index e25dd1ef..717353e6 100644 --- a/apps/docs/docs/learn/index.mdx +++ b/apps/docs/docs/learn/index.mdx @@ -9,7 +9,7 @@ title: Introduction # Introduction to StyleX -StyleX is a simple, easy to use JavaScript syntax and compiler for styling web +StyleX is a simple, easy-to-use JavaScript syntax and compiler for styling web apps. StyleX combines the strengths and avoids the weaknesses of both inline styles From b630e1a5115ed9c08385ee0683c3343cdb9eba1b Mon Sep 17 00:00:00 2001 From: Nelson Uprety Date: Tue, 12 Dec 2023 12:13:08 -0700 Subject: [PATCH 3/3] Update 02-thinking-in-stylex.mdx as per the request I have fixed the suggested changes. Thank you --- apps/docs/docs/learn/02-thinking-in-stylex.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/docs/learn/02-thinking-in-stylex.mdx b/apps/docs/docs/learn/02-thinking-in-stylex.mdx index fa356f8a..ed94458e 100755 --- a/apps/docs/docs/learn/02-thinking-in-stylex.mdx +++ b/apps/docs/docs/learn/02-thinking-in-stylex.mdx @@ -46,7 +46,7 @@ Most existing solutions to this problem rely on rules and conventions.
Utility Classes Atomic utility class names like Tailwind CSS and Tachyons rely on conventions and lint rules - to ensure that conflicting class names are not applied to the same element. Such tooling adds + to ensure that conflicting class names are not applied on the same element. Such tooling adds constraints on where and how styles can be applied, putting architectural limitations on styling.
@@ -162,7 +162,7 @@ function MyComponent({style}) { This is a little more code, but the runtime cost is still minimal because of how fast the `stylex.props()` function is. -Most other styling solutions don't enable the composition of styles across file +Most other styling solutions don't enable composition of styles across file boundaries. The state of the art is to combine lists of class names. ### Small API surface