@old-skull/esbuild-conditional-styles-plugin v1.1.0

@old-skull/esbuild-conditional-styles-plugin

Control your stylesheet build using comments.

This package was generated with Nx

Install

npm i -D @old-skull/esbuild-conditional-styles-plugin

pnpm add -D @old-skull/esbuild-conditional-styles-plugin

yarn add -D @old-skull/esbuild-conditional-styles-plugin

Usage

Add plugin to the esbuild config:

import { build } from 'esbuild';
import { sassPlugin } from 'esbuild-sass-plugin';
import { conditionalStylesPlugin } from '@old-skull/esbuild-conditional-styles-plugin';

build({
  entryPoints: ['./index.css'],
  bundle: true,
  outdir: './dist',
  plugins: [
    // 👇 call it
    conditionalStylesPlugin(),
  ],
  define: {
    'process.env.NODE_ENV': 'dev',
  },
}).catch(() => process.exit(1));

Use comments in your stylesheet:

* {
  transition: 0.3s ease-in-out;
}

/* prod-only */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* / prod-only */

Code between /* prod-only */ and /* / prod-only */ will be ignored during dev build.

Your could use css, scss/sass or less syntax.