Add support to import YAML files in config / custom loaders.

[a-y-u-s-h]

I like breaking down my config file into several files because they can get huge (especially with extended colors, grids, etc) and most keys don't require me to pass functions, so for the most part these files are serializable and hence I choose YAML as my preferred format to store these key value pairs for readability and the additional benefit to make pretty comments, like my screens.yaml shown below:

#  ======================================
#
#    ░█▀▀░█▀▀░█▀▄░█▀▀░█▀▀░█▀█░█▀▀
#    ░▀▀█░█░░░█▀▄░█▀▀░█▀▀░█░█░▀▀█
#    ░▀▀▀░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░▀▀▀
#
#    If you want to get finer control
#    over styling for various kinds of
#    screen sizes, you can extend your
#    configuration to use the following
#    keys. These devices overlap with
#    those available in Google Chrome
#    (default breakpoints) so you won't
#    have to think twice with these.
#
#  ======================================

screens:
  mobile:
    max: 767px
  mobile-sm:
    max: 320px
  mobile-md:
    min: 321px
    max: 375px
  mobile-lg:
    min: 376px
    max: 425px
  mobile-xl:
    min: 426px
    max: 767px
  tablet:
    min: 768px
    max: 991px
  tabloid:
    max: 991px
  desktop:
    min: 992px
  desktop-sm:
    min: 992px
    max: 1024px
  desktop-md:
    min: 1025px
    max: 1440px
  desktop-lg:
    min: 1441px
    max: 1920px
  desktop-4k:
    min: 1921px
    max: 2560px
  desktop-8k:
    min: 2561px

But currently, if I wish to import YAML files, I'll have to create another JS file like so:

import fs from "node:fs"
import yaml from "js-yaml"

/*
  ======================================

    ░█░█░█▀█░█▄█░█░░
    ░░█░░█▀█░█░█░█░░
    ░░▀░░▀░▀░▀░▀░▀▀▀

    This file exports a simple function
    to load YAML files from their paths.
    Path must be relative to project root,
    and must not use local aliases.

  ======================================
*/
export const read = path => {
  try {
    const file = yaml.load(fs.readFileSync(`${path}`, "utf8"))
    const indentedJson = JSON.stringify(file, null, 2)
    return file
  } catch (e) {
    console.log(e)
  }
}

export default {
  read
}

And then import my screens.yaml file into my tailwind.config.js file like so:

import YAML from "./.loaders/yaml"
const screens = YAML.read("src/settings/theme/extends/screens.yaml")

But, I wish there was a YAML loader support already for tailwind config files. Or at least a way to plug it in if we wish to in our project because custom loaders make the DX better as they reduces that one custom YAML loader (in this case) from our projects.