{"library":"postcss-functions","title":"PostCSS JavaScript Functions","description":"postcss-functions is a PostCSS plugin that allows developers to expose JavaScript functions for direct invocation within CSS files during the build process. It enables dynamic value generation, complex calculations, and programmatic transformations of CSS properties, extending the capabilities of standard CSS. The current stable version is 4.0.2, maintaining compatibility with PostCSS v8.x. While release cadence isn't strictly defined, major version updates (like 4.0.0) indicate significant changes and active maintenance. Its key differentiator is providing a clean bridge between JavaScript logic and CSS styling without relying on preprocessors, allowing for highly customized and reusable CSS utility functions defined in JavaScript.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install postcss-functions"],"cli":null},"imports":["import functions from 'postcss-functions';","import postcss from 'postcss';","import { ProcessOptions } from 'postcss';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import fs from 'fs';\nimport postcss from 'postcss';\nimport functions from 'postcss-functions';\n\nconst inputCss = `\nbody {\n  /* Example using a custom JS function */\n  background-color: myCustomColor('darken', 'blue', 0.2);\n}\n.foo {\n  color: darken(red, 0.1);\n}\n`;\n\n// Define custom JavaScript functions to be exposed to PostCSS\nconst customFunctions = {\n  myCustomColor: (mode, color, amount) => {\n    // A more complex example, could involve external libraries\n    if (mode === 'darken') {\n      // Simplified darkening logic for demonstration\n      return `rgba(0, 0, ${Math.floor(255 * (1 - parseFloat(amount)))}, 1)`;\n    }\n    return color;\n  },\n  darken: (value, frac) => {\n    // Basic example of a function, similar to the README\n    const darkenFactor = 1 - parseFloat(frac);\n    // In a real scenario, use a color manipulation library\n    // For demo, just return a string\n    return `rgba(0, 0, ${Math.floor(255 * darkenFactor)}, 1)`;\n  }\n};\n\npostcss()\n  .use(functions({ functions: customFunctions }))\n  .process(inputCss, { from: undefined })\n  .then((result) => {\n    console.log('Processed CSS:\\n', result.css);\n  })\n  .catch((error) => {\n    console.error('PostCSS processing failed:', error);\n  });\n","lang":"typescript","description":"Demonstrates basic setup, defining custom JavaScript functions, and applying them within CSS using postcss-functions.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}