KTT - KI Themer Tool

KTT is a static theming tool.

Its purpose is to build SASS, ~~LESS~~, ~~JS~~ or Tailwind from => to the specified locations with some recommanded best practices of linting/optimizations to do so.

Table of Contents

• 🚨 Before Starting
• 🚀 Getting Started
• 💻 Configuration
• 🌍 How to use
• ⚖️ License

🚨 Before Starting

1. Please note that the KTT includes the following packages so you do not need to download and configure them (nor their equivalents) for the assets in your KTT configuration :

   • stylelint (css/~~less~~/sass)
   • autoprefixer
   • clean-css
   • sourcemaps
   • ~~eslint~~
   • ~~esbuild~~
   • tailwindcss

2. Unless you know what you're doing, we recommand you to put the KTT in the highest level folder of your application - generally one level before the app root itself.

🚀 Getting Started

Use the following command to add the KTT as a dependency of your project:

pnpm add -D @kleeinteractive/ktt

Create a default ktt-config.json file with configuration options below.

💻 Configuration

Example of a ktt-config.json

{
    "minify": { // OPTIONNAL - override global minify
        "dev": true, 
        "prod": false 
    },
    "sourcemap": { // OPTIONNAL - override global sourcemap
        "dev": false, 
        "prod": false 
    },
    "lint": { // OPTIONNAL - override lint for this entrypoint
        "dev": true, 
        "prod": false,
        "failOnError": true
    },
    "entrypoints": [ // Your entrypoints
        {
            "name": "example_module_1", // Custom entrypoint name
            "path": "./modules/custom/example_module", // Path to dir
            "compiler": "sass",
            "dir": {
                "src": "scss/", // Source folder
                "dest": "css/" // Destination folder
            },
            "files": ["example-module.scss"], // Source files to build
        },
        {
            "name": "example_theme_css",
            "path": "./themes/custom/example_theme",
            "compiler": "sass",
            "dir": {
                "src": "scss/",
                "dest": "css/"
            },
            "files": ["example-theme-fonts.scss", "example-theme.scss"],
            "minify": { // OPTIONNAL - override minify for this entrypoint
                "dev": true, 
                "prod": false 
            },
            "sourcemap": { // OPTIONNAL - override sourcemap for this entrypoint
                "dev": true, 
                "prod": false 
            },
            "lint": { // OPTIONNAL - override lint for this entrypoint
                "dev": true, 
                "prod": false,
                "failOnError": true
            },
        },
        {
            "name": "example_theme_tailwind",
            "path": "./themes/custom/example_theme",
            "compiler": "tailwind",
            "dir": {
                "src": "src/",
                "dest": "css/"
            },
            "files": ["my-tailwind-style.css"],
            "tailwind_config_path": "./example-theme-tailwind.config.js" // The relative path to the tailwind config file to use for this entrypoint, only works with tailwind as compiler
        },
    ]
}

Example of a example-theme-tailwind.config.js

📢 Please prefix all paths by "./"

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./themes/custom/**/*.twig",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

🌍 How to use

| Build modes

Available {build_mode} are :

• dev
• prod
• watch (eq. dev with build on save)

| Commands

• pnpm ktt {build_mode}: Build all entrypoints in the ktt-config.json with default options for dev. |

⚖️ License

MIT (LICENCE file in the package)