@kleeinteractive/ktt v0.3.4

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

{
    "entrypoints": [ // Add as much entrypoints as you want
        {
            "name": "example_theme_css",
            "path": "./web/themes/custom/example_theme",
            "compiler": "sass", // sass | js | tailwind
            "dir": {
                "src": "scss/",
                "dest": "css/" // OPTIONNAL - if you don't set a "dest", assets will not be builded, for instance if you want this entrypoint to be lint only
            },
            "files": ["example-theme-fonts.scss", "example-theme.scss"],
            "minify": {}, // OPTIONNAL - override minify for this entrypoint
            "sourcemap": {}, // OPTIONNAL - override sourcemap for this entrypoint
            "lint": {} // OPTIONNAL - override lint for this entrypoint
        },
        {
            "name": "example_theme_js",
            "path": "./web/themes/custom/example_theme",
            "compiler": "js",
            "dir": {
                "src": "js/",
                "dest": "dist/" // OPTIONNAL - remove dest so you chose to not build this entrypoint at all (to lint only for example)
            },
            "files": ["*.js"], // GLOB pattern allowed (beta)
            "esbuild_config": {}, // OPTIONNAL - Only for 'js' entrypoints, you can extend or override the default KTT esbuild config with your own options from here (https://esbuild.github.io/api/)
            "eslint_config": {} // OPTIONNAL - Only for 'js' entrypoints, you can extend or override the default KTT eslint config with your own options from here (https://www.npmjs.com/package/gulp-eslint-new)
        },
        {
            "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" // SPECIFIC - The relative path to the tailwind config file to use for this entrypoint, only works with tailwind as compiler
        },
    ],
    // OPTIONNAL - override global minify, default values are :
    "minify": {
        "dev": false, 
        "prod": true 
    },
    // OPTIONNAL - override global sourcemap, default values are :
    "sourcemap": {
        "dev": true, 
        "prod": false 
    },
    // OPTIONNAL - override lint for this entrypoint, default values are :
    "lint": {
        "dev": true, 
        "prod": false,
        "failOnError": true
    }
}

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

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

🌍 How to use

| Command options

The KTT creates a "ktt" command to perform operations based on your ktt-config.json and provided arguments.

Operations

• dev
• prod
• watch (eq. dev with build on save)
• lint (lint only, no build at all)

Arguments

| Examples

• pnpm ktt prod: Execute the prod operation for all entrypoints in the ktt-config.json.
• pnpm ktt dev --ctype=css: Execute the dev operation for every entrypoints of the css compiler type (less, sass, tailwind).

⚖️ License

MIT (LICENCE file in the package)