postcss/postcss

Transforming CSS with JS plugins

Aravind Raj Mahadevan

@aravind_hashout_gitlab

@ai Hi. I'm using postcss-css-variables, postcss-mixins, and postcss-calc.

I'm trying to use calc in a mixin.

Like so:

@define-mixin fontstyle $size, $color {
  font-size: $(size) px;
  font-size: calc($size/16) rem;
  color: $color;
}

I'm not able to use $size inside calc().

I searched on Stackoverflow and Github extensively.

Everyone suggests to wrap the variable inside #{}.

11 replies

Like so: #{$size}.

But that doesn't work.

For context, I'm trying to follow the tutorial in the book "Mastering Postcss for web design" By Alex Libby.

Second chapter.

Adi Sahar

@adi518

Do you have to return root? https://gist.github.com/adi518/c6fc67e6d5b29c792da8ff50034df1e3

2 replies

Mehmet Eyüpoğlu

@mehmeteyupoglu

How guys! I have a problem with postcss-nested plugin. When I try to run storybook, it throws me an error referring to that I should be using postcss 8, which I've already installed in my app.

9 replies

What could be the problem and the possible solution?

sachin M. nishad

@sachinMnishad_twitter

"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css" whats wrong here?

James Garbutt

@43081j

hello :wave: i've been investigating solutions recently for processing css templates with postcss. don't suppose anyone's active around here that can point me in the right direction? i'd like to extract CSS from tagged template expressions in JS files, pass it through postcss, then replace the original. is this a job for postcss, or would you rather pass responsibility to another build tool? (e.g. babel, rollup, etc) i know its doable in rollup via a plugin (yet to exist) but was hoping there'd be a solution everyone can use, not tied into a specific bundler

9 replies

James Garbutt

@43081j

maybe it would be just as painful having two build steps though tbh. as in, two pass.. passing it through rollup then passing the result through postcss (or vice versa). so maybe it does belong in a rollup plugin

Fehmi Özüseven

@fehmi

i can't get it to work. syntax highlighting is not working as expected please help

15 replies

Derek Owusu Bekoe

@derekowusubekoe

Hello, I am learning how to code for some time now. I am happy to join a community of coders who are willing to support each other in their coding journey. CSS has been a problem and I hope to get some concepts and ideas from the group. Happy New Year to everyone.

2 replies

Israil Abdulaev

@nosferatu-id

how to include multiple files in postcss? i have mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);

1 reply

夜空

@Desu_yo_ne_twitter

Hi everyone, I'm having problems with setting the parser to sugarss for postcss in nuxt.config.js. Has anyone have an experience in setting the parser property in nuxt? thanks

1 reply

Kerry Snyder

@krry

Just poppin in to say thanks! I've switched all of my web apps over from Sass to PostCSS in the past few weeks and I'm loving the versatility and the rich ecosystem of plugins and libraries.

1 reply

Kerry Snyder

@krry

What do you all use to adjust colors, by hue for example?

I'm seeing some recent insight about lab() being adjusted to our eyes, looking into it more now

Gustavo Reis

@gusbemacbe

Hello, is it possible to use postcss-url with inline URL option on a Gulp config file?

5 replies

Nimesh

@supnim

hello hello, I was wondering if i could get some help?

3 replies

i got this error and followed it to github and did what the migration told me

Andrey Sitnik

@ai

@supnim https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users#gatsby

Be sure that you added postcss to your own package.json

Nimesh

@supnim

i have and now i get this error

Andrey Sitnik

@ai

Did you update Tailwind to the latest version?

Nimesh

@supnim

yeah but ive used "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1", to work around it

Andrey Sitnik

@ai

you are using Tailwind for PostCSS 7

you need to normal Tailwind for PostCSS 8

Nimesh

@supnim

ahh okay, let me change that

Nimesh

@supnim

@ai my guy, thank you — i should have solved that by myself, feel a lil silly but anyways appreciate it bro

Andrey Sitnik

@ai

=^_^= no problem

Preston Lamb

@pjlamb12

Hey all! I'm having some issues with PostCSS in an Angular project. Here's a StackOverflow question explaining it all, but basically I can get postscss working for new Angular projects using Tailwind. But on this particular project I'm trying to include our old theme so that we have our old theme as a base, which we'll slowly replace with Tailwind. When I have both the old theme and Tailwind included, I get the error detailed in the question.

7 replies

https://stackoverflow.com/questions/65724430/exclude-file-paths-from-tailwind-config-or-postcss-loader

It seems to be that postcss doesn't know how to import a file referenced in an @import in the scss files: @import('libs/theme/scss/brand-colors') for example. brand-colors is a .scss file.

If I could either ignore the libs/theme path altogether or tell it how to import properly I think my problem would be fixed.

Calvin Reibenspieß

@calvinrbnspiess

Bildschirmfoto 2021-01-15 um 10.09.09.png

2 replies

Hi. I developed a postcss plugin which works in isolation and outputs information on console. As soon as I chain another plugin, I get no output at all. In which order are the plugins executed?

Where communities thrive

People

Repo info

Activity