How to use postcss-url - 10 common examples

url: (...args) => { // TODO: HACK: postcss-url will return asset-url relative to process.cwd(), so calc the relative asset-url again
                // console.log('HACK:', args)
                const remappedUrl = postcssUrlCopy(...args)
                // console.log('HACK:', { remappedUrl, hackedUrl: remappedUrl && normalize(relative(outputRoot, remappedUrl)) })
                return remappedUrl && normalize(relative(outputRoot, remappedUrl))
              },
            })

export const processPostCss = stylePath =>
    postcss(postcssConfig, postcssUrl({ url: 'inline' })).process(fs.readFileSync(stylePath, 'utf-8'), {
        from: stylePath
    });

});
    });

    if (/^\.{1,2}\/|^\w+\//.test(asset.url)) {
      return winPath(
        `/${path.relative(
          path.resolve(options.cwd, options.rootDir),
          asset.absolutePath
        )}`
      );
    }

    return asset.url;
  }

  return purl({
    ...(options.postcss?.url ?? {}),
    url: options.postcss?.url?.inline ? 'inline' : copy,
    maxSize: options.postcss?.url?.maxSize ?? 8,
    fallback: copy,
    basePath: path.resolve(options.cwd, options.rootDir),
    assetsPath: path.resolve(options.cwd, options.output),
  });
}

export default function(URL) {
  const pluginArr = [lost(), postcssNested(), postcssCssnext()];
  return URL
    ? pluginArr.concat(
        postcssUrl({
          url: url => url.replace(/^\/+/, '')
        })
      )
    : pluginArr;
}

const wxssUrlLoader: webpack.loader.Loader = function wxssUrlLoader(source) {
  const done = this.async()

  const file = this.resourcePath

  const options = {
    from: file,
  }

  const plugins = [postcssUrl({ url: 'inline' })]

  postcss(plugins)
    .process(source, options)
    .then(({ css }) => {
      if (done) {
        done(null, css)
      }
    })
    .catch((error: Error) => done && done(error))
}

{
        resolveFileUrl({ fileName }) {
          return JSON.stringify("/" + fileName);
        }
      },
      !prerender && cssModuleTypes("src"),
      postcss({
        minimize: true,
        modules: {
          generateScopedName: "[hash:base64:5]"
        },
        namedExports(name) {
          return name.replace(/-\w/g, val => val.slice(1).toUpperCase());
        },
        plugins: [
          postCSSUrl({
            url: "inline"
          })
        ]
      }),
      constsPlugin({
        version: pkg.version,
        nebulaSafeDark: nebulaColor,
        prerender
      }),
      glsl({ minify: !prerender }),
      ejsAssetPlugin("./src/manifest.ejs", "manifest.json", {
        data: {
          nebulaSafeDark: nebulaHex
        }
      }),
      assetPlugin({

async function repackStyles (assets) {
  let collected = []
  let fileCollector = postcssUrl({
    url ({ url }, dir, ops, decl) {
      let media = decl.parent.parent
      let rule = decl.parent
      if (media && media.name === 'media') {
        if (!rule.selector.includes('html.is-dark')) {
          collected.push([media.params, url])
        }
      } else {
        collected.push([undefined, url])
      }
      return url
    }
  })
  let processor = postcss([fileCollector, combineMedia])
  await Promise.all(assets.get(/\.css$/).map(async file => {
    let css = await fs.readFile(file)

const postProcessCss = css => {
    postcss(processors)
      .use(url({
        url: 'inline',
        basePath: path.resolve(__dirname, 'src/library')
      }))
      .process(css, {
        from: undefined
      })
      .then(result => {
        result.warnings().forEach(function (warn) {
          log.warn(warn.toString());
        });
        styleFile = result.css;
        callback(null, styleFile);
      });
  };

outFile: this.targetPath,
      sourceMap: this.sourceMap,
      outputStyle: this.outputStyle,
      sourceMapEmbed: this.sourceMap,
      includePaths: [
        resolve(__dirname, '../../../../node_modules'),
      ],
      importer: this.theme === 'dark' ? DARK_THEME_IMPORTER : undefined
    });

    const processor = postcss([ autoprefixer ]);

    const urlAssets = [];

    if (this.urlImports) {
      processor.use(postcssUrl({
        url: (request) => {
          if (!request.pathname) {
            return request.url;
          }

          const asset = makeAsset(request, (
            request.pathname.startsWith('ui/assets')
              ? {
                path: resolve(UI_ASSETS_DIR, relative('ui/assets', request.pathname)),
                root: UI_ASSETS_DIR,
                boundry: UI_ASSETS_DIR,
                urlRoot: `ui/`,
              }
              : {
                path: resolve(this.sourceDir, request.pathname),
                root: this.sourceDir,

export default bundler => [
  postcssImport({ addDependencyTo: bundler }),
  postcssUrl('inline'),
  postcssExtend(),
  postcssFocus(),
  autoprefixer(),
  precss(),
  cssnano(),
];