# @jadex/snowpack-plugin-exclude

> Snowpack plugin to exclude files from build folder while still allowing them to be watched for changes

Latest version **0.1.0** (published 2021-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @jadex/snowpack-plugin-exclude
pnpm add @jadex/snowpack-plugin-exclude
yarn add @jadex/snowpack-plugin-exclude
bun add @jadex/snowpack-plugin-exclude
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-10-07 |
| First published | 2021-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Xeevis |
| Maintainers | xeevis |

## Links

- npm: https://www.npmjs.com/package/@jadex/snowpack-plugin-exclude
- Repository: https://github.com/jadex/snowpack-plugin-exclude
- Issues: https://github.com/jadex/snowpack-plugin-exclude/issues
- npm.io page: https://npm.io/package/@jadex/snowpack-plugin-exclude

## Dependencies (2)

- [path](https://npm.io/package/path.md) ^0.12.7
- [micromatch](https://npm.io/package/micromatch.md) ^4.0.4

## Recent versions

- 0.1.0 (latest) — 2021-10-07

## README

# @jadex/snowpack-plugin-exclude

![MIT License](https://img.shields.io/github/license/jadex/snowpack-plugin-exclude)
[![NPM version](https://img.shields.io/npm/v/@jadex/snowpack-plugin-exclude)](https://www.npmjs.com/package/@jadex/snowpack-plugin-exclude)
[![NPM downloads](https://img.shields.io/npm/dt/@jadex/snowpack-plugin-exclude)](https://www.npmjs.com/package/@jadex/snowpack-plugin-exclude)
[![Node.js Package](https://github.com/jadex/snowpack-plugin-exclude/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/JadeX/snowpack-plugin-exclude/actions/workflows/npm-publish.yml)

This is a simple [Snowpack](https://www.snowpack.dev/tutorials/quick-start) plugin that complements `SnowpackUserConfig.exclude` ([docs](https://www.snowpack.dev/reference/configuration#exclude)), but instead of excluding files from the pipeline completely, it just prevents them from being included in the build folder.

This is useful when using [PostCSS import](https://github.com/postcss/postcss-import) or [TailwindCSS JIT](https://tailwindcss.com/docs/just-in-time-mode) where we watch for classes in source files.

## Installation

```bash
npm install @jadex/snowpack-plugin-exclude --save-dev
```
```js
/* snowpack.config.js */

module.exports = {
  plugins: [    
    [
      "@snowpack/plugin-postcss", /* Optional */
      "@jadex/snowpack-plugin-exclude",
      {
        paths: ["**/*.pcss"], // Set any desired extension
      },
    ],
  ]
};
```

## Example Usage - Snowpack & Blazor & TailwindCSS JIT
Goal here is that whenever we edit source `.pcss` or `.razor` files our final `.css` will be rebuilt without our source files appearing anywhere in the build.

For that we need to mount all folders with files we want Snowpack to work with and then exclude/"soft-exclude" as necessary:
```js
/* snowpack.config.js */

module.exports = {
  mount: {
    assets: "/", // Folder that holds our "wwwroot" contents like index.html, css/app.css etc
    pages: "/pages", // .cs, .razor, .pcss files
    shared: "/shared", // .cs, .razor, .pcss files
    "../../node_modules/@fontsource/poppins/files": { // Custom fonts
      url: "/css/files",
      static: true,
    },
  },
  exclude: ["**/*.cs"], // If .cs files don't contain any Tailwind classes for JIT to pick up, exclude them completely like this
  plugins: [
    "@snowpack/plugin-postcss",
    [
      "@jadex/snowpack-plugin-exclude",
      {
        // We don't want any of our source .razor or .pcss files in the final build folder
        paths: ["**/*.razor", "**/*.pcss"],
      },
    ],   
  ],
  buildOptions: {
    // wwwroot is standard folder for Blazor static assets
    out: "wwwroot",
  },
  optimize: {
    // Optionally make things tidy when publishing
    minify: true,
    bundle: false,
    treeshake: true,
    splitting: true,
    target: "es2020",
  },
};
```

```js
/* tailwind.config.js */

module.exports = {
  // Watch source files for Tailwind classes, snowpack will take care of rest, property may differ depending on version of TailwindCSS, see their docs
  content: ["./**/*.razor", "./**/*.pcss"],
  /* (...) */
}
```

```css
/* assets/app.css */

@import "tailwindcss/base.css";
@import "tailwindcss/components.css";
/* Here we can grab all our source pcss files with postcss-import-ext-glob plugin or import them one by one */
@import-glob "../../{Pages,Shared}/**/*.pcss";
@import "tailwindcss/utilities.css";
```

This will ensure whenever `.pcss`. or `.razor` files are saved, their corresponding `.css` files will be properly rebuilt.

---
_Source: https://npm.io/package/@jadex/snowpack-plugin-exclude · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._