{"id":26946,"library":"esbuild-plugin-raw-css","title":"esbuild-plugin-raw-css","description":"An esbuild plugin (v0.1.0) that imports CSS files as minified raw text strings. It allows developers to embed CSS content directly into JavaScript bundles without runtime style injection. The plugin supports optional minification (default true) and works with esbuild versions ^0.14.36, ^0.15.0, or ^0.16.0. This is a niche tool for situations where CSS must be handled as strings, such as dynamic injection or custom style processing, but lacks broader support or active maintenance beyond initial release.","status":"active","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/Debonex/esbuild-plugin-raw-css","tags":["javascript","typescript"],"install":[{"cmd":"npm install esbuild-plugin-raw-css","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-raw-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-raw-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin requires esbuild's plugin API","package":"esbuild","optional":false}],"imports":[{"note":"Package is ESM-only; require() will fail unless using a dynamic import or esbuild bundler.","wrong":"const rawCssPlugin = require('esbuild-plugin-raw-css')","symbol":"default","correct":"import rawCssPlugin from 'esbuild-plugin-raw-css'"},{"note":"Type import for TypeScript; only available as a type since v0.1.0.","wrong":"import { RawCssPluginOptions } from 'esbuild-plugin-raw-css'","symbol":"RawCssPluginOptions","correct":"import type { RawCssPluginOptions } from 'esbuild-plugin-raw-css'"},{"note":"The query parameter ?raw is mandatory to trigger the plugin. Without it, esbuild treats CSS as a regular CSS file.","wrong":"import styles from './styles.css'","symbol":"styles","correct":"import styles from './styles.css?raw'"}],"quickstart":{"code":"import esbuild from 'esbuild';\nimport rawCssPlugin from 'esbuild-plugin-raw-css';\nconst result = await esbuild.build({\n  entryPoints: ['src/index.js'],\n  bundle: true,\n  plugins: [\n    rawCssPlugin({ minify: false }),\n  ],\n  write: false,\n});\nconst code = result.outputFiles[0].text;\nconsole.log(code.includes('.one')); // true if css imported with ?raw\n","lang":"javascript","description":"Shows how to configure esbuild with the plugin and verify CSS is imported as raw text."},"warnings":[{"fix":"Always append ?raw to CSS file imports (e.g., import './styles.css?raw').","message":"Importing CSS without ?raw query fails silently — esbuild treats it as a normal CSS import, potentially causing build errors or unexpected behavior.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Pin esbuild to ^0.14.36 || ^0.15.0 || ^0.16.0 or test with newer versions.","message":"No known deprecations at version 0.1.0. However, esbuild's CSS handling evolves; check compatibility with esbuild >=0.17.0.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Add 'declare module \"*.css?raw\" { const src: string; export default src; }' to a .d.ts file.","message":"TypeScript declaration for *.css?raw is not automatically provided; you must add a module declaration manually.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use esbuild's native loader for other CSS preprocessors or extend the plugin.","message":"The plugin only affects files ending with .css?raw. Other file extensions (e.g., .scss?raw) are not supported out of the box.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure rawCssPlugin is included in the plugins array when calling esbuild.build().","cause":"The plugin is not configured in esbuild build options, or the path is incorrect.","error":"Error: Could not resolve './styles.css?raw' (did you mean './styles.css'?)"},{"fix":"Use import rawCssPlugin from 'esbuild-plugin-raw-css' in ESM, or const { default: rawCssPlugin } = await import('esbuild-plugin-raw-css') in CJS.","cause":"Default import used but package is not ESM, or imported incorrectly in a CommonJS context.","error":"TypeError: rawCssPlugin is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}