PostCSS Config Generator Prompt
Generate the smallest version-compatible PostCSS configuration from supplied build-tool, framework, plugin, module-format, browser, and validation facts.
Prompt Template
You are a senior CSS build-tooling engineer generating the smallest maintainable PostCSS configuration only from the repository facts, installed versions, package module mode, framework, bundler, CSS entry points, required transformations, browser support policy, plugin documentation, and validation output I provide. First determine from exact installed versions and dated official documentation whether the framework or bundler already configures PostCSS, whether a custom file is necessary, which filename and export syntax are supported, and which behavior belongs in PostCSS, the framework, the bundler, CSS, Browserslist, or another tool. Treat plugin order, ESM and CommonJS, synchronous and asynchronous plugins, imports, nesting, custom syntax, vendor prefixing, future CSS transforms, minification, modules, source maps, environment conditions, monorepo roots, and editor or type support as separate compatibility concerns. Never invent versions, plugins, package names, config keys, imports, export formats, browser targets, paths, defaults, compatibility claims, or successful builds. Project purpose and deployment target: [details] Sanitized repository tree and CSS entry points: [paste] Exact runtime, package-manager, framework, bundler, PostCSS, and plugin versions: [verified or unknown] Package module mode and config filenames supported by the installed toolchain: [ESM, CommonJS, mixed, unknown] Existing PostCSS, framework, bundler, CSS Modules, preprocessor, and Browserslist configuration: [paste sanitized content or none] Development, CSS build, application build, type-check, lint, test, and preview commands: [details] Required CSS transformations and evidence for each: [details] Framework-owned or bundler-owned CSS behavior: [verified details or unknown] Plugins requested, installed package names, versioned options, and documented order constraints: [details] Import handling and CSS dependency resolution: [details or none] Nesting or future-syntax requirements and syntax ownership: [details or none] Vendor-prefix and browser-support policy: [verified targets or unknown] Minification ownership and production-only behavior: [details or unknown] CSS Modules, custom syntax, preprocessors, source maps, and generated files: [details] Monorepo package boundary, config discovery root, and shared settings: [details or none] Exact sanitized error, warning, or unexpected CSS output: [paste] Security and privacy boundary: [no private source, registry tokens, internal URLs, customer data, or secrets] Validation available: [effective config, transformation fixture, dev server, production build, output CSS inspection, browser checks] Output scope: [new minimal config, migration, audit, troubleshooting] Provide: 1. An assumptions table marking every version, config owner, filename, module format, plugin, import, option, path, browser target, environment condition, and order constraint as verified, inferred, or unknown. 2. A need-and-ownership decision for custom PostCSS config versus framework or bundler defaults, citing the supplied dated documentation. 3. Complete minimal content for only the required configuration file, using version-supported export syntax, real installed package names, and placeholders for unresolved values. 4. A plugin pipeline table showing input, transformation, order dependency, output, environment, and owning tool for every stage. 5. A module-format and config-discovery check covering filename, package mode, monorepo root, working directory, and how the build tool loads the file. 6. A browser-support plan that keeps targets in their verified owner and does not invent a compatibility matrix. 7. A conflict review for framework defaults, preprocessors, CSS Modules, nesting implementations, duplicate import handling, prefixing, minification, and source maps. 8. A small diagnostic CSS fixture that proves only the requested transformations, with expected output described without fabricating command results. 9. Version-appropriate validation commands for config loading, the diagnostic fixture, development behavior, production build, output inspection, source maps, representative browsers, and CI. 10. A final audit for unsupported syntax, wrong export mode, missing packages, duplicate transforms, unsafe broad imports, reordered rules, unexpected asset URLs, lost source maps, secret exposure, and claims not backed by output. Do not install packages, overwrite framework-owned settings, add fashionable plugins without a demonstrated requirement, weaken browser support to make a build pass, or claim success without running the available validation. Ask for missing versions and errors or leave explicit placeholders rather than guessing.
Example Output
Verified Inputs
The supplied package has exact runtime, bundler, and PostCSS versions, a confirmed ESM package mode, one CSS entry point, and one installed plugin required by the framework. No independent import, nesting, prefixing, minification, custom-syntax, CSS Modules, source-map, or environment requirement has been demonstrated.
Recommended Shape
Use the version-supported ESM config filename and export only the verified framework plugin with its documented options. Leave imports, browser targets, minification, modules, and source maps with their current owners. Do not add duplicate transformations.
Validation Boundary
Load the effective config, transform a minimal fixture, run development and production builds, inspect the emitted CSS and source maps, then repeat the build in CI. A config that parses does not prove plugin order, asset resolution, browser compatibility, or output correctness.
Tips for Best Results
- ๐กProvide exact PostCSS, framework, bundler, runtime, package-manager, and plugin versions before requesting a config.
- ๐กCheck what the framework and bundler already own so the file does not duplicate imports, nesting, prefixing, or minification.
- ๐กValidate one diagnostic CSS fixture, development, production output, source maps, representative browsers, and CI separately.
Frequently Asked Questions
What is the PostCSS Config Generator Prompt prompt?
Generate the smallest version-compatible PostCSS configuration from supplied build-tool, framework, plugin, module-format, browser, and validation facts. It's a free ChatGPT prompt template from our Coding collection โ copy it, fill in the bracketed variables, and paste it into your AI tool.
Which AI tools work with this prompt?
It's written and tested for ChatGPT, Claude and Gemini. Any AI assistant that accepts free-form text prompts will handle it well.
How do I customize this ChatGPT prompt?
Replace the bracketed variables โ such as [details], [paste], [verified or unknown] โ with your own details before running it. Provide exact PostCSS, framework, bundler, runtime, package-manager, and plugin versions before requesting a config.
Is this prompt free to use?
Yes. Every prompt on PromptAtlas is free to copy, customize, and use โ no signup required.
Related Prompts
Code Review Assistant
Get a thorough, senior-level code review with actionable feedback on quality, security, performance, and best practices.
Debugging Detective
Systematically debug errors and unexpected behavior with root cause analysis and fix suggestions.
Code Refactoring Advisor
Transform messy, complex code into clean, maintainable, well-structured code with clear explanations.