or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

build-features.md configuration.md css-preprocessing.md file-operations.md framework-integration.md index.md javascript-compilation.md

tile.json

CSS Preprocessing

CSS compilation through various preprocessors including Sass, Less, Stylus, and PostCSS. Laravel Mix handles stylesheet compilation with autoprefixing, minification, and PostCSS plugin support.

Capabilities

PostCSS Compilation

Compiles CSS files through PostCSS with plugin support and autoprefixing.

/**
 * Compile CSS via PostCSS
 * @param src - Source CSS file path
 * @param output - Output CSS file path
 * @param plugins - Array of PostCSS plugins
 * @returns Mix API instance for chaining
 */
css(src: string, output: string, plugins?: AcceptedPlugin[]): Api;

/**
 * Compile CSS via PostCSS with plugin options
 * @param src - Source CSS file path
 * @param output - Output CSS file path
 * @param pluginOptions - Plugin configuration object
 * @param plugins - Array of PostCSS plugins
 * @returns Mix API instance for chaining
 */
css(src: string, output: string, pluginOptions?: object, plugins?: AcceptedPlugin[]): Api;

/**
 * Alias for css() method
 */
postCss(src: string, output: string, plugins?: AcceptedPlugin[]): Api;
postCss(src: string, output: string, pluginOptions?: object, plugins?: AcceptedPlugin[]): Api;

Usage Examples:

const mix = require('laravel-mix');

// Basic CSS compilation
mix.css('resources/css/app.css', 'public/css');

// With custom PostCSS plugins
mix.css('resources/css/app.css', 'public/css', [
  require('postcss-nested'),
  require('postcss-custom-properties')
]);

// With plugin options
mix.css('resources/css/app.css', 'public/css', {
  processCssUrls: false
}, [
  require('tailwindcss')
]);

Sass/SCSS Compilation

Compiles Sass and SCSS files to CSS with full Sass feature support.

/**
 * Compile Sass/SCSS files to CSS
 * @param src - Source Sass/SCSS file path
 * @param output - Output CSS file path
 * @param pluginOptions - Sass compiler options
 * @param postCssPlugins - Array of PostCSS plugins to apply after compilation
 * @returns Mix API instance for chaining
 */
sass(src: string, output: string, pluginOptions?: object, postCssPlugins?: AcceptedPlugin[]): Api;

Usage Examples:

const mix = require('laravel-mix');

// Basic Sass compilation
mix.sass('resources/sass/app.scss', 'public/css');

// With Sass options
mix.sass('resources/sass/app.scss', 'public/css', {
  sassOptions: {
    outputStyle: 'compressed',
    precision: 8
  },
  additionalData: '$theme-color: #007bff;'
});

// With PostCSS plugins
mix.sass('resources/sass/app.scss', 'public/css', {}, [
  require('autoprefixer'),
  require('cssnano')
]);

Less Compilation

Compiles Less files to CSS with Less plugin support.

/**
 * Compile Less files to CSS  
 * @param src - Source Less file path
 * @param output - Output CSS file path
 * @param pluginOptions - Less compiler options
 * @param postCssPlugins - Array of PostCSS plugins to apply after compilation
 * @returns Mix API instance for chaining
 */
less(src: string, output: string, pluginOptions?: object, postCssPlugins?: AcceptedPlugin[]): Api;

Usage Examples:

const mix = require('laravel-mix');

// Basic Less compilation
mix.less('resources/less/app.less', 'public/css');

// With Less options
mix.less('resources/less/app.less', 'public/css', {
  lessOptions: {
    math: 'always',
    strictUnits: true
  }
});

// With PostCSS plugins
mix.less('resources/less/app.less', 'public/css', {}, [
  require('autoprefixer')
]);

Stylus Compilation

Compiles Stylus files to CSS with Stylus plugin support.

/**
 * Compile Stylus files to CSS
 * @param src - Source Stylus file path
 * @param output - Output CSS file path  
 * @param pluginOptions - Stylus compiler options
 * @param postCssPlugins - Array of PostCSS plugins to apply after compilation
 * @returns Mix API instance for chaining
 */
stylus(src: string, output: string, pluginOptions?: object, postCssPlugins?: AcceptedPlugin[]): Api;

Usage Examples:

const mix = require('laravel-mix');

// Basic Stylus compilation
mix.stylus('resources/stylus/app.styl', 'public/css');

// With Stylus options
mix.stylus('resources/stylus/app.styl', 'public/css', {
  stylusOptions: {
    use: [require('nib')()],
    import: ['nib']
  }
});

// With PostCSS plugins
mix.stylus('resources/stylus/app.styl', 'public/css', {}, [
  require('autoprefixer')
]);

PostCSS Plugin Types

// PostCSS plugin can be:
type AcceptedPlugin = 
  | string                    // Plugin name
  | [string, object]          // Plugin name with options
  | Function                  // Plugin function
  | object;                   // Plugin object

Common Plugin Options

Sass Options

{
  sassOptions: {
    outputStyle: 'compressed' | 'expanded',
    precision: number,
    includePaths: string[],
    sourceMap: boolean
  },
  additionalData: string,      // Prepended to every Sass file
  implementation: object       // Custom Sass implementation
}

Less Options

{
  lessOptions: {
    math: 'always' | 'strict' | 'parens-division' | 'parens' | 'strict-legacy',
    strictUnits: boolean,
    paths: string[],
    plugins: object[]
  }
}

Stylus Options

{
  stylusOptions: {
    use: Function[],           // Stylus plugins
    import: string[],          // Files to import
    include: string[],         // Include paths
    compress: boolean
  }
}

Integration Notes

All CSS preprocessors automatically include autoprefixing via PostCSS
CSS output is automatically minified in production mode
Source maps are generated when mix.sourceMaps() is enabled
URL processing can be controlled via processCssUrls option
File watching automatically recompiles stylesheets on changes
Global variables and mixins can be injected via additionalData option

Version

Tile

Files