{"id":41747,"library":"postcss-absolute-root-url","title":"postcss-absolute-root-url","description":"PostCSS plugin that rewrites relative URL paths in CSS/SCSS to absolute URLs using the ROOT_URL environment variable. Version 0.1.3, released 2021. Simple, single-purpose tool for Meteor/Node/Webpack builds. Avoids hard-coded roots per environment. Limited configuration: enables per property. Currently no active development.","status":"maintenance","version":"0.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/softwarecreations/postcss-absolute-root-url","tags":["javascript","postcss","meteor","scss","css","url","absolute","relative","rebase"],"install":[{"cmd":"npm install postcss-absolute-root-url","lang":"bash","label":"npm"},{"cmd":"yarn add postcss-absolute-root-url","lang":"bash","label":"yarn"},{"cmd":"pnpm add postcss-absolute-root-url","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for PostCSS plugin","package":"postcss","optional":false}],"imports":[{"note":"ESM import is preferred; CommonJS require also works.","wrong":"const postcssAbsoluteRootUrl = require('postcss-absolute-root-url')","symbol":"default","correct":"import postcssAbsoluteRootUrl from 'postcss-absolute-root-url'"},{"note":"This plugin is not a replacement for postcss; it must be used as a plugin.","wrong":"import postcss from 'postcss-absolute-root-url'","symbol":"postcss","correct":"import postcss from 'postcss';\nimport plugin from 'postcss-absolute-root-url';"},{"note":"Plugin lacks TypeScript typings; may need manual declaration.","wrong":"// No wrong pattern – lack of types is known","symbol":"type definitions","correct":"// No bundled types; use @types/postcss-absolute-root-url or declare module"}],"quickstart":{"code":"import postcss from 'postcss';\nimport plugin from 'postcss-absolute-root-url';\n\nconst css = `.foo { background-image: url(images/foo.jpg); }`;\n\nprocess.env.ROOT_URL = 'https://example.com';\n\npostcss([plugin({ 'background-image': 1 })])\n  .process(css, { from: undefined })\n  .then(result => {\n    console.log(result.css);\n    // .foo { background-image: url(https://example.com/images/foo.jpg); }\n  });","lang":"javascript","description":"Shows how to use the plugin to replace relative url() in CSS with absolute URL from ROOT_URL environment variable."},"warnings":[{"fix":"Ensure ROOT_URL is set in your build script (e.g., via dotenv or shell).","message":"ROOT_URL environment variable must be set at build time; runtime changes are not reflected.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Explicitly enable necessary properties in options (e.g., 'background-image', 'src').","message":"Plugin only transforms url() references in selected properties; defaults may not include all needed properties.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure postcss-easy-import is listed first in PostCSS plugins order.","message":"postcss-easy-import must run before this plugin; otherwise imported files may not be transformed.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Test with your PostCSS version; consider forking or using alternative like postcss-url.","message":"Package has not been updated since 2021; may not work with newer PostCSS versions.","severity":"deprecated","affected_versions":">=10.0.0"}],"env_vars":null,"search_vec":"'0.1.3':25 '2021':27 'absolut':3,16,58 'activ':50 'avoid':36 'build':35 'code':39 'configur':44 'css':56 'css/scss':14 'current':48 'develop':51 'enabl':45 'environ':22,42 'hard':38 'hard-cod':37 'javascript':52 'limit':43 'meteor':54 'meteor/node/webpack':34 'path':12 'per':41,46 'plugin':7 'postcss':2,6,53 'postcss-absolute-root-url':1 'properti':47 'purpos':31 'rebas':60 'relat':10,59 'releas':26 'rewrit':9 'root':4,20,40 'scss':55 'simpl':28 'singl':30 'single-purpos':29 'tool':32 'url':5,11,17,21,57 'use':18 'variabl':23 'version':24","created_at":"2026-06-04T18:53:54.815074+00:00","updated_at":"2026-06-04T18:53:54.815074+00:00","problems":[{"fix":"Set process.env.ROOT_URL to your absolute base URL before running PostCSS.","cause":"Plugin fails when ROOT_URL is undefined","error":"Error: ROOT_URL environment variable not set"},{"fix":"Ensure CSS is valid and plugin is applied after postcss-easy-import and any other transform plugins.","cause":"Plugin receives a CSS node without expected structure (e.g., missing value property)","error":"TypeError: Cannot read properties of undefined (reading 'split')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/softwarecreations/postcss-absolute-root-url#readme","github":"https://github.com/softwarecreations/postcss-absolute-root-url","docs":null,"changelog":null,"pypi":null,"npm":"postcss-absolute-root-url","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}