Configuration

Set up your Yumma CSS project with the CLI.

Initializing configuration file

To create a new yumma.config.js file in your project, run the following command:

npx yummacss init

pnpm yummacss init

yarn yummacss init

This command will create a new yumma.config.js file in the root of your project using ESM.

If you’re using export default, make sure "type": "module" is set in your package.json.

export default {
  source: [""],
  output: "",
};

If your project does not use ESM, you can use CommonJS instead:

module.exports = {
  source: [""],
  output: "",
};

The yumma.config.js file contains several options that you can use to configure the Yumma CSS CLI.

export default {
  source: [""],
  output: "",
  buildOptions: {
    reset: true, // default: true
    minify: false, // default: false
  },
};

The source array is collection of paths for your project files. This lets the CLI find the Yumma CSS utilities.

Use glob patterns to include subfolders and specific file types.

export default {
  source: ["./src/**/*.html"],
};

The output option is a string that tells where the compiled CSS files should be saved.

export default {
  output: "./src/styles.css",
};

The reset option is a boolean that determines whether the inclusion of the Stylecent reset system. By default, the reset system is included.

This is an optional feature.

export default {
  buildOptions: {
    reset: true, // default: true
  },
};

The minify option is a boolean that determines whether the compiled CSS files should be minified. By default, the files are not minified.

This is an optional feature.

export default {
  buildOptions: {
    minify: true, // default: false
  },
};

The Yumma CSS CLI provides several commands to help you work with your Yumma CSS files.

Make sure you have a yumma.config.js file set up before running these commands. If you haven’t, run npx yummacss init first.

The build command will compile your Yumma CSS files once.

npx yummacss build

pnpm yummacss build

yarn yummacss build

The watch command will watch for changes in your Yumma CSS files and recompile them automatically.

npx yummacss watch

pnpm yummacss watch

yarn yummacss watch