{"id":16879,"library":"postcss-parcel-import","title":"PostCSS Parcel Import Fix","description":"postcss-parcel-import is a PostCSS plugin, currently at version 0.0.2, designed as a temporary workaround for a specific `@import` bug (issue #1165) encountered in older versions of `parcel-bundler`. The plugin introduces a custom `@parcel-import` at-rule, which Parcel v1 users could leverage to ensure CSS `@import` rules were correctly processed before other PostCSS transformations. This package has seen no updates since 2018, coinciding with the closure of the Parcel issue it addressed and the deprecation of `parcel-bundler` (Parcel v1) in favor of Parcel v2. It differentiates itself by providing a very specific, now obsolete, syntax extension to handle a bug that has long since been resolved in the Parcel ecosystem. Its release cadence was minimal, comprising a single version.","status":"abandoned","version":"0.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/mendrik/postcss-parcel-import","tags":["javascript","postcss","css","postcss-plugin","import","parcel","parcel-bundler"],"install":[{"cmd":"npm install postcss-parcel-import","lang":"bash","label":"npm"},{"cmd":"yarn add postcss-parcel-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add postcss-parcel-import","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency as it's a PostCSS plugin.","package":"postcss","optional":false}],"imports":[{"note":"While primarily used via `require()`, modern bundlers can handle default ESM import for CommonJS modules. No named exports exist.","wrong":"import { postcssParcelImport } from 'postcss-parcel-import';","symbol":"postcssParcelImport","correct":"import postcssParcelImport from 'postcss-parcel-import';"},{"note":"This is the primary and most commonly shown way to use PostCSS plugins in CommonJS environments, as demonstrated in the package's README.","symbol":"require","correct":"const postcssParcelImport = require('postcss-parcel-import');"}],"quickstart":{"code":"const postcss = require('postcss');\nconst postcssParcelImport = require('postcss-parcel-import');\n\nconst cssInput = `\n  @parcel-import '../mixins.pcss';\n  .container {\n    color: var(--primary-color);\n  }\n`;\n\nasync function processCss() {\n  try {\n    const result = await postcss([postcssParcelImport()]).process(cssInput, { from: 'src/app.css' });\n    console.log('Processed CSS:\\n', result.css);\n    console.log('Warnings:\\n', result.warnings().toString());\n  } catch (error) {\n    console.error('PostCSS processing error:', error);\n  }\n}\n\nprocessCss();\n\n/* \nNote: For this plugin to actually 'fix' an @import issue, \n      it needs to be run within the context of an affected \n      Parcel v1 build process. Running it standalone with \n      PostCSS will process the custom @parcel-import rule \n      but won't perform actual file inlining without further \n      custom PostCSS resolver logic or integration into Parcel.\n      The example above merely demonstrates plugin invocation.\n*/","lang":"javascript","description":"Demonstrates how to load and apply the `postcss-parcel-import` plugin using the PostCSS API."},"warnings":[{"fix":"Migrate to Parcel v2 (`parcel` package) where the original bug is resolved. Do not use `postcss-parcel-import` with modern Parcel versions. For standard CSS `@import` handling, Parcel's built-in capabilities or `postcss-import` are typically sufficient.","message":"This package is a temporary solution for a bug in `parcel-bundler` (Parcel v1), which has been deprecated. The bug (parcel-bundler/parcel#1165) was closed in 2018. This plugin is no longer necessary for current versions of Parcel.","severity":"deprecated","affected_versions":">=0.0.1"},{"fix":"Replace all instances of `@parcel-import` with standard `@import` rules, and ensure your build setup correctly handles CSS imports (e.g., using `postcss-import` if needed, or relying on Parcel's native import resolution).","message":"The custom `@parcel-import` syntax introduced by this plugin is non-standard CSS. If this plugin is removed without updating affected stylesheets, any `@parcel-import` rules will result in invalid CSS.","severity":"breaking","affected_versions":">=0.0.1"},{"fix":"Avoid using this package in new projects. For existing projects, prioritize migration away from Parcel v1 and this plugin.","message":"The plugin is archived and read-only on GitHub since March 2, 2022, and has not received updates since 2018. It is not compatible with modern PostCSS or Parcel ecosystems.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"`npm install postcss-parcel-import` or `yarn add postcss-parcel-import`","cause":"The package is not installed or the path is incorrect.","error":"Error: Cannot find module 'postcss-parcel-import'"},{"fix":"Ensure that your PostCSS plugin order correctly places import-handling plugins (like `postcss-import`) at the beginning of the plugin chain, *before* any plugins that consume imported CSS features such as variables or mixins. For Parcel v2, rely on its native `@import` resolution or `postcss-import` in your `.postcssrc` file.","cause":"This error often occurs when PostCSS plugins that rely on imported variables (like `postcss-simple-vars`) run *before* an import plugin (like `postcss-parcel-import` or `postcss-import`) has inlined the CSS containing those variable definitions. This was precisely the core problem `postcss-parcel-import` aimed to address in Parcel v1.","error":"Undefined variable $red"}],"ecosystem":"npm","meta_description":null}