Configuration

SALVO-TS is configured through the salvo.config.js file in the root of the project.

This file must export an object which matches the configuration structure. The file is JS rather than JSON, so you can add comments and perform calculations to build your configuration.

Reference

Item	Description	Default
buildVariant	Controls which build variant the compiler builds.	undefined
entry	Main entry point for the theme javascript. Relative to root directory. Specified as an array - additional files will all be merged into the same entry point.	['./src/main.ts']
css	Main entry point for the theme stylesheet. Relative to root directory. Specified as an array - additional files will all be merged into the same entry point.	['./assets/styles/theme.scss']
output.themeJs	Specifies asset name of the main theme javascript.	theme.min.js
output.themeCss	Specifies asset name of the main theme stylesheet.	theme.css.liquid
extraCss	Specifies additional extra css to build.	[]
alias	Specifies path aliases for imports.	{'@': path.resolve('./src/'), '@assets': path.resolve('./assets/')}
components.sass.defaultImports	An array of SCSS files to automatically import into every component stylesheet, used to share variables with components.	['./assets/styles/variables.scss']
components.sass.cssBuildMode	Method for loading component CSS. One of: "inline": Inline component CSS into component JS files. "async": Always load component CSS from a separate CSS file "auto": Use inline or async behavior depending on the size of the component CSS.	"auto"
component.sass.cssInlineLimit	Size limit at which to switch from inline to auto behavior (when cssBuildMode is auto)	8192
optimization.sourcemaps	Enable or disable sourcemaps. One of: undefined: Never build sourcemaps "dev": Include sourcemaps in dev builds. "always": Include sourcemaps in dev and production builds.	undefined
optimization.cwvOverlay	Enables or disable the CWV overlay. One of: true: CWV overlay enabled false: CWV overlay disabled	true
optimization.minify	Enables or disable minification. One of: "production": In production builds only "always": In production and dev builds "never": Disable minification	"production"
optimization.previewBar	Show or hide the Shopify theme preview bar One of: undefined: Default behavior "block": Hide the preview bar "mini": Replace the preview bar with a smaller version w/ direct preview link.	undefined
optimization.preloader	One of: undefined: Don't include a preloader "blank": Include a white overlay preloader. "pseudo"	undefined
optimization.preloaderDelay	Maximum time to show the preloader	200
optimization.preloadComponents	Array of components to always load immediately. Use this to specify above-the-fold global components.	[]
optimization.eagerComponentPreloading	Attempt to determine which components to preload from Liquid.	false
optimization.icons	Enables optimization of SVG icons
optimization.icons.convertToCurrentColor	Converts all colors in SVG icons to currentColor	true
optimization.devBuildReminder	Shows reminders against publishing themes build in dev mode. One of: "enforce": Show, block publishing "gentle": Show, don't block publishing "never": Never show reminder	"enforce"
optimization.includeCriticalCss	Whether critical styles are included in the theme output One of: "always": Include critical CSS "only": Include only critical CSS, omitting all non-critical CSS "never": Do not include critical CSS	"always"
extendVite	Extend the underlying Vite config. Type: extendVite(config: UserConfig): UserConfig	undefined
depCheck.ignore	Array of package names to exclude from dependency validation	[]

Type hinting

The type for the expected config exported from salvo.config.js is made available at @eastsideco/salvo-ts-build/schemas/config. You can reference this in a comment in your salvo.config.js file in order to see helpful descriptions of configuration settings and receive feedback in your editor when the config is incorrect.

To enable type hinting include an @type comment on the config object you export and a // @ts-check comment as the first line of the file:

salvo.config.js
js
// @ts-check
const path = require('path');
 
/** @type {import('@eastsideco/salvo-ts-build/schema/config').SalvoConfig} */
const config = { 
    buildVariant: null, 
    entry: ['./src/main.ts'],
    css: ['./assets/styles/theme.scss'],
    output: {
        themeJs: 'theme.min.js',
        themeCss: 'theme.css.liquid',
        themeMetadata: 'theme.metadata.js',
    },
    extraCss: [],
    components: {
        sass: {
            defaultImports: [],
            cssBuildMode: 'inline',
                 
(property) cssBuildMode?: CssBuildMode | undefined
        },
    },
    alias: {
    },
    polyfills: [],
    enableLegacySalvoLiteComponentSupport: false,
    extendVite(config) {
    },
    optimization: {
        previewBar: 'small'
Type '"small"' is not assignable to type '"block" | "mini" | undefined'.2322Type '"small"' is not assignable to type '"block" | "mini" | undefined'.
    }
};
 
module.exports = config;

salvo.config.js
js
// @ts-check
const path = require('path');
 
/** @type {import('@eastsideco/salvo-ts-build/schema/config').SalvoConfig} */
const config = { 
    buildVariant: null, 
    entry: ['./src/main.ts'],
    css: ['./assets/styles/theme.scss'],
    output: {
        themeJs: 'theme.min.js',
        themeCss: 'theme.css.liquid',
        themeMetadata: 'theme.metadata.js',
    },
    extraCss: [],
    components: {
        sass: {
            defaultImports: [],
            cssBuildMode: 'inline',
                 
(property) cssBuildMode?: CssBuildMode | undefined
        },
    },
    alias: {
    },
    polyfills: [],
    enableLegacySalvoLiteComponentSupport: false,
    extendVite(config) {
    },
    optimization: {
        previewBar: 'small'
Type '"small"' is not assignable to type '"block" | "mini" | undefined'.2322Type '"small"' is not assignable to type '"block" | "mini" | undefined'.
    }
};
 
module.exports = config;

Due to a Typescript bug this will not work if you specify the @type comment on a direct assignment to module.exports. Instead, you need to use an intermediary variable as shown in the example above:

salvo.config.js
ts
// @ts-check
 
// This will not work
 
/** @type {import('@eastsideco/salvo-ts-build/schema/config').SalvoConfig} */
module.exports = {
    // ...
};

salvo.config.js
ts
// @ts-check
 
// This will not work
 
/** @type {import('@eastsideco/salvo-ts-build/schema/config').SalvoConfig} */
module.exports = {
    // ...
};