d523f0f600
Document application modes (development/debug/production) Add global file drop handler, order column normalization, SPA hash fix Serve CDN assets via /_vendor/ URLs instead of merging into bundles Add production minification with license preservation Improve JSON formatting for debugging and production optimization Add CDN asset caching with CSS URL inlining for production builds Add three-mode system (development, debug, production) Update Manifest CLAUDE.md to reflect helper class architecture Refactor Manifest.php into helper classes for better organization Pre-manifest-refactor checkpoint: Add app_mode documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
PostCSS Calc 
PostCSS Calc lets you reduce calc() references whenever it's possible.
When multiple units are mixed together in the same expression, the calc()
statement is left as is, to fallback to the W3C calc() implementation.
Installation
npm install postcss-calc
Usage
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var calc = require("postcss-calc")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css
var output = postcss()
.use(calc())
.process(css)
.css
Using this input.css:
h1 {
font-size: calc(16px * 2);
height: calc(100px - 2em);
width: calc(2*var(--base-width));
margin-bottom: calc(16px * 1.5);
}
you will get:
h1 {
font-size: 32px;
height: calc(100px - 2em);
width: calc(2*var(--base-width));
margin-bottom: 24px
}
Checkout tests for more examples.
Options
precision (default: 5)
Allow you to define the precision for decimal numbers.
var out = postcss()
.use(calc({precision: 10}))
.process(css)
.css
preserve (default: false)
Allow you to preserve calc() usage in output so browsers will handle decimal precision themselves.
var out = postcss()
.use(calc({preserve: true}))
.process(css)
.css
warnWhenCannotResolve (default: false)
Adds warnings when calc() are not reduced to a single value.
var out = postcss()
.use(calc({warnWhenCannotResolve: true}))
.process(css)
.css
mediaQueries (default: false)
Allows calc() usage as part of media query declarations.
var out = postcss()
.use(calc({mediaQueries: true}))
.process(css)
.css
selectors (default: false)
Allows calc() usage as part of selectors.
var out = postcss()
.use(calc({selectors: true}))
.process(css)
.css
Example:
div[data-size="calc(3*3)"] {
width: 100px;
}
Related PostCSS plugins
To replace the value of CSS custom properties at build time, try PostCSS Custom Properties.
Contributing
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
git clone git@github.com:postcss/postcss-calc.git
git checkout -b patch-1
npm install
npm test