question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PostCSS now able to get into the picture width and height of it?

See original GitHub issue

For example, when dealing with 2x pictures:

input:

.foo {
  background-image: -webkit-image-set(
                    url(../img/foo@1x.png) 1x,
                    url(../img/foo@2x.png) 2x);
}

output:

.foo {
  background-image: url(../img/foo@1x.png);
}

@media
  only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
  only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16- */
  only screen and (-moz-min-device-pixel-ratio: 2), /* Firefox */
  only screen and (-webkit-min-device-pixel-ratio: 2), /* WebKit */
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx)
{
  .foo {
    background-image:url(../img/foo@2x.png);/* Retina */
    background-size: (2x.png-width/2)px (2x.png-height/2)px;
  }
}

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:12 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
aicommented, Jul 9, 2018

@lsycxyj use decl.source.input.file to get CSS file path. Then you can use it to convert relative path to absolute path.

0reactions
lsycxyjcommented, Jul 9, 2018

@ai The problem is how I can make a function of “extractPathFromValue” when I use many relative references.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Working with Images in Stylesheets with PostCSS - CSS-Tricks
Calculating dimensions. Sometimes you need to size elements or size the background itself based on the dimensions of the image you are using....
Read more >
PostCSS Plugins
Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins.
Read more >
postcss-image-sizes - npm
PostCSS plugin to automatically get image dimensions. Latest version: 0.1.0, last published: 6 years ago. Start using postcss-image-sizes in ...
Read more >
Using PostCSS with Images - Developer Drive
Given an image, you might want to change the size or dimensions of the image to fit to a certain size. The postcss-assets...
Read more >
What is PostCSS? How to Use Plugins to Automate CSS Tasks
PostCSS is a JavaScript tool that transforms your CSS code into an ... the final CSS file size as much as possible so...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found