Docs clarification

CONTRIBUTING.md

@@ -6,27 +6,26 @@ If you have questions about a specific PR, want to discuss a new API idea or a b
 
 ## What about if you have problems that cannot be discussed in a public?
 
-[David Sancho](https://github.com/davesnx) has a contact email on the GitHub profile, and happy to talk about any problems via those or a DM in [Twitter](https://twitter.com/davesnx).
+[David Sancho](https://github.com/davesnx) has a contact email on the GitHub profile, and is happy to talk about any problems via email or a DM in [Twitter](https://twitter.com/davesnx).
 
 ## Code contributions
 
 Here is a quick guide to doing code contributions to the repository.
 
 1. Find some issue you're interested in, or a feature that you'd like to tackle.
-   Also make sure that no one else is already working on it. We don't want you to be
-   disappointed.
+   Also make sure that no one else is already working on it. We don't want you to be disappointed.
 
-2. Fork, then clone: `git clone https://github.com/YOUR_USERNAME/styled-ppx.git`
+2. Fork, then clone: `git clone https://github.com/YOUR_USERNAME/styled-ppx.git`.
 
-3. Create a branch with a meaningful name for the issue: `git checkout -b fix-something`
+3. Create a branch with a meaningful name for the issue: `git checkout -b fix-something`.
 
-4. Setup the project
+4. Setup the project.
 
-5. Make your changes and commit: `git add` and `git commit`
+5. Make your changes and commit: `git add` and `git commit`.
 
-6. Make sure that the tests still pass: `make test_all` (if you ran `make init` a pre-psuh githook has been created for you to run each time you push)
+6. Make sure that the tests still pass: `make test_all` (if you ran `make init` a pre-psuh githook has been created for you to run each time you push).
 
-7. Push your branch: `git push -u origin your-branch-name`
+7. Push your branch: `git push -u origin your-branch-name`.
 
 8. Submit a pull request to the upstream styled-ppx repository.
 
@@ -41,7 +40,7 @@ Here is a quick guide to doing code contributions to the repository.
 - Make sure you have installed opam and yarn (1.x).
 - Run `make init` will setup the opam switch, install dependencies and some pinned packages.
 - Run `make build` will build the project or `make dev` to build and watch for changes.
-- Run `make test_all` to run all test suites
+- Run `make test` to run all test suites.
 
 ### Editor setup
 
@@ -53,7 +52,7 @@ Follow the generic installation steps from [Reason documentation](https://reason
 
 Aside from all test suites, check the [Makefile](./Makefile) for all the available commands.
 
-There are some end to end test to ensure all the ppx generation is working as expected, under the `e2e/` folder. Which contains
+There are some end-to-end tests to ensure all the ppx generation is working as expected, under the `e2e/` folder. Which contains
 
 ```bash
 $ tree -L 1 e2e
@@ -73,8 +72,8 @@ yarn test
 
 ## Release process
 
-- Each PR created will release a nighly release that you can install via npm.
-- Each stable release will happen once the package.json's verison is updated and merged in the main branch.
+- Each PR created will create a nightly release that you can install via npm.
+- Each stable release will happen once the package.json's version is updated and merged in the main branch.
 
 ## Credits
 

README.md

@@ -4,7 +4,7 @@
 
 ### Typed styled components for ReScript
 
-**styled-ppx** is the [ppx](https://tarides.com/blog/2019-05-09-an-introduction-to-ocaml-ppx-ecosystem) that brings styled components to ReScript. Build on top of [emotion](https://emotion.sh), it allows you to style apps safe, quickly, performant and as you always done it. Allows you to create **React Components** with type-safe style definitions that don't rely on a different language ([DSL](https://en.wikipedia.org/wiki/Domain-specific_language)) than CSS
+**styled-ppx** is a [ppx](https://tarides.com/blog/2019-05-09-an-introduction-to-ocaml-ppx-ecosystem) that brings styled components to ReScript. Built on top of [emotion](https://emotion.sh), it allows you to style apps safely, quickly, and performantly - just as you have always done it. styled-ppx allows you to create **React Components** with type-safe style definitions that don't rely on a different language ([DSL](https://en.wikipedia.org/wiki/Domain-specific_language)) except CSS.
 
 ## Usage
 
@@ -27,29 +27,29 @@ Add `"@davesnx/styled-ppx/ppx"` under bsconfig `"ppx-flags"`:
 }
 ```
 
-Read more about [getting started](https://styled-ppx.vercel.app/getting-started)
+Read more about [getting started](https://styled-ppx.vercel.app/getting-started).
 
 ## [Documentation](https://styled-ppx.vercel.app)
 
-For the entire documentation, visit [styled-ppx.vercel.app](https://styled-ppx.vercel.app)
+For the entire documentation, visit [styled-ppx.vercel.app](https://styled-ppx.vercel.app).
 
 ### Editor Support
 
-We provide editor extensions that brings syntax highlight, for now. (It will include IntelliSense or other [CSS-related](https://code.visualstudio.com/docs/languages/css) features).
+We provide an editor extension that brings syntax highlighting. (In the future it may include IntelliSense or other [CSS-related](https://code.visualstudio.com/docs/languages/css) features.)
 
 #### VSCode Extension
 
-Install the **[VSCode Extension](https://marketplace.visualstudio.com/items?itemName=davesnx.vscode-styled-ppx)**
+Install the **[VSCode Extension](https://marketplace.visualstudio.com/items?itemName=davesnx.vscode-styled-ppx)**.
 
 #### vim plugin
 
-Install the **[vim plugin](https://github.com/ahrefs/vim-styled-ppx/blob/main/README.md#installation)**
+Install the **[vim plugin](https://github.com/ahrefs/vim-styled-ppx/blob/main/README.md#installation)**.
 
-> If you are interested on another editor, please [fill an issue](https://github.com/davesnx/styled-ppx/issues/new).
+> If you are interested on another editor, please [file an issue](https://github.com/davesnx/styled-ppx/issues/new).
 
 ## Contributing
 
-We would love your help improving **styled-ppx**! Please see our contributing and community guidelines, they'll help you get set up locally and explain the whole process: [CONTRIBUTING.md](./CONTRIBUTING.md).
+We would love your help improving **styled-ppx**! Please see our contributing and community guidelines; they'll help you get set up locally and explain the whole process: [CONTRIBUTING.md](./CONTRIBUTING.md).
 
 ## License
 

packages/website/pages/about.mdx

@@ -10,36 +10,36 @@ Author and maintainer: [David Sancho](https://sancho.dev)
 
 # Motivation
 
-There are a few reasons why this project exists and why came to live.
+There are a few reasons why this project exists and why it came to live.
 
 ### There was a need
-In my experience, writing React with a CSS-in-JS library is one of the best combos for writing scalable design systems, UI libraries and applications. When I discovered Reason back in the days (arround 2018), it wasn't possible to bind to styled-components neither emotion. Even ([a](https://reasonml.chat/t/idiomatic-way-to-bind-to-styled-components/886) [f](https://reasonml.chat/t/styled-components-possible/554)[e](https://reasonml.chat/t/styling-solutions-reasonreact-as-of-aug-18/958)[w](https://reasonml.chat/t/options-and-best-practices-for-styling-in-reasonreact/261) [p](https://twitter.com/lyovson/status/1233397294311100417)[e](https://discord.gg/byjdYFH)[o](https://discord.gg/byjdYFH)[p](https://discord.gg/byjdYFH)[l](https://discord.gg/byjdYFH)[e](https://forum.rescript-lang.org/t/how-to-create-bindings-for-emotion-styled/2995) were asking for it.
+In my experience, writing React with a CSS-in-JS library is one of the best combos for writing scalable design systems, UI libraries and applications. When I discovered Reason back in the day (around 2018), it wasn't possible to bind to styled-components or emotion. Even ([a](https://reasonml.chat/t/idiomatic-way-to-bind-to-styled-components/886) [f](https://reasonml.chat/t/styled-components-possible/554)[e](https://reasonml.chat/t/styling-solutions-reasonreact-as-of-aug-18/958)[w](https://reasonml.chat/t/options-and-best-practices-for-styling-in-reasonreact/261) [p](https://twitter.com/lyovson/status/1233397294311100417)[e](https://discord.gg/byjdYFH)[o](https://discord.gg/byjdYFH)[p](https://discord.gg/byjdYFH)[l](https://discord.gg/byjdYFH)[e](https://forum.rescript-lang.org/t/how-to-create-bindings-for-emotion-styled/2995) were asking for it.
 
-During that time, there were a few efforts on bringing type-safety on top of CSS with [bs-css](https://github.com/giraud/bs-css) or [bs-emotion](https://github.com/ahrefs/bs-emotion). Even thought I liked that approach, it had a few drawbacks:
-- The need for learning a new DSL on top of CSS was tedious. Very fancy for simple properties, but almost impossible for more complex ones (a classic example `width: calc(100% - 20px){:css}` became `CssJs.width(calc(min, percent(100.), px(20))){:rescript}`). For the real world usage I endup using `CssJs.unsafe`.
-- The runtime is huge. The bundle-size of bs-css starts with 64kb and goes up considerably with the usage even with ReScript death code elimination.
-- The fact about having a runtime involved to only write safe CSS doesn't seem like a nice trade-off.
+During that time, there were a few efforts to bring type-safety to CSS with [bs-css](https://github.com/giraud/bs-css) and [bs-emotion](https://github.com/ahrefs/bs-emotion). Even though I liked that approach, it had a few drawbacks:
+- The need for learning a new DSL on top of CSS was tedious. Very fancy for simple properties, but almost impossible for more complex ones (a classic example `width: calc(100% - 20px){:css}` became `CssJs.width(calc(min, percent(100.), px(20))){:rescript}`). In real world usage I would end up using `CssJs.unsafe`.
+- The runtime was huge. The bundle-size of bs-css starts with 64kb and goes up considerably with the usage, even with ReScripts dead code elimination.
+- The fact of having a runtime involved to only write safe CSS doesn't seem like a nice trade-off.
 
 ### It's possible and a good solution
-Embedding CSS inside Reason/OCaml seemed like a bad idea at first, mostly since most CSS-in-JS solutions that use native CSS relied on a JavaScript feature that isn't available in Reason [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).
+Embedding CSS inside Reason/OCaml seemed like a bad idea at first, mostly since most CSS-in-JS solutions that use native CSS relied on a JavaScript feature that isn't available in Reason: [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).
 
 After discovering what a ppx was (*"a mechanism to embed other languages inside Reason"*), and it could mimic the template literals, I jumped straight into hacking a prototype that became this project.
 
-Embedding languages inside others, isn't a new concept, has been happening for a long time. In fact, the most common case of an embedded language is usually CSS inside HTML.
-Using CSS enables all sort of integrations: Editors, DevTools, prototyping tools, Github Copilot, etc. Even for designers that don't want to understand neither care about ReScript.
+Embedding languages inside others isn't a new concept and has been happening for a long time. In fact, the most common case of an embedded language is usually CSS inside HTML.
+Using CSS enables all sorts of integrations: Editors, DevTools, prototyping tools, Github Copilot, etc. Even for designers that don't want to understand or care about ReScript.
 
 ### It can be more powerful than the JavaScript equivalents
-Enabling type-safety into CSS is a nice to have, rather than a hard requirement, but nevertheless useful. styled-ppx brings an entire CSS compiler and type-chcker. This enables features from SASS (like supporting future CSS version features) with features from emotion to inline your styles and code together.
+Enabling type-safety in CSS is a nice to have, rather than a hard requirement, but nevertheless useful. styled-ppx brings an entire CSS compiler and type-chcker. This enables features from SASS (like supporting future CSS version features) with features from emotion to inline your styles and code together.
  Features that aren't implemented but are on the horizon are mostly related in extracting the CSS from the runtime and making your styles static at runtime and have zero run-time.
 
-To know more about how it works or what are the benefits I recommend to watch [my talk at ReasonSTHLM Meetup](https://www.youtube.com/watch?v=ekHCBZiCviM).
+To know more about how it works or what are the benefits I recommend you watch [my talk at ReasonSTHLM Meetup](https://www.youtube.com/watch?v=ekHCBZiCviM).
 
 ## Credits
 
-Here's a list of people that helped me and couldn't make it without them:
+Here's a list of people that helped me and I couldn't have made styled-ppx without them:
 
-- [Javier Chávarri](https://github.com/jchavarri): for the introduction to Reason. Teaching me all his knowledge about OCaml, AST, ppx rewritters and the help of boostrapping the project.
-- [Alessandro Strada](https://github.com/astrada): this project started with inspiration from [bs-css-ppx](https://github.com/astrada/ppx_bs_css)
+- [Javier Chávarri](https://github.com/jchavarri): for the introduction to Reason. Teaching me all his knowledge about OCaml, AST, ppx rewriters and the help of bootstrapping the project.
+- [Alessandro Strada](https://github.com/astrada): this project started with inspiration from [bs-css-ppx](https://github.com/astrada/ppx_bs_css).
 - [Eduardo Rafael](https://github.com/EduardoRFS/): to teach me how to write a compiler and a type-checker. His initial implementation of the CSS Value definition and the parser combinator.
 - [Rizo](https://github.com/rizo): for the help with the API design, discussions and great conversations about styling and CSS.
 - [Max Lantas](https://github.com/mnxn): for implementing the VSCode extension.

packages/website/pages/css-support.mdx

@@ -8,7 +8,7 @@ The **styled-ppx** CSS parser supports [CSS Syntax Module Level 3](https://www.w
 
 There are a few levels of support in **styled-ppx**:
 - **Parser support**: The parser understands CSS3.
-- **Code generation support**: Can transform the CSS into [Css bindings] bindings.
+- **Code generation support**: Can transform the CSS into CSS bindings.
 - **Interpolation support**: We can interpolate values from outside of CSS creating type-safe holes.
 
 ## Detailed view of the parsing support
@@ -17,7 +17,7 @@ There are a few levels of support in **styled-ppx**:
 🟠: Partially supported
 🔴: Not supported
 
-If you want to know which properties are supported, you can check our test here: https://github.com/davesnx/styled-ppx/blob/main/packages/ppx/test/css-support/test.re (commented ones aren't supported).
+If you want to know which properties are supported, you can check our test here: https://github.com/davesnx/styled-ppx/blob/main/packages/ppx/test/css-support/css-support.re (commented out ones are not supported).
 
 ---
 | **CSS Feature**                                              	| **Link**                                  	| **Supported** 	|
@@ -77,7 +77,7 @@ If you want to know which properties are supported, you can check our test here:
 | Filter Effects Module Level 1                                	| https://www.w3.org/TR/filter-effects-1    	| 🟠             	|
 | Media Queries Level 4                                        	| https://www.w3.org/TR/mediaqueries-4      	| 🟠             	|
 
-<small>This table has been generated manually, it can be outdated.</small>
+<small>This table has been generated manually and it might be outdated.</small>
 
 All references are found in [w3.org](https://www.w3.org)
 - [(CSS 1.0) Cascading Style Sheets Level 1](https://www.w3.org/TR/CSS1/) ✅

packages/website/pages/faq.mdx

@@ -6,9 +6,9 @@ title: Frequently asked questions
 
 ## Does it support Reason and OCaml syntax?
 
-Yes, both are supported. Even though code snippets are written in ReScript (for the sake of simplicity), you can still use Reason and OCaml syntaxes. Since its meant to be used in a browser, **styled-ppx** follows the same restrictions as ReScript.
+Yes, both are supported. Even though code snippets are written in ReScript (for the sake of simplicity), you can still use Reason and OCaml syntaxes. Since it is meant to be used in a browser, **styled-ppx** follows the same restrictions as ReScript.
 
 Also, our [VSCode extension](https://marketplace.visualstudio.com/items?itemName=davesnx.vscode-styled-ppx) supports ReScript, Reason, and OCaml syntaxes.
 
 The differences are around syntaxes are the string delimiters:
-Reason and OCaml uses `"` and `{||}`, while ReScript uses "\`". We recommend that you use `{||}` when it's a multi-line string.
+Reason and OCaml uses `"` and `{||}`, while ReScript uses ```. We recommend that you use `{||}` when it's a multi-line string.

packages/website/pages/getting-started.mdx

@@ -7,7 +7,7 @@ import Link from 'next/link'
 
 # Getting Started
 
-Depends on [rescript-react](https://github.com/rescript-lang/rescript-react), make sure you have it installed first.
+Depends on [rescript-react](https://github.com/rescript-lang/rescript-react). Please make sure you have it installed first.
 
 ### Install
 
@@ -34,8 +34,8 @@ The diff on `bsconfig.json` should contain the following:
 ```
 
 (Added in v0.40.0)
-- `@davesnx/styled-ppx/css` are the CSS bindings
-- `@davesnx/styled-ppx/emotion` are the bindings to emotion.sh
+- `@davesnx/styled-ppx/css` are the CSS bindings.
+- `@davesnx/styled-ppx/emotion` are the bindings to `emotion.sh`.
 
 ### Example
 
@@ -74,7 +74,7 @@ module Layout = %styled.div([|
 If you want to try it out, just fork https://github.com/davesnx/try-styled-ppx and follow the installation instructions there.
 
 ## Editor Support
-One of the downsides of embedding a language (CSS) into another (ReScript) is the limited editor support. Because of that, we provide editor extensions that bring syntax highlighting for the CSS inside the styled-ppx notation.
+One of the downsides of embedding a language (CSS) into another language (ReScript) is the limited editor support. Because of that, we provide an editor extension that brings syntax highlighting for the CSS inside the styled-ppx notation.
 
 #### VSCode Extension
 
@@ -99,4 +99,4 @@ Add `Plugin 'ahrefs/vim-styled-ppx'` to your `~/.vimrc` and run PluginInstall.
 $ git clone https://github.com/ahrefs/vim-styled-ppx ~/.vim/bundle/vim-log-highlighting
 ```
 
-> If you are interested on another editor, please [fill an issue](https://github.com/davesnx/styled-ppx/issues/new).
+> If you are interested on another editor, please [file an issue](https://github.com/davesnx/styled-ppx/issues/new).