postcss/postcss

Transforming CSS with JS plugins

Mattias Hällkvist

@emattias

ok, how can I with postcss get the value of a sass variable?

Andrey Sitnik

@ai

@emattias postcss doesn’t parse SCSS too

you need to use postcss-scss parser

this parse parses $var: 1 as a $var declaration with 1

so it doesn’t really execute SCSS

if you have color: $black in SCSS, you will have { prop: 'color', value: '$black' }

Mattias Hällkvist

@emattias

I want to build a stylelint plugin to only allow using a specified list of sass-variables for color values

Andrey Sitnik

@ai

yeap, you can do it

you can use simple regexp to find a variable name in decl.value

Mattias Hällkvist

@emattias

Ok, thanks!

Mattias Hällkvist

@emattias

what are ways to get all the sass variables defined in a file?

Andrey Sitnik

@ai

@emattias

root.walkDecls(decl => {
  if (decl.prop.startsWith('$') {
    console.log(decl.prop)
  }
})

Mattias Hällkvist

@emattias

Thanks!

mrAzay

@mrAzay

I use the precss. How to import a css file with variables so that other files see these variables?

Andrey Sitnik

@ai

@mrAzay use postcss-import to inject CSS files with variables into all files which will use this variables

another way is to use variables option

Vinay

@vinaypillai

For anyone who's interested I recently wrote an RGB/HEX/HSL/XYZ/LAB/LCHab color converter: https://github.com/vinaypillai/ac-colors
https://dev.to/vinaypillai/lch-colors-and-why-you-should-be-using-them-plus-a-package-to-help-bbc

Jonathan Neal

@jonathantneal

@vinaypillai how does it compare to https://github.com/jonathantneal/convert-colors? I’m open to consolidating if there are issues you’ve found and resolved.

behnam rahmani

@b-rahmani

hi -in set autoprefixer but it not work "postcss --use autoprefixer -c option.json css/style.comp.css -o css/style.prefix.css

Ryan Zimmerman

@RyanZim

-c option sets directory to look for postcss config files with standard config names: https://github.com/michael-ciniawsky/postcss-load-config#usage

Also, either you're going to want to use a config file OR the --use option, not both

If after changing that, it's still not working, post an example snippet that isn't getting prefixed, your autoprefixer version, and browserslist config.

ShadyMind

@ShadyMind

Hi everybody! I cant find solution, how collect css variables from all passed files to one variable and after handling all files write collected data to file. Can anyone tell me where to dig for solution?

Andrey Sitnik

@ai

@ShadyMind I am not sure that there is plugin for it. You can write your own custom plugin, it should be not hard

ShadyMind

@ShadyMind

@ai Thanks for answer. But now Iam write new postcss plugin and cant find solution) Have you any ideas how that can be acheived in plugin?

I think i need a callback (or promise resolution) for all files handles^ but i cant find any API for that, even on http://api.postcss.org/

Andrey Sitnik

@ai

root.walkDecls(decl => {
  if (decl.prop.startsWith('--')) {
    variables.push(decl)
  }
})

this code collect custom properties from the file

you can use any postcss runner (like postcss-cli) to run it accorss multiple files

Zgjim Gjonbalaj

@zgjimgjonbalaj

Hey all, quick question any chance we can change the mixin name for postcss-custom-media from '@media' to say '@bp'? I am concerned that using original will have a conflict with original approach by prev devs who used actual media queries in CSS files '@media all and (min-width: xxx) {}'

Andrey Sitnik

@ai

@zgjimgjonbalaj I am not sure that we have an option for this

Zgjim Gjonbalaj

@zgjimgjonbalaj

@ai Thanks for your response, I guess may have to remove entirely. Was looking for a quick clean elegant approach any other options you can recommend and/or would this conflict you think with typed out queries?

I do not see any issues or errors popping up currently but figured it may cause problems though considering the original queries are not typed out as a function '@media(--bp)'

Andrey Sitnik

@ai

@zgjimgjonbalaj as I know CSSWG are not sure about custom media

I recoomend to use non-standard mixins by postcss-mixin or non-standard postcss-simple-vars

unfortunately, CSSWG are very bad in creating syntax sugar drafts, so it is hard to create a good CSS syntax arround future specs

Zgjim Gjonbalaj

@zgjimgjonbalaj

I thought postcss-media-queries output to standard CSS media queries? May have misunderstood there. I did attempt to use a mixin but may revisit back again. Thanks for your help!

Andrey Sitnik

@ai

@zgjimgjonbalaj yeap, it is converted to standard CSS media queries

CSS Custom Media was created according to CSS draft from CSSWG, where was suggested official new syntax to CSS

so it is not some custom sytax sugar, but how CSSWG saw the future of CSS

but at the end, CSSWG changed mind about CSS Custom Media and now nobody is sure that this draft will be part of CSS

Zgjim Gjonbalaj

@zgjimgjonbalaj

Ah i see, back to the drawing board! I have not been following their recommendations/suggestions and appreciate the information. I think i'm going to go that route of just creating a custom mixin with @mixin-content and follow that.

JimMorrison723

@JimMorrison723

Hello!
I want to create a stylelint plugin/rule for my project that uses scss files, and i need postcss for that. Is this the right place to ask questions about that? (reading back a little - it might be..)
I want to get an imported file parse - i mean if any declarations has mixins in it, i want it to be there (so basically -> read file -> make css -> and use that information in the file i am currently linting).
I use fs to read the file, but i am lost the "make css" part, that i can use.
Can anyone help me here? Kinda lost in the docs :/

🐙 Julien Kirch 🐙

@archiloque_twitter

Hello, there is a long-standing bug in Safari that require adding line-height: 0vw; to the pages body for responsive fonts size, see for example seaneking/postcss-responsive-type#15 or twbs/rfs#14 . When I try to use it with cssnano the vwis stripped, which makes sense for all other cases but this one. Is there a workaround for this case and/or should I open a ticket for this ? (I checked the project's tickets and doc and found nothing mentioning it, sorry if it's documented somewhere)

Andrey Sitnik

@ai

@archiloque_twitter cssnano is a modular minimizer. You can find plugin, which minimize units and disable it

🐙 Julien Kirch 🐙

@archiloque_twitter

@ai Disabling the convertValues plugin worked, we should be fine with the few things that are unoptimized because of this, thanks !

🐙 Julien Kirch 🐙

@archiloque_twitter

And should I open an issue about this to ask for an exception for this case to the plugin ?

Andrey Sitnik

@ai

@archiloque_twitter yeap, you can try to open an issue

🐙 Julien Kirch 🐙

@archiloque_twitter

Thanks

Marcello

@marcebdev

So I've set up postcss-preset-env running with the default stage 2 its working properly for chrome and firefox transpiling down but Safari is still not working... is there something else I need to be doing?

Where communities thrive

People

Repo info

Activity