diff --git a/CHANGELOG.md b/CHANGELOG.md
index 553ecb3..f36f39d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,26 @@
+## 2.1.0-beta.2 (2024-11-29)
+
+* chore: update `fileExtension` type 410d21e
+
+## 2.1.0-beta.1 (2024-11-29)
+
+* test: update tests  2c69ad8
+* feat: support `fileExtension` as array  5175272
+* refactor: use native for loops instead of lodash/each  bcd80ef
+* build(deps-dev): bump @vitest/coverage-v8 from 2.1.5 to 2.1.6  e07feae
+* build(deps-dev): bump @biomejs/biome from 1.9.3 to 1.9.4  6e6323d
+* build(deps): bump posthtml-parser from 0.12.0 to 0.12.1  e4f7e73
+* build(deps): bump style-to-object from 1.0.7 to 1.0.8  ad81c84
+* build(deps-dev): bump markdown-it-anchor from 9.1.0 to 9.2.0  0fbfcfa
+
+## 2.0.0 (2024-07-25)
+
+* **[BREAKING]** Node.js 18+ 907de89
+* **[BREAKING]** renamed `blacklistAttributes` to `blocklistAttributes` 0cd302e
+* migrate to Vitest 8cb2619
+* fixed test for `posthtml-include` latest version 3d168d4
+* feat: add types 7feb3af
+
 ## 2.0.0-beta.2 (2024-07-25)
 
 * 2.0.0-beta.2 ([8078cce](https://github.com/posthtml/posthtml-components/commit/8078cce))
@@ -298,6 +321,3 @@
 * Update readme ([42fa034](https://github.com/posthtml/posthtml-components/commit/42fa034))
 * Update version ([0599426](https://github.com/posthtml/posthtml-components/commit/0599426))
 * Update version ([27ab49c](https://github.com/posthtml/posthtml-components/commit/27ab49c))
-
-
-
diff --git a/README.md b/README.md
index 8f6d782..371f4cc 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,40 @@ If you are familiar with Blade, React, Vue or similar, you will find the syntax
 
 **See also the first [PostHTML Bootstrap UI](https://github.com/thewebartisan7/posthtml-bootstrap-ui) using this plugin and check also the [starter template here](https://github.com/thewebartisan7/posthtml-bootstrap-ui-starter).**
 
+## Options
+
+| Name                     | Type               | Default                                      | Description                                                                      |
+|--------------------------|--------------------|----------------------------------------------|----------------------------------------------------------------------------------|
+| **root**                 | `String`           | `'./'`                                       | Root path where to look for components.                                          |
+| **folders**              | `String[]`         | `['']`                                       | Array of paths relative to `options.root` or defined namespaces.                 |
+| **fileExtension**        | `String\|String[]` | `'html'`                                     | Component file extensions to look for.                                           |
+| **tagPrefix**            | `String`           | `'x-'`                                       | Tag prefix.                                                                      |
+| **tag**                  | `String\|Boolean`  | `false`                                      | Component tag. Use with `options.attribute`. Boolean only `false`.               |
+| **attribute**            | `String`           | `'src'`                                      | Attribute to use for defining path to component file.                            |
+| **namespaces**           | `String[]`         | `[]`                                         | Array of namespace root paths, fallback paths, and custom override paths.        |
+| **namespaceSeparator**   | `String`           | `'::'`                                       | Namespace separator for tag names.                                               |
+| **yield**                | `String`           | `'yield'`                                    | Tag name for injecting main component content.                                   |
+| **slot**                 | `String`           | `'slot'`                                     | Tag name for [slots](#slots)                                                     |
+| **fill**                 | `String`           | `'fill'`                                     | Tag name for filling slots.                                                      |
+| **slotSeparator**        | `String`           | `':'`                                        | Name separator for `<slot>` and `<fill>` tags.                                   |
+| **stack**                | `String`           | `'stack'`                                    | Tag name for [`<stack>`](#stacks).                                               |
+| **push**                 | `String`           | `'push'`                                     | Tag name for `<push>`.                                                           |
+| **propsScriptAttribute** | `String`           | `'props'`                                    | Attribute in `<script props>` for retrieving [component props](#props).          |
+| **propsContext**         | `String`           | `'props'`                                    | Name of the object inside the script for processing props.                       |
+| **propsAttribute**       | `String`           | `'props'`                                    | Attribute name to define props as JSON on a component tag.                       |
+| **propsSlot**            | `String`           | `'props'`                                    | Used to retrieve props passed to slot via `$slots.slotName.props`.               |
+| **parserOptions**        | `Object`           | `{recognizeSelfClosing: true}`               | Pass options to `posthtml-parser`.                                               |
+| **expressions**          | `Object`           | `{}`                                         | Pass options to `posthtml-expressions`.                                          |
+| **plugins**              | `Array`            | `[]`                                         | PostHTML plugins to apply to every parsed component.                             |
+| **matcher**              | `Object`           | `[{tag: options.tagPrefix}]`                 | Array of objects used to match tags.                                             |
+| **attrsParserRules**     | `Object`           | `{}`                                         | Additional rules for attributes parser plugin.                                   |
+| **strict**               | `Boolean`          | `true`                                       | Toggle exception throwing.                                                       |
+| **mergeCustomizer**      | `Function`         | `function`                                   | Callback for lodash `mergeWith` to merge `options.expressions.locals` and props. |
+| **utilities**            | `Object`           | `{merge: _.mergeWith, template: _.template}` | Utility methods passed to `<script props>`.                                      |
+| **elementAttributes**    | `Object`           | `{}`                                         | Object with tag names and function modifiers of `valid-attributes.js`.           |
+| **safelistAttributes**   | `String[]`         | `['data-*']`                                 | Array of attribute names to add to default valid attributes.                     |
+| **blocklistAttributes**  | `String[]`         | `[]`                                         | Array of attribute names to remove from default valid attributes.                |
+
 ## Basic example
 
 Create the component:
@@ -58,7 +92,7 @@ Init PostHTML:
 ```js
 // index.js
 const posthtml = require('posthtml')
-const components = require('posthtml-components')
+const components = require('posthtml-component')
 const { readFileSync, writeFileSync } = require('node:fs')
 
 posthtml([
@@ -101,63 +135,49 @@ You can also define which attributes are considered to be valid, via the plugin'
 
 More details on this in [Attributes](#attributes) section.
 
-### yield tag
+### yield
 
-The `<yield></yield>` tag is where content that you pass to a component will be injected.
+The `<yield>` tag is where content that you pass to a component will be injected.
 
 The plugin configures the PostHTML parser to recognize self-closing tags, so you can also just write is as `<yield />`.
 
 For brevity, we will use self-closing tags in the examples.
 
+### fileExtension
+
+By default, the plugin looks for components with the `.html` extension. You can change this by passing an array of extensions to the `fileExtension` option.
+
+When using an array, if two files with the same name match both extensions, the file matching the first extension in the array will be used.
+
+```js
+const posthtml = require('posthtml')
+const components = require('posthtml-component')
+
+posthtml([
+  components({ 
+    root: './src', // contains layout.html and layout.md
+    fileExtension: ['html', 'md']
+  })
+])
+  .process(`<x-layout />`)
+  .then(result => console.log(result.html)) // layout.html content
+```
+
 ### More examples
 
 See also the `docs-src` folder where you can find more examples. 
 
 You can clone this repo and run `npm run build` to compile them.
 
-## Options
-
-| Name                     | Type              | Default                                      | Description                                                                             |
-|--------------------------|-------------------|----------------------------------------------|-----------------------------------------------------------------------------------------|
-| **root**                 | `String`          | `'./'`                                       | Root path for components lookup.                                                        |
-| **folders**              | `String[]`        | `['']`                                       | Array of paths relative to `options.root` or defined namespaces.                        |
-| **tagPrefix**            | `String`          | `'x-'`                                       | Tag prefix.                                                                             |
-| **tag**                  | `String\|Boolean` | `false`                                      | Component tag. Use with `options.attribute`. Boolean only `false`.                      |
-| **attribute**            | `String`          | `'src'`                                      | Component attribute for setting path.                                                   |
-| **namespaces**           | `String[]`        | `[]`                                         | Array of namespace root paths, fallback paths, and custom override paths.               |
-| **namespaceSeparator**   | `String`          | `'::'`                                       | Namespace separator for tag names.                                                      |
-| **fileExtension**        | `String`          | `'html'`                                     | File extension for component files.                                                     |
-| **yield**                | `String`          | `'yield'`                                    | Tag name for injecting main component content.                                          |
-| **slot**                 | `String`          | `'slot'`                                     | Tag name for slots.                                                                     |
-| **fill**                 | `String`          | `'fill'`                                     | Tag name for filling slots.                                                             |
-| **slotSeparator**        | `String`          | `':'`                                        | Name separator for `<slot>` and `<fill>` tags.                                          |
-| **push**                 | `String`          | `'push'`                                     | Tag name for `<push>`.                                                                  |
-| **stack**                | `String`          | `'stack'`                                    | Tag name for `<stack>`.                                                                 |
-| **propsScriptAttribute** | `String`          | `'props'`                                    | Attribute in `<script props>` for retrieving component props.                           |
-| **propsContext**         | `String`          | `'props'`                                    | Name of the object inside the script for processing props.                              |
-| **propsAttribute**       | `String`          | `'props'`                                    | Attribute to define props as JSON.                                                      |
-| **propsSlot**            | `String`          | `'props'`                                    | Used to retrieve props passed to slot via `$slots.slotName.props`.                      |
-| **parserOptions**        | `Object`          | `{recognizeSelfClosing: true}`               | Pass options to `posthtml-parser`.                      |
-| **expressions**          | `Object`          | `{}`                                         | Pass options to `posthtml-expressions`.                  |
-| **plugins**              | `Array`           | `[]`                                         | PostHTML plugins to apply to every parsed component.                                    |
-| **matcher**              | `Object`          | `[{tag: options.tagPrefix}]`                 | Array of objects used to match tags.                                                    |
-| **attrsParserRules**     | `Object`          | `{}`                                         | Additional rules for attributes parser plugin.                                          |
-| **strict**               | `Boolean`         | `true`                                       | Toggle exception throwing.                                                              |
-| **mergeCustomizer**      | `Function`        | `function`                                   | Callback for lodash `mergeWith` to merge `options.expressions.locals` and props.        |
-| **utilities**            | `Object`          | `{merge: _.mergeWith, template: _.template}` | Utility methods passed to `<script props>`. |
-| **elementAttributes**    | `Object`          | `{}`                                         | Object with tag names and function modifiers of `valid-attributes.js`.                  |
-| **safelistAttributes**   | `String[]`        | `['data-*']`                                 | Array of attribute names to add to default valid attributes.                            |
-| **blocklistAttributes**  | `String[]`        | `[]`                                         | Array of attribute names to remove from default valid attributes.                       |
-
 ## Features
 
 ### Tag names and x-tags
 
 You can use the components in multiple ways, or also a combination of them.
 
-If you to use components as 'includes', you may define a tag and src attribute name.
+If you want to use components as 'includes', you can define tag and `src` attribute names.
 
-Using our previous button component example, we can define the tag and attribute names and then use it in this way:
+Using our previous button component example, we can define the tag and attribute names and then use it like this:
 
 ```hbs
 <!-- src/index.html -->
@@ -174,7 +194,7 @@ Init PostHTML:
 // index.js
 
 require('posthtml')(
-  require('posthtml-components')({ 
+  require('posthtml-component')({ 
     root: './src', 
     tag: 'component', 
     attribute: 'src' 
@@ -183,16 +203,20 @@ require('posthtml')(
   .then(/* ... */)
 ```
 
-If you need more control over tag matching, you can pass an array of matcher or single object via `options.matcher` like this:
+If you need more control over tag matching, you may pass an array of matcher or single object via `options.matcher`:
 
 ```js
 // index.js
 const options = { 
   root: './src', 
-  matcher: [{tag: 'a-tag'}, {tag: 'another-one'}, {tag: new RegExp(`^app-`, 'i')}] 
+  matcher: [
+    {tag: 'a-tag'}, 
+    {tag: 'another-one'}, 
+    {tag: new RegExp(`^app-`, 'i')},
+  ] 
 };
 
-require('posthtml')(require('posthtml-components')(options))
+require('posthtml')(require('posthtml-component')(options))
   .process(/* ... */)
   .then(/* ... */)
 ```
@@ -208,7 +232,7 @@ const options = {
   tagPrefix: 'x-'
 };
 
-require('posthtml')(require('posthtml-components')(options))
+require('posthtml')(require('posthtml-component')(options))
   .process(/* ... */)
   .then(/* ... */)
 ```
@@ -254,12 +278,13 @@ const options = {
   parserOptions: { decodeEntities: true } 
 };
 
-require('posthtml')(require('posthtml-components')(options))
+require('posthtml')(require('posthtml-component')(options))
   .process('some HTML', options.parserOptions)
   .then(/* ... */)
 ```
 
-Important: as you can see, whatever `parserOptions` you pass to the plugin, must also be passed in the `process` method in your code, otherwise your PostHTML build will use `posthtml-parser` defaults and will override anything you've passed to `posthtml-component`.
+> [!IMPORTANT]
+> The `parserOptions` that you pass to the plugin must also be passed in the `process` method in your code, otherwise your PostHTML build will use `posthtml-parser` defaults and will override anything you've passed to `posthtml-component`.
 
 #### Self-closing tags
 
@@ -267,7 +292,7 @@ The plugin supports self-closing tags by default, but you need to make sure to e
 
 ```js
 // index.js
-require('posthtml')(require('posthtml-components')({root: './src'}))
+require('posthtml')(require('posthtml-component')({root: './src'}))
   .process('your HTML...', {recognizeSelfClosing: true})
   .then(/* ... */)
 ```
@@ -287,7 +312,7 @@ const options = {
   folders: ['components', 'layouts'] 
 };
 
-require('posthtml')(require('posthtml-components')(options))
+require('posthtml')(require('posthtml-component')(options))
   .process(/* ... */)
   .then(/* ... */)
 ```
@@ -826,7 +851,7 @@ If default configurations for valid attributes are not right for you, you may co
 const { readFileSync, writeFileSync } = require('fs')
 
 const posthtml = require('posthtml')
-const components = require('posthtml-components')
+const components = require('posthtml-component')
 
 const options = {
   root: './src',  
diff --git a/package-lock.json b/package-lock.json
index 48fe36c..201eb11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "posthtml-component",
-  "version": "2.0.0",
+  "version": "2.1.0-beta.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "posthtml-component",
-      "version": "2.0.0",
+      "version": "2.1.0-beta.2",
       "license": "MIT",
       "dependencies": {
         "lodash": "^4.17.21",
diff --git a/package.json b/package.json
index 327acaa..3df18bd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "posthtml-component",
-  "version": "2.0.0",
+  "version": "2.1.0-beta.2",
   "description": "Laravel Blade-inspired components for PostHTML with slots, attributes as props, custom tags and more.",
   "license": "MIT",
   "repository": "posthtml/posthtml-components",
diff --git a/src/find-path.js b/src/find-path.js
index d95da07..1061441 100644
--- a/src/find-path.js
+++ b/src/find-path.js
@@ -13,16 +13,20 @@ const folderSeparator = '.';
  * @return {String|boolean} Full path or boolean false
  */
 module.exports = (tag, options) => {
-  const fileNameFromTag = tag
-    .replace(options.tagPrefix, '')
-    .split(folderSeparator)
-    .join(path.sep)
-    .concat(folderSeparator, options.fileExtension);
+  const extensions = Array.isArray(options.fileExtension) ? options.fileExtension : [options.fileExtension];
+
+  const fileNamesFromTag = extensions.map(ext =>
+    tag
+      .replace(options.tagPrefix, '')
+      .split(folderSeparator)
+      .join(path.sep)
+      .concat(folderSeparator, ext)
+  )
 
   try {
-    return tag.includes(options.namespaceSeparator) ?
-      searchInNamespaces(tag, fileNameFromTag.split(options.namespaceSeparator), options) :
-      searchInFolders(tag, fileNameFromTag, options);
+    return tag.includes(options.namespaceSeparator)
+      ? searchInNamespaces(tag, fileNamesFromTag, options)
+      : searchInFolders(tag, fileNamesFromTag, options);
   } catch (error) {
     if (options.strict) {
       throw new Error(error.message);
@@ -36,15 +40,17 @@ module.exports = (tag, options) => {
  * Search component file in root
  *
  * @param  {String} tag [tag name]
- * @param  {String} fileNameFromTag [filename converted from tag name]
+ * @param  {Array} fileNamesFromTag [filename converted from tag name]
  * @param  {Object} options [posthtml options]
  * @return {String|boolean} [custom tag root where the module is found]
  */
-function searchInFolders(tag, fileNameFromTag, options) {
-  const componentPath = search(options.root, options.folders, fileNameFromTag, options.fileExtension);
+function searchInFolders(tag, fileNamesFromTag, options) {
+  const componentPath = search(options.root, options.folders, fileNamesFromTag, options.fileExtension);
 
   if (!componentPath) {
-    throw new Error(`[components] <${tag}> could not find ${fileNameFromTag} in the defined root paths (${options.folders.join(', ')})`);
+    throw new Error(
+      `[components] <${tag}> could not find ${fileNamesFromTag} in the defined root paths (${options.folders.join(', ')})`
+    );
   }
 
   return componentPath;
@@ -54,65 +60,89 @@ function searchInFolders(tag, fileNameFromTag, options) {
  * Search component file within all defined namespaces
  *
  * @param  {String} tag [tag name with namespace]
- * @param  {String} namespace [tag's namespace]
- * @param  {String} fileNameFromTag [filename converted from tag name]
+ * @param  {Array} namespaceAndFileNames Array of [namespace]::[filename]
  * @param  {Object} options [posthtml options]
  * @return {String|boolean} [custom tag root where the module is found]
  */
-function searchInNamespaces(tag, [namespace, fileNameFromTag], options) {
-  const namespaceOption = options.namespaces.find(n => n.name === namespace.replace(options.tagPrefix, ''));
+function searchInNamespaces(tag, namespaceAndFileNames, options) {
+  let result = '';
 
-  if (!namespaceOption) {
-    throw new Error(`[components] Unknown component namespace: ${namespace}.`);
-  }
+  for (const namespaceAndFileName of namespaceAndFileNames) {
+    const [namespace, fileNameFromTag] = namespaceAndFileName.split('::');
 
-  let componentPath;
+    const namespaceOption = options.namespaces.find(n => n.name === namespace.replace(options.tagPrefix, ''));
 
-  // 1) Check in custom root
-  if (namespaceOption.custom) {
-    componentPath = search(namespaceOption.custom, options.folders, fileNameFromTag, options.fileExtension);
-  }
+    if (!namespaceOption) {
+      throw new Error(`[components] Unknown component namespace: ${namespace}.`);
+    }
 
-  // 2) Check in base root
-  if (!componentPath) {
-    componentPath = search(namespaceOption.root, options.folders, fileNameFromTag, options.fileExtension);
-  }
+    let componentPath;
 
-  // 3) Check in fallback root
-  if (!componentPath && namespaceOption.fallback) {
-    componentPath = search(namespaceOption.fallback, options.folders, fileNameFromTag, options.fileExtension);
-  }
+    // 1) Check in custom root
+    if (namespaceOption.custom) {
+      componentPath = search(namespaceOption.custom, options.folders, fileNameFromTag, options.fileExtension);
+    }
+
+    // 2) Check in base root
+    if (!componentPath) {
+      componentPath = search(namespaceOption.root, options.folders, fileNameFromTag, options.fileExtension);
+    }
+
+    // 3) Check in fallback root
+    if (!componentPath && namespaceOption.fallback) {
+      componentPath = search(namespaceOption.fallback, options.folders, fileNameFromTag, options.fileExtension);
+    }
 
-  if (!componentPath && options.strict) {
-    throw new Error(`[components] <${tag}> could not find ${fileNameFromTag} in the defined namespace base path ${namespaceOption.root}`);
+    if (!componentPath) {
+      throw new Error(`[components] <${tag}> could not find ${fileNameFromTag} in the defined namespace paths.`);
+    }
+
+    result = componentPath;
   }
 
-  return componentPath;
+  return result;
 }
 
 /**
- * Main search component file function
+ * Main component file search function
  *
- * @param  {String} root Base root or namespace root from options
- * @param  {Array} folders Folders from options
- * @param  {String} fileName Filename converted from tag name
- * @param  {String} extension File extension from options
+ * @param  {String} root Base root or namespace root from `options`
+ * @param  {Array} folders Folders to search in from `options`
+ * @param  {Array} fileNames Filenames converted from tag name
+ * @param  {Array} extensions File extension(s) from `options`
  * @return {String|boolean} [custom tag root where the module is found]
  */
-function search(root, folders, fileName, extension) {
+function search(root, folders, fileNames, extensions) {
   let componentPath;
+  let componentFound = false;
 
-  let componentFound = folders.some(folder => {
-    componentPath = path.join(path.resolve(root, folder), fileName);
-    return existsSync(componentPath);
-  });
+  fileNames = Array.isArray(fileNames) ? fileNames : [fileNames];
 
-  if (!componentFound) {
-    fileName = fileName.replace(`.${extension}`, `${path.sep}index.${extension}`);
+  for (const fileName of fileNames) {
     componentFound = folders.some(folder => {
       componentPath = path.join(path.resolve(root, folder), fileName);
+
       return existsSync(componentPath);
     });
+
+    if (componentFound) break;
+  }
+
+  if (!componentFound) {
+    for (const extension of extensions) {
+      for (const fileName of fileNames) {
+        const newFileName = fileName.replace(`.${extension}`, `${path.sep}index.${extension}`);
+
+        componentFound = folders.some(folder => {
+          componentPath = path.join(path.resolve(root, folder), newFileName);
+          return existsSync(componentPath);
+        });
+
+        if (componentFound) break;
+      }
+
+      if (componentFound) break;
+    }
   }
 
   return componentFound ? componentPath : false;
diff --git a/src/index.d.ts b/src/index.d.ts
index d395054..17361f2 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -60,7 +60,7 @@ export type PostHTMLComponents = {
    *
    * @default 'html'
    */
-  fileExtension?: string;
+  fileExtension?: string|string[];
 
   /**
    * Name of the tag that will be replaced with the content that is passed to the component.
diff --git a/src/index.js b/src/index.js
index d8f2b9f..70a6bae 100644
--- a/src/index.js
+++ b/src/index.js
@@ -74,17 +74,26 @@ module.exports = (options = {}) => tree => {
     uniqueId,
     isEnabled: prop => prop === true || prop === ''
   };
-  // Additional element attributes, in case already exist in valid-attributes.js it will replace all attributes
-  // It should be an object with key as tag name and as value a function modifier which receive
-  // the default attributes and return an array of attributes. Example:
-  // { TAG: (attributes) => { attributes[] = 'attribute-name'; return attributes; } }
+
+  /**
+   * Additional element attributes. If they already exist in valid-attributes.js,
+   * it will replace all attributes. It should be an object with tag name as
+   * the key and a function modifier as the value, which will receive the
+   * default attributes and return an array of attributes.
+   *
+   * Example:
+   * { TAG: (attributes) => { attributes[] = 'attribute-name'; return attributes; } }
+   */
   options.elementAttributes = isPlainObject(options.elementAttributes) ? options.elementAttributes : {};
   options.safelistAttributes = Array.isArray(options.safelistAttributes) ? options.safelistAttributes : [];
   options.blocklistAttributes = Array.isArray(options.blocklistAttributes) ? options.blocklistAttributes : [];
 
-  // Merge customizer callback passed to lodash mergeWith
-  //  for merge attribute `props` and all attributes starting with `merge:`
-  //  @see https://lodash.com/docs/4.17.15#mergeWith
+  /**
+   * Merge customizer callback passed to `lodash.mergeWith` for merging
+   * attribute `props` and all attributes starting with `merge:`.
+   *
+   * @see {@link https://lodash.com/docs/4.17.15#mergeWith|Lodash}
+   */
   options.mergeCustomizer = options.mergeCustomizer || ((objectValue, sourceValue) => {
     if (Array.isArray(objectValue)) {
       return objectValue.concat(sourceValue);
@@ -105,6 +114,7 @@ module.exports = (options = {}) => tree => {
 
   if (!Array.isArray(options.matcher)) {
     options.matcher = [];
+
     if (options.tagPrefix) {
       options.matcher.push({tag: options.tagPrefix});
     }
@@ -116,8 +126,10 @@ module.exports = (options = {}) => tree => {
 
   options.folders = Array.isArray(options.folders) ? options.folders : [options.folders];
   options.namespaces = Array.isArray(options.namespaces) ? options.namespaces : [options.namespaces];
+
   options.namespaces.forEach((namespace, index) => {
     options.namespaces[index].root = path.resolve(namespace.root);
+
     if (namespace.fallback) {
       options.namespaces[index].fallback = path.resolve(namespace.fallback);
     }
@@ -148,14 +160,13 @@ module.exports = (options = {}) => tree => {
 };
 /* eslint-enable complexity */
 
-// Used for reset aware props
+// Used to reset aware props
 let processCounter = 0;
 
 /**
  * @param  {Object} options Plugin options
  * @return {Object} PostHTML tree
  */
-
 function processTree(options) {
   const filledSlots = {};
 
@@ -227,15 +238,18 @@ function processTree(options) {
 
       processAttributes(currentNode, attributes, props, options, aware);
 
-      // Remove attributes when value is 'null' or 'undefined'
-      //  so we can conditionally add an attribute by setting value to 'undefined' or 'null'.
+      /**
+       * Remove attributes when value is 'null' or 'undefined' so we can
+       * conditionally add an attribute by setting the value to
+       * 'undefined' or 'null'.
+       */
       walk.call(currentNode, node => {
         if (node && node.attrs) {
-          each(node.attrs, (value, key) => {
-            if (['undefined', 'null'].includes(value)) {
+          for (const key in node.attrs) {
+            if (node.attrs[key] === 'undefined' || node.attrs[key] === 'null') {
               delete node.attrs[key];
             }
-          });
+          }
         }
 
         return node;
diff --git a/src/process-attributes.js b/src/process-attributes.js
index 1e752cd..1b46422 100644
--- a/src/process-attributes.js
+++ b/src/process-attributes.js
@@ -8,7 +8,6 @@ const keys = require('lodash/keys');
 const union = require('lodash/union');
 const pick = require('lodash/pick');
 const difference = require('lodash/difference');
-const each = require('lodash/each');
 const has = require('lodash/has');
 const extend = require('lodash/extend');
 const isString = require('lodash/isString');
@@ -52,15 +51,16 @@ module.exports = (currentNode, attributes, props, options, aware) => {
 
   // Merge or override elementAttributes from options provided
   if (!isEmpty(options.elementAttributes)) {
-    each(options.elementAttributes, (modifier, tagName) => {
+    for (const tagName in options.elementAttributes) {
+      const modifier = options.elementAttributes[tagName];
       if (typeof modifier === 'function' && isString(tagName)) {
-        tagName = tagName.toUpperCase();
-        const attributes = modifier(validAttributes.elementAttributes[tagName]);
+        const upperTagName = tagName.toUpperCase();
+        const attributes = modifier(validAttributes.elementAttributes[upperTagName]);
         if (Array.isArray(attributes)) {
-          validAttributes.elementAttributes[tagName] = attributes;
+          validAttributes.elementAttributes[upperTagName] = attributes;
         }
       }
-    });
+    }
   }
 
   // Attributes to be excluded
@@ -76,15 +76,18 @@ module.exports = (currentNode, attributes, props, options, aware) => {
   const mainNodeAttributes = pick(attributes, validElementAttributes);
 
   // Get additional specified attributes
-  each(attributes, (value, attr) => {
-    each(validAttributes.safelistAttributes, additionalAttr => {
-      if (additionalAttr === attr || (additionalAttr.endsWith('*') && attr.startsWith(additionalAttr.replace('*', '')))) {
-        mainNodeAttributes[attr] = value;
+  for (const attr in attributes) {
+    for (const additionalAttr of validAttributes.safelistAttributes) {
+      if (
+        additionalAttr === attr
+        || (additionalAttr.endsWith('*') && attr.startsWith(additionalAttr.replace('*', '')))
+      ) {
+        mainNodeAttributes[attr] = attributes[attr];
       }
-    });
-  });
+    }
+  }
 
-  each(mainNodeAttributes, (value, key) => {
+  for (const key in mainNodeAttributes) {
     if (['class', 'style'].includes(key)) {
       if (!has(nodeAttrs, key)) {
         nodeAttrs[key] = key === 'class' ? [] : {};
@@ -100,16 +103,16 @@ module.exports = (currentNode, attributes, props, options, aware) => {
     }
 
     delete attributes[key];
-  });
+  }
 
   // The plugin posthtml-attrs-parser compose() method expects a string,
   //  but since we are JSON parsing, values like "-1" become number -1.
   //  So below we convert non string values to string.
-  each(nodeAttrs, (value, key) => {
+  for (const key in nodeAttrs) {
     if (key !== 'compose' && !isObject(nodeAttrs[key]) && !isString(nodeAttrs[key])) {
       nodeAttrs[key] = nodeAttrs[key].toString();
     }
-  });
+  }
 
   mainNode.attrs = nodeAttrs.compose();
 };
diff --git a/src/process-props.js b/src/process-props.js
index 533e6aa..7d80038 100644
--- a/src/process-props.js
+++ b/src/process-props.js
@@ -1,10 +1,9 @@
 'use strict';
 
-const processScript = require('./process-script');
 const pick = require('lodash/pick');
-const each = require('lodash/each');
 const assign = require('lodash/assign');
 const mergeWith = require('lodash/mergeWith');
+const processScript = require('./process-script');
 
 const attributeTypes = ['aware', 'merge'];
 
@@ -23,31 +22,31 @@ module.exports = (currentNode, nextNode, filledSlots, options, componentPath, pr
   let attributes = {...currentNode.attrs};
 
   const attributesByTypeName = {};
-  each(attributeTypes, type => {
+  for (const type of attributeTypes) {
     attributesByTypeName[type] = [];
-  });
+  }
 
-  each(attributes, (value, key, attrs) => {
+  for (const key in attributes) {
     let newKey = key;
-    each(attributeTypes, type => {
+    for (const type of attributeTypes) {
       if (key.startsWith(`${type}:`)) {
         newKey = newKey.replace(`${type}:`, '');
         attributesByTypeName[type].push(newKey);
       }
-    });
+    }
 
     if (newKey !== key) {
-      attrs[newKey] = value;
-      delete attrs[key];
+      attributes[newKey] = attributes[key];
+      delete attributes[key];
     }
-  });
+  }
 
   // Parse JSON attributes
-  each(attributes, (value, key, attrs) => {
+  for (const key in attributes) {
     try {
-      attrs[key] = JSON.parse(value);
+      attributes[key] = JSON.parse(attributes[key]);
     } catch {}
-  });
+  }
 
   // Merge or extend attribute props
   if (attributes[options.propsAttribute]) {
@@ -65,7 +64,17 @@ module.exports = (currentNode, nextNode, filledSlots, options, componentPath, pr
   attributes = mergeWith({}, options.expressions.locals, attributes, options.mergeCustomizer);
 
   // Process props from <script props>
-  const {props} = processScript(nextNode, {props: {...attributes}, $slots: filledSlots, propsScriptAttribute: options.propsScriptAttribute, propsContext: options.propsContext, utilities: options.utilities}, componentPath.replace(`.${options.fileExtension}`, '.js'));
+  const {props} = processScript(
+    nextNode,
+    {
+      props: {...attributes},
+      $slots: filledSlots,
+      propsScriptAttribute: options.propsScriptAttribute,
+      propsContext: options.propsContext,
+      utilities: options.utilities
+    },
+    componentPath.replace(`.${options.fileExtension}`, '.js')
+  );
 
   if (props) {
     assign(attributes, props);
diff --git a/src/process-slots.js b/src/process-slots.js
index b85a50b..c294b00 100644
--- a/src/process-slots.js
+++ b/src/process-slots.js
@@ -2,7 +2,6 @@
 
 const {match} = require('posthtml/lib/api');
 const {render} = require('posthtml-render');
-const each = require('lodash/each');
 const omit = require('lodash/omit');
 
 /**
@@ -25,11 +24,13 @@ function setFilledSlots(currentNode, filledSlots, {fill, slotSeparator, propsSlo
     const props = omit(fillNode.attrs, ['append', 'prepend', 'aware']);
 
     if (props) {
-      each(props, (value, key, attrs) => {
-        try {
-          attrs[key] = JSON.parse(value);
-        } catch {}
-      });
+      for (const key in props) {
+        if (props.hasOwnProperty(key)) {
+          try {
+        props[key] = JSON.parse(props[key]);
+          } catch {}
+        }
+      }
     }
 
     filledSlots[name] = {
diff --git a/test/process.js b/test/process.js
new file mode 100644
index 0000000..25fada8
--- /dev/null
+++ b/test/process.js
@@ -0,0 +1,9 @@
+import posthtml from 'posthtml';
+import plugin from '../src/index.js';
+
+const clean = html => html.replace(/(\n|\t)/g, '').trim();
+
+export async function process(html, options) {
+  const posthtmlOptions = options.parserOptions || {};
+  return await posthtml([plugin(options)]).process(html, posthtmlOptions).then(result => clean(result.html));
+}
diff --git a/test/templates/layouts/md-layout.md b/test/templates/layouts/md-layout.md
new file mode 100644
index 0000000..1d9407b
--- /dev/null
+++ b/test/templates/layouts/md-layout.md
@@ -0,0 +1 @@
+<yield></yield>
diff --git a/test/test-attributes.js b/test/test-attributes.js
index 5f30da8..fee99f5 100644
--- a/test/test-attributes.js
+++ b/test/test-attributes.js
@@ -1,115 +1,162 @@
-import { test, expect } from 'vitest'
+import { test, expect } from 'vitest';
+import { process } from './process.js';
+
 import plugin from '../src/index.js';
 import posthtml from 'posthtml';
 import pull from 'lodash/pull';
 
 const clean = html => html.replace(/(\n|\t)/g, '').trim();
 
-test('Must merge and map attributes not props to first node', async () => {
+test('Maps and merges attributes (not props) to first node', async () => {
   const actual = `<component src="components/component-mapped-attributes.html" data-something="Test an attribute" title="My Title" class="bg-light p-2" style="display: flex; font-size: 20px"></component>`;
   const expected = `<div class="text-dark m-3 bg-light p-2" style="background: red; display: flex; font-size: 20px" data-something="Test an attribute">My Title Default body</div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must merge and map attributes not props to node with attribute "attributes" without style', async () => {
+test('Maps and merges attributes (not props) to node with attribute `attributes` without style', async () => {
   const actual = `<component src="components/component-mapped-attributes2.html" title="My Title" class="bg-light p-2" style="display: flex; font-size: 20px"></component>`;
   const expected = `<div class="mapped"><div class="text-dark m-3 bg-light p-2" style="display: flex; font-size: 20px">My Title Default body</div></div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must merge and map attributes not props to node with attribute "attributes" without class', async () => {
+test('Maps and merges attributes (not props) to node with attribute `attributes` without class', async () => {
   const actual = `<component src="components/component-mapped-attributes3.html" title="My Title" class="bg-light p-2" style="display: block; font-size: 20px"></component>`;
   const expected = `<div class="mapped"><div style="border: 1px solid black; display: block; font-size: 20px" class="bg-light p-2">My Title Default body</div></div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must not map attributes for component without any elements', async () => {
+test('Does not map attributes for components that have no elements', async () => {
   const actual = `<div><component src="components/component-without-elements.html" title="My Title" class="bg-light p-2" style="display: flex; font-size: 20px"></component></div>`;
   const expected = `<div>I am a component without any elements. Yeah, something uncommon but just for testing. My Title</div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must override class and style attributes', async () => {
+test('Overrides class and style attributes', async () => {
   const actual = `<component src="components/component-mapped-attributes.html" override:class="override-class" override:style="background: black"></component>`;
   const expected = `<div class="override-class" style="background: black">Default title Default body</div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must remove an attributes that has "undefined" or "null" value', async () => {
+test('Removes attributes containing `undefined` or `null` values', async () => {
   const actual = `<component src="components/remove-attributes.html" tabindex="-1">My button</component>`;
   const expected = `<button class="btn btn-primary" data-bs-dismiss="true" data-bs-backdrop="false" tabindex="-1">My button</button><div>works also in all nodes</div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must override valid attributes', async () => {
+test('Overrides known attributes', async () => {
   const actual = `<component src="components/override-attributes.html" tabindex="-1" title="My button" custom-attribute="A custom attribute">My button</component>`;
   const expected = `<button tabindex="-1" custom-attribute="A custom attribute">My button</button>`;
 
-  const html = await posthtml([plugin({
-    root: './test/templates',
-    tag: 'component',
-    elementAttributes: {
-      BUTTON: attrs => {
-        // Remove title
-        pull(attrs, 'title');
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component',
+      elementAttributes: {
+        BUTTON: attrs => {
+          // Remove title
+          pull(attrs, 'title');
 
-        // Add custom-attribute
-        attrs.push('custom-attribute');
+          // Add custom-attribute
+          attrs.push('custom-attribute');
 
-        return attrs;
+          return attrs;
+        }
       }
     }
-  })]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must work with tag without attributes', async () => {
+test('Works with tags that have no attributes', async () => {
   const actual = `<component src="components/override-attributes.html" tabindex="-1" title="My button" custom-attribute="A custom attribute">My button</component>`;
   const expected = `<button>My button</button>`;
 
-  const html = await posthtml([plugin({
-    root: './test/templates',
-    tag: 'component',
-    elementAttributes: {
-      BUTTON: _ => {
-        // Return empty array means no attributes
-        return [];
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component',
+      elementAttributes: {
+        BUTTON: _ => {
+          // Return empty array means no attributes
+          return [];
+        }
       }
     }
-  })]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must use safelist and blocklist', async () => {
+test('Uses `safelist` and `blocklist`', async () => {
   const actual = `<component src="components/override-attributes.html" tabindex="-1" title="My button" custom-attribute="A custom attribute">My button</component>`;
   const expected = `<button custom-attribute="A custom attribute">My button</button>`;
 
-  const html = await posthtml([plugin({
-    root: './test/templates',
-    tag: 'component',
-    safelistAttributes: ['custom-attribute'],
-    blocklistAttributes: ['role', 'tabindex']
-  })]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component',
+      safelistAttributes: ['custom-attribute'],
+      blocklistAttributes: ['role', 'tabindex'],
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
diff --git a/test/test-errors.js b/test/test-errors.js
index b057929..9330ff8 100644
--- a/test/test-errors.js
+++ b/test/test-errors.js
@@ -1,84 +1,100 @@
-import { test, expect } from 'vitest'
-import plugin from '../src/index.js';
-import posthtml from 'posthtml';
-
-const clean = html => html.replace(/(\n|\t)/g, '').trim();
-
-test('Must fail when namespace is unknown', async () => {
-  const actual = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
-
-  await expect(() => posthtml([plugin({ root: './test/templates', strict: true })]).process(actual).then(result => clean(result.html)))
-    .rejects.toThrow()
+import { test, expect } from 'vitest';
+import { process } from './process.js';
+
+test('Throws if namespace is unknown', async () => {
+  await expect(() => process(
+    `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`,
+    { root: './test/templates', strict: true }
+  )).rejects.toThrow();
 });
 
-test('Must return node as-is when namespace is unknown with strict mode disabled', async () => {
-  const actual = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
-  const expected = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
-
-  const html = await posthtml([plugin({root: './test/templates', strict: false})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Throws when push tag missing name attribute', async () => {
+  await expect(() => process(
+    `<div><push></push></div>`,
+    {
+      root: './test/templates',
+      strict: true
+    }
+  )).rejects.toThrow();
 });
 
-test('Must return node as-is when namespace is empty with strict mode disabled', async () => {
-  const actual = `<div><x-empty-namespace::button>Submit</x-empty-namespace::button></div>`;
-  const expected = `<div><x-empty-namespace::button>Submit</x-empty-namespace::button></div>`;
-
-  const html = await posthtml([plugin({root: './test/templates', strict: false, namespaces: {name: 'empty-namespace', root: './test/templates/empty-namespace'}})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Throws when push tag missing name attribute value', async () => {
+  await expect(() => process(
+    `<div><push name></push></div>`,
+    { root: './test/templates', strict: true }
+  )).rejects.toThrow();
 });
 
-test('Must return node as-is when x-tag is not found with strict mode disabled', async () => {
-  const actual = `<div><x-button>Submit</x-button></div>`;
-  const expected = `<div><x-button>Submit</x-button></div>`;
-
-  const html = await posthtml([plugin({root: './test/templates/empty-root', strict: false})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Throws when component is not found (strict mode enabled)', async () => {
+  await expect(() => process(
+    `<div><component src="not-found.html">Submit</component></div>`,
+    {
+      root: './test/templates/empty-root',
+      tag: 'component',
+      strict: true,
+    }
+  )).rejects.toThrow();
 });
 
-test('Must return node as-is when component is not found with strict mode disabled', async () => {
-  const actual = `<div><component src="not-found.html">Submit</component></div>`;
-  const expected = `<div><component src="not-found.html">Submit</component></div>`;
-
-  const html = await posthtml([plugin({tag: 'component', strict: false})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Throws when component is not found in namespace (strict mode enabled)', async () => {
+  await expect(() => process(
+    `<div><x-empty-namespace::button>Submit</x-empty-namespace::button></div>`,
+    {
+      root: './test/templates',
+      strict: true,
+      namespaces: [
+        {
+          name: 'empty-namespace',
+          root: './test/templates/empty-namespace',
+        }
+      ]
+    }
+  )).rejects.toThrow();
 });
 
-test('Must fail when component is not found with strict mode enabled', async () => {
-  const actual = `<div><component src="not-found.html">Submit</component></div>`;
+test('Returns node as-is when namespace is unknown (strict mode disabled)', async () => {
+  const actual = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
 
-  await expect(() => posthtml([plugin({ root: './test/templates/empty-root', tag: 'component', strict: true })]).process(actual).then(result => clean(result.html)))
-    .rejects.toThrow()
+  process(actual, { root: './test/templates', strict: false })
+    .then(html => {
+      expect(html).toBe(actual);
+    });
 });
 
-test('Must fail when component is not found in defined namespace with strict mode enabled', async () => {
+test('Returns node as-is when namespace is empty (strict mode disabled)', async () => {
   const actual = `<div><x-empty-namespace::button>Submit</x-empty-namespace::button></div>`;
 
-  await expect(() => posthtml([
-    plugin({root: './test/templates', strict: true, namespaces: [{name: 'empty-namespace', root: './test/templates/empty-namespace'}]})
-  ])
-    .process(actual)
-    .then(result => clean(result.html))
-  ).rejects.toThrow()
+  process(actual,
+    {
+      root: './test/templates',
+      strict: false,
+      namespaces: [
+        {
+          name: 'empty-namespace',
+          root: './test/templates/empty-namespace',
+        }
+      ]
+    }
+  )
+    .then(html => {
+      expect(html).toBe(actual);
+    });
 });
 
-test('Must fail when push tag missing name attribute', async () => {
-  const actual = `<div><push></push></div>`;
+test('Returns node as-is when x-tag is not found (strict mode disabled)', async () => {
+  const actual = `<div><x-button>Submit</x-button></div>`;
 
-  await expect(() => posthtml([
-    plugin({root: './test/templates', strict: true})
-  ])
-    .process(actual)
-    .then(result => clean(result.html))
-  ).rejects.toThrow();
+  process(actual, { root: './test/templates/empty-root', strict: false })
+    .then(html => {
+      expect(html).toBe(actual);
+    });
 });
 
-test('Must fail when push tag missing name attribute value', async () => {
-  const actual = `<div><push name></push></div>`;
+test('Returns node as-is when component is not found (strict mode disabled)', async () => {
+  const actual = `<div><component src="not-found.html">Submit</component></div>`;
 
-  await expect(async () => posthtml([plugin({root: './test/templates', strict: true})]).process(actual).then(result => clean(result.html)))
-    .rejects.toThrow();
+  process(actual, { tag: 'component', strict: false })
+    .then(html => {
+      expect(html).toBe(actual);
+    });
 });
diff --git a/test/test-locals.js b/test/test-locals.js
index e43a14b..cc64973 100644
--- a/test/test-locals.js
+++ b/test/test-locals.js
@@ -1,28 +1,33 @@
-import { test, expect } from 'vitest'
-import plugin from '../src/index.js';
-import posthtml from 'posthtml';
-
-const clean = html => html.replace(/(\n|\t)/g, '').trim();
-
-test('Must process layout with props', async () => {
-  const actual = `<component src="layouts/base-locals.html" props='{ "title": "My Page" }'><div>Content</div><fill:footer>Footer</fill:footer></component>`;
-  const expected = `<html><head><title>My Page</title></head><body><main><div>Content</div></main><footer>Footer</footer></body></html>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+import { test, expect } from 'vitest';
+import { process } from './process.js';
+
+test('Works with props', async () => {
+  process(
+    `<component src="layouts/base-locals.html" props='{ "title": "My Page" }'><div>Content</div><fill:footer>Footer</fill:footer></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<html><head><title>My Page</title></head><body><main><div>Content</div></main><footer>Footer</footer></body></html>`);
+    });
 });
 
-test('Must process attributes as props', async () => {
-  const actual = `<component src="components/component-locals.html" title="My Component Title" body="Content"><fill:body prepend><span>Body</span></fill:body></component>`;
-  const expected = `<div><h1>My Component Title</h1></div><div><span>Body</span>Content</div>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Attributes as props', async () => {
+  process(
+    `<component src="components/component-locals.html" title="My Component Title" body="Content"><fill:body prepend><span>Body</span></fill:body></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<div><h1>My Component Title</h1></div><div><span>Body</span>Content</div>`);
+    });
 });
 
-test('Must process component with props as JSON and string', async () => {
+test('JSON and string props', async () => {
   const actual = `<component src="components/component-locals-json-and-string.html"
                     titles='{ "suptitle": "This is custom suptitle" }'
                     title="Custom title from JSON and String"
@@ -31,39 +36,60 @@ test('Must process component with props as JSON and string', async () => {
                     merge:props='{ "items": ["first item", "second item"] }'></component>`;
   const expected = `<div><div>myboolean is true</div><div><h1>Custom title from JSON and String</h1></div><div><span>another item</span><span>yet another</span><span>first item</span><span>second item</span></div><div><span>title: This is default main title</span><span>subtitle: This is default subtitle</span><span>suptitle: This is custom suptitle</span></div></div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must process parent and child props via component', async () => {
+test('Parses parent and child props via component', async () => {
   const actual = `<x-parent aString="I am custom aString for PARENT via component (1)"><x-child></x-child></x-parent>`;
   const expected = `PARENT:<div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>CHILD:<div>  aBoolean  value: true  type: boolean  aString  value: My String Child  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>`;
 
-  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates/components'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must has access to $slots in script props', async () => {
+test('$slots is available in script `props`', async () => {
   const actual = `<x-script-locals><fill:filled>filled slot content...</fill:filled></x-script-locals>`;
   const expected = `{"filled":{"filled":true,"rendered":false,"tag":"fill:filled","attrs":{},"content":["filled slot content..."],"source":"filled slot content...","props":{}}}<div>{"filled":{"filled":true,"rendered":false,"tag":"fill:filled","attrs":{},"content":["filled slot content..."],"source":"filled slot content...","props":{}}}</div><div><h1>Default title</h1></div><div>filled slot content...</div>`;
 
-  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates/components'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must pass props from parent to child via aware', async () => {
+test('Passes props from parent to child via `aware`', async () => {
   const actual = `<x-parent aware:aString="I am custom aString for PARENT via component (1)"><x-child></x-child></x-parent>`;
   const expected = `PARENT:<div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>CHILD:<div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>`;
 
-  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates/components'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must process default, merged and override props', async () => {
+test('Works default, merged and overridden props', async () => {
   const actual = `<component src="components/component-locals-type.html"
     aStringOverride="My override string changed"
     anObjectOverride='{ "third": "Third override item", "fourth": "Fourth override item" }'
@@ -71,55 +97,90 @@ test('Must process default, merged and override props', async () => {
 
   const expected = `<div>  <h1>anObjectDefault</h1>      <p><strong>first</strong>: First default item</p>      <p><strong>second</strong>: Second default item</p>    <h1>anObjectOverride</h1>      <p><strong>third</strong>: Third override item</p>      <p><strong>fourth</strong>: Fourth override item</p>    <h1>anObjectMerged</h1>      <p><strong>first</strong>: First merged item</p>      <p><strong>second</strong>: Second merged item</p>      <p><strong>third</strong>: Third merged item</p>      <p><strong>fourth</strong>: Fourth merged item</p>    <h1>aStringDefault</h1>  <p>My default string</p>  <h1>aStringOverride</h1>  <p>My override string changed</p></div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must process slot with props', async () => {
-  const actual = `<component src="components/slot-with-locals.html"><fill:name mySlotLocal=" Via Slot" prepend>My Local</fill:name></component>`;
-  const expected = `<div>My Local Via Slot</div>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Slot with props', async () => {
+  process(
+    `<component src="components/slot-with-locals.html"><fill:name mySlotLocal=" Via Slot" prepend>My Local</fill:name></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<div>My Local Via Slot</div>`);
+    });
 });
 
-test('Must process props with custom options', async () => {
+test('Customized `props` options', async () => {
   const actual = `<component src="components/custom-props-options.html" title="My Component Title" body="Content" locals='{ "prop": "My prop via locals attribute" }'><fill:body slotProp="My slot prop" prepend><span>Body</span></fill:body></component>`;
   const expected = `<div><h1>My Component Title</h1></div><div><span>Body</span>Content-My slot prop</div><div>My prop via locals attribute</div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component', propsScriptAttribute: 'locals', propsContext: 'locals', propsAttribute: 'locals', propsSlot: 'locals'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component',
+      propsScriptAttribute: 'locals',
+      propsContext: 'locals',
+      propsAttribute: 'locals',
+      propsSlot: 'locals'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must process components with script file', async () => {
+test('Components with script file', async () => {
   const actual = `<component src="components/component-script-file.html" myStringProp="My custom string prop" myObjectProp='{ "one": "New one value", "three": "New third value" }'></component>`;
   const expected = `<div>A default string</div><div>My custom string prop</div><div>{"one":"New one value","three":"New third value"}</div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
 
-test('Must process components with invalid script file', async () => {
-  const actual = `<component src="components/invalid-script-file.html"></component>`;
-  const expected = `<div>Component content (undefined)</div>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Components with invalid script file', async () => {
+  process(
+    `<component src="components/invalid-script-file.html"></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<div>Component content (undefined)</div>`);
+    });
 });
 
-test('Must reset not nested aware props that it', async () => {
+test('Should reset non-nested aware props', async () => {
   const actual = `
 <x-parent-aware aware:myprop="I am aware prop"><x-child-aware></x-child-aware><x-child-aware></x-child-aware></x-parent-aware>
 <x-parent-aware><x-child-aware></x-child-aware></x-parent-aware>
 `;
   const expected = `<div><div>I am aware prop</div><div>I am aware prop</div></div><div><div>Default prop</div></div>`;
 
-  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+  process(actual,
+    {
+      root: './test/templates/components'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(expected);
+    });
 });
diff --git a/test/test-nested.js b/test/test-nested.js
index f3e0c81..ae6d76d 100644
--- a/test/test-nested.js
+++ b/test/test-nested.js
@@ -1,23 +1,22 @@
-import { test, expect } from 'vitest'
-import plugin from '../src/index.js';
-import posthtml from 'posthtml';
+import { test, expect } from 'vitest';
+import { process } from './process.js';
 
-const clean = html => html.replace(/(\n|\t)/g, '').trim();
-
-test('Must process all nested component to html', async () => {
-  const actual = `<div><x-nested-one></x-nested-one></div>`;
-  const expected = `<div><div class="nested-one"><div class="nested-two"><div class="nested-three">Nested works!</div></div></div></div>`;
-
-  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Nested components', async () => {
+  process(
+    `<div><x-nested-one></x-nested-one></div>`,
+    { root: './test/templates/components' }
+  ).then(html => {
+    expect(html).toBe(`<div><div class="nested-one"><div class="nested-two"><div class="nested-three">Nested works!</div></div></div></div>`);
+  });
 });
 
-test('Must process all nested component with slots to html', async () => {
-  const actual = `<x-nested-one-slot><x-nested-two-slot>yield content<fill:before2>nested-two before</fill:before2><fill:after2>nested-two after</fill:after2></x-nested-two-slot><fill:before>nested-one before</fill:before><fill:after>nested-one after</fill:after></x-nested-one-slot>`;
-  const expected = `<div class="nested-one"><div class="nested-one-before">nested-one before</div><div class="nested-one-yield"><div class="nested-two"><div class="nested-two-before">nested-two before</div><div class="nested-two-yield">yield content</div><div class="nested-two-after">nested-two after</div></div></div><div class="nested-one-after">nested-one after</div></div>`;
-
-  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Nested component with slots', async () => {
+  process(
+    `<x-nested-one-slot><x-nested-two-slot>yield content<fill:before2>nested-two before</fill:before2><fill:after2>nested-two after</fill:after2></x-nested-two-slot><fill:before>nested-one before</fill:before><fill:after>nested-one after</fill:after></x-nested-one-slot>`,
+    {
+      root: './test/templates/components',
+    }
+  ).then(html => {
+    expect(html).toBe(`<div class="nested-one"><div class="nested-one-before">nested-one before</div><div class="nested-one-yield"><div class="nested-two"><div class="nested-two-before">nested-two before</div><div class="nested-two-yield">yield content</div><div class="nested-two-after">nested-two after</div></div></div><div class="nested-one-after">nested-one after</div></div>`);
+  });
 });
diff --git a/test/test-options.js b/test/test-options.js
new file mode 100644
index 0000000..4b34cf2
--- /dev/null
+++ b/test/test-options.js
@@ -0,0 +1,26 @@
+import { test, expect } from 'vitest';
+import { process } from './process.js';
+
+test('`fileExtension` as string', async () => {
+  process(
+    `<x-md-layout>test</x-md-layout>`,
+    {
+      root: './test/templates',
+      folders: ['layouts'],
+      fileExtension: 'md'
+    }).then(html => {
+    expect(html).toBe('test');
+  })
+});
+
+test('`fileExtension` as array', async () => {
+  process(
+    `<x-md-layout>test</x-md-layout>`,
+    {
+      root: './test/templates',
+      folders: ['layouts'],
+      fileExtension: ['html', 'md']
+    }).then(html => {
+    expect(html).toBe('test');
+  })
+});
diff --git a/test/test-plugins.js b/test/test-plugins.js
index 82cb390..4f6a98f 100644
--- a/test/test-plugins.js
+++ b/test/test-plugins.js
@@ -1,64 +1,60 @@
-import { test, expect } from 'vitest'
-import plugin from '../src/index.js';
-import posthtml from 'posthtml';
+import { test, expect } from 'vitest';
+import { process } from './process.js';
 
-const clean = html => html.replace(/(\n|\t)/g, '').trim();
-
-test.skip('Must work with posthtml-extend syntax', async () => {
-  const actual = `<extends src="layouts/extend.html"><block name="content">My Content</block></extends>`;
-  const expected = `<html><head><title>Extend Layout</title></head><body><main>My Content</main><footer>footer content</footer></body></html>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tagName: 'extends', attribute: 'src', slotTagName: 'block', fillTagName: 'block'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('posthtml-include', async () => {
+  process(
+    `<component src="components/component-with-include.html"></component>`,
+    {
+      root: './test/templates',
+      tag: 'component',
+      attribute: 'src',
+      plugins: [
+        require('posthtml-include')({
+          root: './test/templates',
+          cwd: './test/templates',
+          encoding: 'utf8'
+        })
+      ]
+    }
+  )
+    .then(html => {
+      expect(html).toBe('<div><p>Included file</p></div>');
+    });
 });
 
-test.skip('Must work with posthtml-modules syntax', async () => {
-  const actual = `<module href="components/module.html">My Module Content</module>`;
-  const expected = `<div>My Module Content</div>`;
+// test.skip('Must work with posthtml-extend syntax', async () => {
+//   const actual = `<extends src="layouts/extend.html"><block name="content">My Content</block></extends>`;
+//   const expected = `<html><head><title>Extend Layout</title></head><body><main>My Content</main><footer>footer content</footer></body></html>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tagName: 'module', attribute: 'href', slotTagName: 'content'})]).process(actual).then(result => clean(result.html));
+//   const html = await posthtml([plugin({root: './test/templates', tag: 'extends', attribute: 'src', slot: 'block', fill: 'block'})]).process(actual).then(result => clean(result.html));
 
-  expect(html).toBe(expected);
-});
+//   expect(html).toBe(expected);
+// });
 
-test.skip('Must work with posthtml-extend and posthtml-modules syntax together', async () => {
-  const actual = `<extends src="layouts/extend-with-module.html"><block name="content"><module href="components/module-with-extend.html">My Module Content</module></block></extends>`;
-  const expected = `<html><head><title>Extend With Module Layout</title></head><body><main><div>My Module Content</div></main><footer>footer content</footer></body></html>`;
+// test.skip('Must work with posthtml-modules syntax', async () => {
+//   const actual = `<module href="components/module.html">My Module Content</module>`;
+//   const expected = `<div>My Module Content</div>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tagNames: ['extends', 'module'], attributes: ['src', 'href'], slotTagName: 'block', fillTagName: 'block', fallbackSlotTagName: true})]).process(actual).then(result => clean(result.html));
+//   const html = await posthtml([plugin({root: './test/templates', tagName: 'module', attribute: 'href', slotTagName: 'content'})]).process(actual).then(result => clean(result.html));
 
-  expect(html).toBe(expected);
-});
+//   expect(html).toBe(expected);
+// });
 
-// Unfortunately it's not working
-test.skip('Must include file using posthtml-modules', async () => {
-  const actual = `<component src="components/component-with-module.html"></component>`;
-  const expected = `<div><p>Module file</p></div>`;
+// test.skip('Must work with posthtml-extend and posthtml-modules syntax together', async () => {
+//   const actual = `<extends src="layouts/extend-with-module.html"><block name="content"><module href="components/module-with-extend.html">My Module Content</module></block></extends>`;
+//   const expected = `<html><head><title>Extend With Module Layout</title></head><body><main><div>My Module Content</div></main><footer>footer content</footer></body></html>`;
 
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component', attribute: 'src', plugins: [require('posthtml-modules')({root: './test/templates'})]})]).process(actual).then(result => clean(result.html));
+//   const html = await posthtml([plugin({root: './test/templates', tagNames: ['extends', 'module'], attributes: ['src', 'href'], slotTagName: 'block', fillTagName: 'block', fallbackSlotTagName: true})]).process(actual).then(result => clean(result.html));
 
-  expect(html).toBe(expected);
-});
+//   expect(html).toBe(expected);
+// });
 
-test('Must include file using posthtml-include', async () => {
-  const actual = `<component src="components/component-with-include.html"></component>`;
-  const expected = `<div><p>Included file</p></div>`;
+// // Unfortunately it's not working
+// test.skip('Must include file using posthtml-modules', async () => {
+//   const actual = `<component src="components/component-with-module.html"></component>`;
+//   const expected = `<div><p>Module file</p></div>`;
 
-  const html = await posthtml([
-    plugin({
-      root: './test/templates',
-      tag: 'component',
-      attribute: 'src',
-      plugins: [
-        require('posthtml-include')({
-          root: './test/templates',
-          cwd: './test/templates',
-          encoding: 'utf8'
-        })
-      ]
-    })
-  ]).process(actual).then(result => clean(result.html));
+//   const html = await posthtml([plugin({root: './test/templates', tag: 'component', attribute: 'src', plugins: [require('posthtml-modules')({root: './test/templates'})]})]).process(actual).then(result => clean(result.html));
 
-  expect(html).toBe(expected);
-});
+//   expect(html).toBe(expected);
+// });
diff --git a/test/test-slots.js b/test/test-slots.js
index a9e4c21..e81ce44 100644
--- a/test/test-slots.js
+++ b/test/test-slots.js
@@ -1,93 +1,135 @@
-import { test, expect } from 'vitest'
-import plugin from '../src/index.js';
-import posthtml from 'posthtml';
-
-const clean = html => html.replace(/(\n|\t)/g, '').trim();
-
-test('Must process with slots', async () => {
-  const actual = `<component src="layouts/base.html"><div>Main content</div><fill:header><h1>My header</h1></fill:header><fill:footer>My footer</fill:footer></component>`;
-  const expected = `<html><head><title>Base Layout</title></head><body><header><h1>My header</h1></header><main><div>Main content</div></main><footer>My footer</footer></body></html>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+import { test, expect } from 'vitest';
+import { process } from './process.js';
+
+test('Slots', async () => {
+  process(
+    `<component src="layouts/base.html"><div>Main content</div><fill:header><h1>My header</h1></fill:header><fill:footer>My footer</fill:footer></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'}
+    )
+    .then(html => {
+      expect(html).toBe(`<html><head><title>Base Layout</title></head><body><header><h1>My header</h1></header><main><div>Main content</div></main><footer>My footer</footer></body></html>`);
+    });
 });
 
-test('Must output default yield content when not provided', async () => {
-  const actual = `<component src="components/component-default-yield.html"></component>`;
-  const expected = `<div>Default yield</div>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Outputs default `yield` content when not provided', async () => {
+  process(
+    `<component src="components/component-default-yield.html"></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<div>Default yield</div>`);
+    });
 });
 
-test('Must process the same component multiple times', async () => {
-  const actual = `<component src="components/component.html"><fill:title>Title</fill:title><fill:body>Body</fill:body></component><component src="components/component.html"><fill:title>Title 2</fill:title><fill:body>Body 2</fill:body></component>`;
-  const expected = `<div>Title</div><div>Body</div><div>Title 2</div><div>Body 2</div>`;
-
-  const html = await posthtml([plugin({root: './test/templates/', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Processes the same component multiple times', async () => {
+  process(
+    `<component src="components/component.html"><fill:title>Title</fill:title><fill:body>Body</fill:body></component><component src="components/component.html"><fill:title>Title 2</fill:title><fill:body>Body 2</fill:body></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<div>Title</div><div>Body</div><div>Title 2</div><div>Body 2</div>`);
+    });
 });
 
-test('Must process multiple time a slot with aware attribute', async () => {
-  // With aware
-  let actual = `<component src="components/component-multiple-slot.html"><fill:title aware>Title</fill:title><fill:body>Body</fill:body></component>`;
-  let expected = `<div>Title</div><div>Body</div><div>Title</div>`;
-
-  let html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
-
-  // Without aware
-  actual = `<component src="components/component-multiple-slot.html"><fill:title>Title</fill:title><fill:body>Body</fill:body></component>`;
-  expected = `<div>Title</div><div>Body</div><div></div>`;
-
-  html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Multiple slots with `aware`', async () => {
+  // With `aware`
+  process(
+    `<component src="components/component-multiple-slot.html"><fill:title aware>Title</fill:title><fill:body>Body</fill:body></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<div>Title</div><div>Body</div><div>Title</div>`);
+    });
+
+  // Without `aware`
+  process(
+    `<component src="components/component-multiple-slot.html"><fill:title>Title</fill:title><fill:body>Body</fill:body></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<div>Title</div><div>Body</div><div></div>`);
+    });
 });
 
-test('Must process append and prepend content to slot', async () => {
-  const actual = `<component src="components/component-append-prepend.html"><fill:title append><span>Append</span></fill:title><fill:body prepend><span>Prepend</span></fill:body></component>`;
-  const expected = `<div>Title<span>Append</span></div><div><span>Prepend</span>Body</div>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Slots with `append` and `prepend` attributes', async () => {
+  process(
+    `<component src="components/component-append-prepend.html"><fill:title append><span>Append</span></fill:title><fill:body prepend><span>Prepend</span></fill:body></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<div>Title<span>Append</span></div><div><span>Prepend</span>Body</div>`);
+    });
 });
 
-test('Must process slots conditional rendering by using slot name', async () => {
-  let actual = `<component src="layouts/slot-condition.html"><h1>Content</h1></component>`;
-  let expected = `<html><head><title>Slot Condition Layout</title></head><body><main><h1>Content</h1></main><p>There is not footer defined.</p></body></html>`;
-
-  let html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
-
-  actual = `<component src="layouts/slot-condition.html"><h1>Content</h1><fill:footer>There is now footer defined</fill:footer></component>`;
-  expected = `<html><head><title>Slot Condition Layout</title></head><body><main><h1>Content</h1></main><footer>There is now footer defined</footer></body></html>`;
-
-  html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Conditional rendering of slots based on slot name', async () => {
+  process(
+    `<component src="layouts/slot-condition.html"><h1>Content</h1></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<html><head><title>Slot Condition Layout</title></head><body><main><h1>Content</h1></main><p>There is not footer defined.</p></body></html>`);
+    });
+
+  process(
+    `<component src="layouts/slot-condition.html"><h1>Content</h1><fill:footer>There is now footer defined</fill:footer></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<html><head><title>Slot Condition Layout</title></head><body><main><h1>Content</h1></main><footer>There is now footer defined</footer></body></html>`);
+    });
 });
 
-test('Must render slots using $slots props', async () => {
-  const actual = `<component src="layouts/base-render-slots-locals.html"><div>Main content</div><fill:header><h1>My header</h1></fill:header><fill:footer>My footer</fill:footer></component>`;
-  const expected = `<html><head><title>Base Render Slots Locals Layout</title></head><body><header><h1>My header</h1></header><main><div>Main content</div></main><footer>My footer</footer></body></html>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Render slots using `$slots` props', async () => {
+  process(
+    `<component src="layouts/base-render-slots-locals.html"><div>Main content</div><fill:header><h1>My header</h1></fill:header><fill:footer>My footer</fill:footer></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<html><head><title>Base Render Slots Locals Layout</title></head><body><header><h1>My header</h1></header><main><div>Main content</div></main><footer>My footer</footer></body></html>`);
+    });
 });
 
-test('Must merge global props passed via expressions.locals', async () => {
-  const actual = `<component src="layouts/global-locals.html" anArray='["third", "fourth"]'><div>Main content</div></component>`;
-  const expected = `<html><head><title>My page title</title></head><body><main><div>Main content</div></main><span>first</span><span>second</span><span>third</span><span>fourth</span></body></html>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component', expressions: {locals: {title: 'My page title', anArray: ['first', 'second']}}})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('Merges global props passed via `expressions.locals`', async () => {
+  process(
+    `<component src="layouts/global-locals.html" anArray='["third", "fourth"]'><div>Main content</div></component>`,
+    {
+      root: './test/templates',
+      tag: 'component',
+      expressions: {
+        locals: {
+          title: 'My page title',
+          anArray: ['first', 'second']
+        }
+      }
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<html><head><title>My page title</title></head><body><main><div>Main content</div></main><span>first</span><span>second</span><span>third</span><span>fourth</span></body></html>`);
+    });
 });
diff --git a/test/test-stacks.js b/test/test-stacks.js
index 92c083b..5f964d1 100644
--- a/test/test-stacks.js
+++ b/test/test-stacks.js
@@ -1,23 +1,28 @@
-import { test, expect } from 'vitest'
-import plugin from '../src/index.js';
-import posthtml from 'posthtml';
+import { test, expect } from 'vitest';
+import { process } from './process.js';
 
-const clean = html => html.replace(/(\n|\t)/g, '').trim();
-
-test('Must process stacks and push', async () => {
-  const actual = `<component src="layouts/base.html"><div>Main content</div><push name="head"><meta name="pushed" content="Content pushed"></push></component>`;
-  const expected = `<html><head><title>Base Layout</title><meta name="pushed" content="Content pushed"></head><body><header></header><main><div>Main content</div></main><footer>footer content</footer></body></html>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('`stack` and `push` tags', async () => {
+  process(
+    `<component src="layouts/base.html"><div>Main content</div><push name="head"><meta name="pushed" content="Content pushed"></push></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<html><head><title>Base Layout</title><meta name="pushed" content="Content pushed"></head><body><header></header><main><div>Main content</div></main><footer>footer content</footer></body></html>`);
+    });
 });
 
-test('Must prepend push on stack once', async () => {
-  const actual = `<component src="layouts/base.html"><div>Main content</div><push name="head" prepend once><meta name="pushed" content="Content pushed"></push><push name="head" prepend once><meta name="pushed" content="Content pushed"></push></component>`;
-  const expected = `<html><head><title>Base Layout</title><meta name="pushed" content="Content pushed"></head><body><header></header><main><div>Main content</div></main><footer>footer content</footer></body></html>`;
-
-  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('`prepend` and `once` attributes on `push` tag', async () => {
+  process(
+    `<component src="layouts/base.html"><div>Main content</div><push name="head" prepend once><meta name="pushed" content="Content pushed"></push><push name="head" prepend once><meta name="pushed" content="Content pushed"></push></component>`,
+    {
+      root: './test/templates',
+      tag: 'component'
+    }
+  )
+    .then(html => {
+      expect(html).toBe(`<html><head><title>Base Layout</title><meta name="pushed" content="Content pushed"></head><body><header></header><main><div>Main content</div></main><footer>footer content</footer></body></html>`);
+    });
 });
diff --git a/test/test-x-tag.js b/test/test-x-tag.js
index 5ee62b9..e6afb46 100644
--- a/test/test-x-tag.js
+++ b/test/test-x-tag.js
@@ -1,78 +1,125 @@
-import { test, expect } from 'vitest'
-import plugin from '../src/index.js';
-import posthtml from 'posthtml';
-
-const clean = html => html.replace(/(\n|\t)/g, '').trim();
-
-test('Must process component with x-tag', async () => {
-  const actual = `<x-modal></x-modal>`;
-  const expected = `<div>Modal</div>`;
-
-  const html = await posthtml([plugin({root: './test/templates', folders: 'components'})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+import { test, expect } from 'vitest';
+import { process } from './process.js';
+
+test('x-tag', async () => {
+  process('<x-modal></x-modal>', {root: './test/templates', folders: 'components'})
+  .then(html => {
+    expect(html).toBe('<div>Modal</div>');
+  });
 });
 
-test('Must process component with namespace', async () => {
-  const actual = `<x-dark::button>My button</x-dark::button>`;
-  const expected = `<button class="bg-dark text-light">My button</button>`;
-
-  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components'}]})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('x-tag self-closing', async () => {
+  process(
+    '<p>first</p><x-modal /><p>last</p>',
+    {
+      root: './test/templates',
+      folders: 'components',
+      parserOptions: {
+        recognizeSelfClosing: true
+      }
+    }
+  )
+    .then(html => {
+      expect(html).toBe('<p>first</p><div>Modal</div><p>last</p>');
+    });
 });
 
-test('Must process component with namespace using index file', async () => {
-  const actual = `<x-dark::label></x-dark::label>`;
-  const expected = `<label class="bg-dark text-light">My Dark Label</label>`;
-
-  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components'}]})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('x-tag with namespace', async () => {
+  process(
+    '<x-dark::button>My button</x-dark::button>',
+    {
+      root: './test/templates',
+      namespaces: [{
+        name: 'dark',
+        root: './test/templates/dark/components'
+      }]
+    }
+  )
+    .then(html => {
+      expect(html).toBe('<button class="bg-dark text-light">My button</button>');
+    });
 });
 
-test(`Must process component with namespace's fallback path`, async () => {
-  const actual = `<x-dark::modal></x-dark::modal>`;
-  const expected = `<div>Modal</div>`;
-
-  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components', fallback: './test/templates/components'}]})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('x-tag with namespace (index file)', async () => {
+  process(
+    '<x-dark::label></x-dark::label>',
+    {
+      root: './test/templates',
+      namespaces: [{
+        name: 'dark',
+        root: './test/templates/dark/components'
+      }]
+    }
+  )
+    .then(html => {
+      expect(html).toBe('<label class="bg-dark text-light">My Dark Label</label>');
+    });
 });
 
-test(`Must process component with namespace's fallback path using index file`, async () => {
-  const actual = `<x-dark::form></x-dark::form>`;
-  const expected = `<form>My Form</form>`;
-
-  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components', fallback: './test/templates/components'}]})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('x-tag with namespace `fallback` path', async () => {
+  process(
+    '<x-dark::modal></x-dark::modal>',
+    {
+      root: './test/templates',
+      namespaces: [{
+        name: 'dark',
+        root: './test/templates/dark/components',
+        fallback: './test/templates/components'
+      }]
+    }
+  )
+    .then(html => {
+      expect(html).toBe('<div>Modal</div>');
+    });
 });
 
-test(`Must process component with namespace's custom path`, async () => {
-  const actual = `<x-dark::button>My button</x-dark::button>`;
-  const expected = `<button class="bg-dark-custom text-light-custom">My button</button>`;
-
-  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components', custom: './test/templates/custom/dark/components'}]})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('x-tag with namespace `fallback` path (index file)', async () => {
+  process(
+    '<x-dark::form></x-dark::form>',
+    {
+      root: './test/templates',
+      namespaces: [{
+        name: 'dark',
+        root: './test/templates/dark/components',
+        fallback: './test/templates/components'
+      }]
+    }
+  )
+    .then(html => {
+      expect(html).toBe('<form>My Form</form>');
+    });
 });
 
-test(`Must process component with namespace's custom path using index file`, async () => {
-  const actual = `<x-dark::label></x-dark::label>`;
-  const expected = `<label>My Label</label>`;
-
-  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components', custom: './test/templates/custom/dark/components'}]})]).process(actual).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('x-tag with namespace `custom` path', async () => {
+  process(
+    '<x-dark::button>My button</x-dark::button>',
+    {
+      root: './test/templates',
+      namespaces: [{
+        name: 'dark',
+        root: './test/templates/dark/components',
+        custom: './test/templates/custom/dark/components'
+      }]
+    }
+  )
+    .then(html => {
+      expect(html).toBe('<button class="bg-dark-custom text-light-custom">My button</button>');
+    });
 });
 
-test('Must process self-closing component x-tag', async () => {
-  const actual = `<p>first</p><x-modal /><p>last</p>`;
-  const expected = `<p>first</p><div>Modal</div><p>last</p>`;
-
-  const html = await posthtml([plugin({root: './test/templates', folders: 'components'})])
-    .process(actual, {recognizeSelfClosing: true}).then(result => clean(result.html));
-
-  expect(html).toBe(expected);
+test('x-tag with namespace `custom` path (index file)', async () => {
+  process(
+    '<x-dark::label></x-dark::label>',
+    {
+      root: './test/templates',
+      namespaces: [{
+        name: 'dark',
+        root: './test/templates/dark/components',
+        custom: './test/templates/custom/dark/components'
+      }]
+    }
+  )
+    .then(html => {
+      expect(html).toBe('<label>My Label</label>');
+    });
 });