Skip to main content


@stylable/cli is a low-level utility used for working with Stylable projects directly.

It lets you:

  • Build and transform stylesheets into JavaScript modules
  • Generate an entry index file to help consume a published project


npm install @stylable/cli --save-dev

Using the CLI

After installing @stylable/cli, the stc command will be available, running stc --help will provide a brief description for the options available.

stc accepts CLI arguments or a Stylable configuration file.

CLI Arguments

OptionAliasDescriptionDefault Value
--versionvshow CLI version numberboolean
--rootDirroot directory of projectcwd
--srcDirsource directory relative to root./
--outDirtarget directory relative to root./
--indexFilefilename of the generated indexfalse
--cjsoutput commonjs modules (.js)false
--esmoutput esm modules (.mjs)false
--cssoutput transpiled css files (.css)false
--stcssoutput stylable source files (.st.css)false
--dtsoutput definition files for the stylable source files (.st.css.d.ts)false
--dtsSourceMapoutput source-maps for the definitions of stylable source files ( if --dts is true, otherwise false
--watchwenable watch modefalse
--configcThe path to a config file specifying how to build and output Stylable stylesheetsThe directory containing the config file is assumed to be the "rootDir" for the project named "stylable.config.js"
--useNamespaceReferenceunsrmark output stylable source files with relative path for namespacing purposes (*)false
--customGeneratorpath of a custom index file generator-
--extextension of stylable css
--cssInJsoutput transpiled css into the js modulefalse
--cssFilenamepattern of the generated css file[filename].css
--injectCSSRequesticradd a static import for the generated css in the js module outputfalse
--namespaceResolvernsrnode request to a module that exports a stylable resolveNamespace function@stylable/node
--requirerrequire hook to execute before running-
--optimizeoremoves: empty nodes, stylable directives, commentsfalse
--minifymminify generated cssfalse
--logverbose logfalse
--diagnosticsprint verbose diagnosticstrue
--diagnosticsModedetermine the diagnostics mode. if strict process will exit on any exception, loose will attempt to finish the process regardless of exceptionsfalse
--helphShow helpboolean

Generating an index file

To automatically generate an index file that acts as an export entry for stylable API from your project, use the --inedexFile flag:

stc --srcDir="./src" --outDir="./dist" --indexFile=""

Control exposed API

Exporting a Generator named export class from a JavaScript file will allow it to be used as a customGenerator.

Usually this generator will inherit from our base generator class and override the generateReExports and generateIndexSource methods.

This example demonstrates the default generator behavior (only exports stylesheet roots):

import { Generator as Base, ReExports } from '@stylable/cli';

export class Generator extends Base {
public generateReExports(filePath): ReExports {
return {
root: this.filename2varname(filePath),
parts: {},
keyframes: {},
stVars: {},
vars: {},
protected generateIndexSource(indexFileTargetPath: string) {
const source = super.generateIndexSource(indexFileTargetPath);
return '@st-namespace "INDEX";\n' + source;