docs: fix typos and improve clarity in README.md (#432)

Author: ersachin3112

README.md

@@ -13,7 +13,7 @@
 
 # stylus-loader
 
-A Stylus loader for webpack. Compiles Styl to CSS.
+A Stylus loader for webpack. Compiles Stylus files into CSS.
 
 ## Getting Started
 
@@ -35,7 +35,7 @@ or
 pnpm add -D stylus stylus-loader
 ```
 
-Then add the loader to your `webpack` config. For example:
+Then add the loader to your `webpack` configuration. For example:
 
 **webpack.config.js**
 
@@ -52,7 +52,7 @@ module.exports = {
 };
 ```
 
-And run `webpack` via your preferred method.
+Finally, run `webpack` using the method you normally use (e.g., via CLI or an npm script).
 
 ## Options
 
@@ -84,9 +84,11 @@ type stylusOptions =
 
 Default: `{}`
 
-You can pass any Stylus specific options to the `stylus-loader` through the `stylusOptions` property in the [loader options](https://webpack.js.org/configuration/module/#ruleoptions--rulequery)
+You can pass any Stylus specific options to the `stylus-loader` through the `stylusOptions` property in the [loader options](https://webpack.js.org/configuration/module/#ruleoptions--rulequery).
+
 See the [Stylus documentation](https://stylus-lang.com/docs/js.html).
-Options in dash-case should use camelCase.
+
+Options in dash-case should be written in camelCase.
 
 #### `object`
 
@@ -299,7 +301,7 @@ type webpackImporter = boolean;
 
 Default: `true`
 
-Enables/Disables the default Webpack importer.
+Enables/disables the default Webpack importer.
 
 This can improve performance in some cases.
 Use it with caution because aliases and `@import` at-rules starting with `~` will not work.
@@ -345,13 +347,14 @@ type additionalData =
 Default: `undefined`
 
 Prepends `Stylus` code before the actual entry file.
-In this case, the `stylus-loader` will not override the source but just **prepend** the entry's content.
+In this case, the `stylus-loader` will not override the source but will simply **prepend** the entry's content.
 
-This is especially useful when some of your Stylus variables depend on the environment:
+This is especially useful when some of your Stylus variables depend on the environment.
 
 > [!NOTE]
 >
-> Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Stylus entry files.
+> Since you're injecting code, this will break the source mappings in your entry file.
+> Often there's a simpler solution than this, such as using multiple Stylus entry files.
 
 #### `string`
 
@@ -402,7 +405,7 @@ module.exports = {
                   return "value = 100px" + content;
                 }
 
-                return "value 200px" + content;
+                return "value = 200px" + content;
               },
             },
           },
@@ -436,7 +439,7 @@ module.exports = {
                   return "value = 100px" + content;
                 }
 
-                return "value 200px" + content;
+                return "value = 200px" + content;
               },
             },
           },
