{"id":16339,"library":"doiuse","title":"CSS Browser Support Linter","description":"Doiuse is a JavaScript library and CLI tool that lints CSS code for browser support issues by comparing features used in the CSS against the Can I use database. It helps developers identify CSS properties and values that are not supported by their target browser list, preventing unexpected rendering problems. The current stable version is 6.0.6, released in early 2024, with maintenance releases occurring as needed to fix bugs and update feature definitions. It integrates well into build pipelines, notably as a PostCSS plugin or a transform stream. A key differentiator is its direct reliance on the `caniuse` database for accurate, up-to-date compatibility data, allowing for highly customizable browser targets using `browserslist` syntax. While it focuses on identifying unsupported features, its \"naive\" detection approach means it primarily checks for direct property/value matches rather than complex runtime interpretation, offering a fast and focused linting experience.","status":"active","version":"6.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/anandthakker/doiuse","tags":["javascript","lint","css","browser","support","caniuse","stylelint"],"install":[{"cmd":"npm install doiuse","lang":"bash","label":"npm"},{"cmd":"yarn add doiuse","lang":"bash","label":"yarn"},{"cmd":"pnpm add doiuse","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required when using doiuse as a PostCSS plugin, which is a common integration pattern for CSS processing pipelines.","package":"postcss","optional":false}],"imports":[{"note":"The primary PostCSS plugin class is a default export from its specific path, not a named export from the main package. This is due to its internal structure.","wrong":"import { DoIUse } from 'doiuse';","symbol":"DoIUse","correct":"import DoIUse from 'doiuse/lib/DoIUse.js';"},{"note":"When using doiuse as a transform stream, the function is a default export from the 'doiuse/stream' entry point. The main 'doiuse' package itself primarily exposes the CLI.","wrong":"import { doiuse } from 'doiuse';","symbol":"doiuse","correct":"import doiuse from 'doiuse/stream';"},{"note":"The main 'doiuse' export is primarily for the CLI. For programmatic use, prefer `doiuse/lib/DoIUse.js` for PostCSS or `doiuse/stream` for stream-based processing, especially since v6.x for better ESM compatibility.","wrong":"const { DoIUse } = require('doiuse');","symbol":"require('doiuse')","correct":"const doiuseCli = require('doiuse');"},{"note":"For CommonJS environments, the PostCSS plugin class is found at `doiuse/lib/DoIUse`. Note the missing `.js` extension for CommonJS imports often works, but explicit is better for clarity.","wrong":"const DoIUse = require('doiuse');","symbol":"DoIUse (CommonJS)","correct":"const DoIUse = require('doiuse/lib/DoIUse');"}],"quickstart":{"code":"import postcss from 'postcss';\nimport DoIUse from 'doiuse/lib/DoIUse.js';\n\nconst cssInput = `\na { \n  background-size: cover; \n  display: flex; /* flexbox support */\n  user-select: none;\n  scroll-snap-align: start;\n}\n\n.gradient {\n  background-image: conic-gradient(white, black);\n}\n`;\n\npostcss(new DoIUse({\n  browsers: ['last 2 chrome versions', 'ie 11'], // Target specific browsers\n  ignore: ['flexbox', 'user-select-none'], // Optional: ignore specific features by 'caniuse' ID\n  ignoreFiles: ['**/node_modules/**'], // Optional: ignore files matching these globs\n  onFeatureUsage: (usageInfo) => {\n    // Log detailed information about each unsupported feature found\n    console.log(`[doiuse] ${usageInfo.message} in ${usageInfo.feature} for ${usageInfo.browsers.join(', ')} at ${usageInfo.source.start.line}:${usageInfo.source.start.column}`);\n  }\n})).process(cssInput, { from: 'example.css' })\n  .then(result => {\n    console.log('\\nProcessed CSS (no changes made by doiuse):\\n', result.css);\n  })\n  .catch(error => {\n    console.error('PostCSS processing failed:', error);\n  });","lang":"typescript","description":"This quickstart demonstrates how to use `doiuse` as a PostCSS plugin to lint CSS for browser compatibility, targeting specific browser versions and logging unsupported feature usages to the console."},"warnings":[{"fix":"Upgrade your Node.js environment to version 16 or newer. For projects that cannot upgrade Node.js, remain on `doiuse` v5.x or earlier.","message":"Version 6.0.0 of `doiuse` dropped support for Node.js v12 and v14. Projects must upgrade to Node.js v16 or higher.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Check the `engines` field in `package.json` for the specific `doiuse` version you are using. Upgrade Node.js or `doiuse` as necessary.","message":"Older versions of `doiuse` (prior to v4.3.0) dropped support for Node.js versions older than 10.x and 4.x respectively. Ensure your Node.js version meets the minimum requirements for your `doiuse` version.","severity":"breaking","affected_versions":"<4.3.0"},{"fix":"For the PostCSS plugin, use `import DoIUse from 'doiuse/lib/DoIUse.js'` (ESM) or `const DoIUse = require('doiuse/lib/DoIUse');` (CJS). For the stream, use `import doiuse from 'doiuse/stream'` or `const doiuse = require('doiuse/stream');`.","message":"The `doiuse` package uses specific import paths for its PostCSS plugin and stream API (e.g., `doiuse/lib/DoIUse.js`, `doiuse/stream`). Direct `import DoIUse from 'doiuse'` or `require('doiuse')` will not work for programmatic usage as intended for the plugin or stream.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Treat `doiuse` as a strong first line of defense for basic property/value support. Supplement its findings with actual browser testing and more advanced linting tools if detailed interaction compatibility is critical. Manually inspect the `data/features.js` file for specifics on how features are detected.","message":"The feature detection in `doiuse` is described as 'quite naive,' primarily relying on regex/substring matches of property and value names. It may not catch all nuanced browser compatibility issues, especially those involving complex CSS interactions or JavaScript polyfills.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure you are importing from the correct path: `import DoIUse from 'doiuse/lib/DoIUse.js';` for ESM or `const DoIUse = require('doiuse/lib/DoIUse');` for CommonJS.","cause":"Attempting to import the `DoIUse` class incorrectly, often from the main package entry point or with a wrong path.","error":"Error: Cannot find module 'doiuse/lib/DoIUse.js'"},{"fix":"For ESM, ensure your project is configured with `\"type\": \"module\"` in `package.json` and use `import` statements. For CommonJS, use `require()` and ensure files are `.js` or `.cjs`. Doiuse v6.x is largely ESM-first, so adjust your imports accordingly.","cause":"Mixing ESM `import` statements with CommonJS `require()` or vice-versa, or running a module type in an incompatible environment.","error":"SyntaxError: Unexpected token 'export' (for ESM usage in CJS context) OR require() of ES Module (for CJS usage in ESM context)"},{"fix":"For programmatic use, ensure you are importing the specific PostCSS plugin or stream entry point: `const doiusePlugin = require('doiuse/lib/DoIUse');` or `const doiuseStream = require('doiuse/stream');`.","cause":"This typically happens when trying to call `doiuse` directly after a `require('doiuse')` which returns the CLI function, not the PostCSS plugin or stream constructor.","error":"TypeError: doiuse is not a function"}],"ecosystem":"npm"}