Registry / devops / esbuild-plugin-postcss-literal

esbuild-plugin-postcss-literal

library0.2.1jsnpmunverified

PostCSS tagged template literals plugin for esbuild (v0.2.1). Enables processing CSS-in-JS tagged template literals (e.g., css`...`) through PostCSS pipelines during esbuild builds. Integrates with postcss-load-config for plugin configuration (e.g., postcss-nesting). Provides options like filter, namespace, tag name, and minify. Requires esbuild ^0.9.0, postcss ^8.0.0, and postcss-load-config ^3.0.0 as peer dependencies. Different from other PostCSS esbuild plugins by focusing specifically on template literals rather than CSS files.

devops

npm install esbuild-plugin-postcss-literal

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ESBUILD-PLUGIN-POS

esbuild-plugin-postcss-literal

devopsjavascriptv0.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import postcssLiteral from 'esbuild-plugin-postcss-literal'

✗ import { postcssLiteral } from 'esbuild-plugin-postcss-literal'

This package exports a default function (factory), not a named export.

postcssLiteral

✓ const postcssLiteral = require('esbuild-plugin-postcss-literal')

✗ const { postcssLiteral } = require('esbuild-plugin-postcss-literal')

When using CommonJS, the default export is accessed as require() directly, not destructured.

postcssLiteral

✓ import postcssLiteral from 'esbuild-plugin-postcss-literal'

✗ import postcssLiteral = require('esbuild-plugin-postcss-literal')

TypeScript's import = require is not needed; use default import syntax for ESM.

Shows basic usage: import plugin, add to esbuild build plugins array. Requires postcss-load-config or inline config.

import esbuild from 'esbuild'; import postcssLiteral from 'esbuild-plugin-postcss-literal'; await esbuild.build({ entryPoints: ['src/index.js'], bundle: true, outfile: 'dist/main.js', plugins: [postcssLiteral()], });

Debug

Known issues

gotchaPlugin processes files matching filter (default /.*/) and namespace. Ensure entry points contain tagged template literals with the default tag 'css'.

fix

Use explicit filter and tag options to avoid unintended processing.

affects: >=0.0.0

gotchaMinify option uses esbuild to minify output CSS, but may conflict with other minification plugins.

fix

Set minify: false and handle minification separately if needed.

affects: >=0.0.0

gotchaPeer dependencies not installed automatically; must be installed manually.

fix

Run npm install esbuild postcss postcss-load-config --save-dev.

affects: >=0.0.0

gotchaIf using TypeScript, ensure tsconfig includes 'dom' lib for template literals or appropriate type definitions.

fix

Add 'dom' to lib array in tsconfig.json.

affects: >=0.0.0

Errors

Common errors & fixes

Error: Cannot find module 'postcss-load-config'

Missing peer dependency postcss-load-config.

fix

Install postcss-load-config via npm install postcss-load-config --save-dev.

Error: No configuration found for postcss plugin

No .postcssrc, postcss.config.js, or inline config provided.

fix

Create a .postcssrc file or pass config option to postcssLiteral().

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

Attempting to process non-JS files (e.g., .css) that are not handled by this plugin.

fix

Ensure plugin filter only matches files that contain template literals (e.g., filter: /\.js$/).

TypeError: postcssLiteral is not a function

Incorrect import: used named import instead of default.

fix

Use import postcssLiteral from 'esbuild-plugin-postcss-literal' (default import).

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

esbuildrequiredpeer dependency: esbuild plugin interface

postcssrequiredpeer dependency: PostCSS processor

postcss-load-configrequiredpeer dependency: loads PostCSS config from .postcssrc

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/nativew/esbuild-plugin-postcss-literal ↗

packageesbuild-plugin-postcss-literal ↗

homepagehttps://github.com/nativew/esbuild-plugin-postcss-literal#readme ↗