@@ -455,7 +458,8 @@ Type:
 type implementation = Function | string;
 ```
 
-The special `implementation` option determines which implementation of Stylus to use. Overrides the locally installed `peerDependency` version of `stylus`.
+The `implementation` option allows you to specify which `Stylus implementation` to use.
+It overrides the locally installed `peerDependency` version of `stylus`.
 
 #### `function`
 
@@ -511,9 +515,9 @@ module.exports = {
 
 ## Examples
 
-### Normal usage
+### Normal Usage
 
-Chain the `stylus-loader` with the [`css-loader`](https://github.com/webpack-contrib/css-loader) and the [`style-loader`](https://github.com/webpack-contrib/style-loader) to immediately apply all styles to the DOM.
+Chain `stylus-loader` with the [`css-loader`](https://github.com/webpack-contrib/css-loader) and [`style-loader`](https://github.com/webpack-contrib/style-loader) to immediately apply all styles to the DOM.
 
 **webpack.config.js**
 
@@ -542,7 +546,8 @@ module.exports = {
 
 ### Source maps
 
-To enable sourcemaps for CSS, you'll need to pass the `sourceMap` property in the loader's options. If this is not passed, the loader will respect the setting for webpack source maps, set in `devtool`.
+To enable sourcemaps for CSS, you'll need to pass the `sourceMap` property in the loader's options.
+If this is not passed, the loader will respect the setting for webpack source maps, set in `devtool`.
 
 **webpack.config.js**
 
@@ -609,9 +614,9 @@ module.exports = {
 
 ### Import JSON files
 
-Stylus does not provide resolving capabilities in the `json` function.
+Stylus does not provide resolving capabilities in the `json()` function.
 Therefore webpack resolver does not work for `.json` files.
-Use [`stylus resolver`](#stylus-resolver).
+To handle this, use a [`stylus resolver`](#stylus-resolver).
 
 **index.styl**
 
@@ -654,34 +659,38 @@ module.exports = {
 
 ### In production
 
-Usually, it's recommended to extract the style sheets into a dedicated file in production using the [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin). This way your styles are not dependent on JavaScript.
+Usually, it's recommended to extract the style sheets into a dedicated CSS file in production using the [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin). This way your styles are not dependent on JavaScript.
 
 ### webpack resolver
 
 Webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/configuration/resolve/).
 The `stylus-loader` applies the webpack resolver when processing queries.
-Thus you can import your Stylus modules from `node_modules`.
+Thus you can import your Stylus modules directly from `node_modules`.
 
 ```styl
 @import 'bootstrap-styl/bootstrap/index.styl';
 ```
 
-Using `~` is deprecated and can be removed from your code (**we recommend it**), but we still support it for historical reasons.
+Using `~` prefix is deprecated and can be removed from your code (**we recommended**), but we still support it for historical reasons.
+
 Why you can removed it? The loader will first try to resolve `@import`/`@require` as relative, if it cannot be resolved, the loader will try to resolve `@import`/`@require` inside [`node_modules`](https://webpack.js.org/configuration/resolve/#resolvemodules).
+
 Just prepend them with a `~` which tells webpack to look up the [`modules`](https://webpack.js.org/configuration/resolve/#resolvemodules).
 
 ```styl
 @import "~bootstrap-styl/bootstrap/index.styl";
 ```
 
-It's important to only prepend it with `~`, because `~/` resolves to the home-directory.
-Webpack needs to distinguish between `bootstrap` and `~bootstrap`, because CSS and Styl files have no special syntax for importing relative files.
+It's important to only prepend it with `~`, because `~/` resolves to the home-directory, which is different.
+
+Webpack needs to distinguish between `bootstrap` and `~bootstrap`, because CSS and Stylus files have no special syntax for importing relative files.
+
 Writing `@import "file"` is the same as `@import "./file";`
 
 ### Stylus resolver
 
 If you specify the `paths` option, modules will be searched in the given `paths`.
-This is Stylus default behavior.
+This is the default Stylus behavior.
 
 **webpack.config.js**
 
@@ -715,7 +724,9 @@ module.exports = {
 
 ### Extracting style sheets
 
-Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or [hot module replacement](https://webpack.js.org/concepts/hot-module-replacement/) in development. In production, on the other hand, it's not a good idea to apply your style sheets depending on JS execution. Rendering may be delayed or even a [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) might be visible. Thus it's often still better to have them as separate files in your final production build.
+Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed URLs or [hot module replacement](https://webpack.js.org/concepts/hot-module-replacement/) in development.
+In production, on the other hand, it's not a good idea to apply your style sheets depending on JS execution.
+Rendering may be delayed or even a [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) might be visible. Thus it's often still better to have them as separate files in your final production build.
 
 There are two possibilities to extract a style sheet from the bundle:
 
@@ -724,7 +735,8 @@ There are two possibilities to extract a style sheet from the bundle:
 
 ## Contributing
 
-Please take a moment to read our contributing guidelines if you haven't yet done so.
+We welcome all contributions!
+If you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.
 
 [CONTRIBUTING](./.github/CONTRIBUTING.md)