PostCSS@PostCSS

PostCSS is a tool to transform styles with JS plugins. By @sitnikcode and @evilmartians.

postcss.org/
Joined November 2014
596 Photos and videos
Load newest
PostCSS retweeted
CSS Tools@css_tools_
12 Apr 2023
#PostCSS Preset Env now has support for CSS gradient interpolation color spaces and hue interpolation methods 🎉 github.com/csstools/postcss-…
A screenshot of CSS showing the new sub features in CSS gradients. Source : .example { background: conic-gradient( in oklch longer hue, hsl(0deg 100% 75%) 0%, hsl(0deg 100% 75%) 100% ); }

ALT A screenshot of CSS showing the new sub features in CSS gradients. Source : .example { background: conic-gradient( in oklch longer hue, hsl(0deg 100% 75%) 0%, hsl(0deg 100% 75%) 100% ); }

1
7
10
3,965
Stylelint plugin to force logical property in your team. Very useful tool if you need to support Arabic or Hebrew in your app. github.com/yuschick/stylelin…
16
2,041
PostCSS retweeted
CSS Tools@css_tools_
11 Apr 2023
We also added auto fix support in @stylelint to convert media queries to the new range syntax : stylelint.io/user-guide/rule…

media-feature-range-notation | Stylelint

Specify context or prefix notation for media feature ranges.

stylelint.io
4
5
2,432
PostCSS retweeted
CSS Tools@css_tools_
11 Apr 2023
With Safari 16.4 all major browser now support the range syntax in media queries 🎉 The latest #PostCSS Preset Env contains an updated version of PostCSS Media MinMax which has full support for the range syntax. github.com/csstools/postcss-…
1
3
8
1,006
Replying to @mikeherchel @jon_neal
We (@css_tools_ ) will most likely create a stylelint plugin to do this. But it is too early for that. The specification is still fluid and being finalised. We don't want to create something that transforms your CSS into a syntax that becomes invalid in a future iteration.
1
1
4
518
Replying to @jon_neal
@jon_neal hey, are you aware of any package/script that will automatically convert a codebase from the old PostCSS nesting syntax (using at-nest) to the new syntax? Thank you :)
1
1
527
marketplace.visualstudio.com… Updated to the latest PostCSS Preset Env under the hood. Making it possible to preview gradients with different interpolation color spaces and different hue interpolation methods. (VSCode is currently running Chromium 102)
Screenshot of a gradients preview with one of the new gradient sub features from CSS.

ALT Screenshot of a gradients preview with one of the new gradient sub features from CSS.
1
3
1,398
PostCSS retweeted
CSS Tools@css_tools_
6 Apr 2023
PostCSS polyfills which recently had a large update 🎉 github.com/csstools/postcss-…
Example of the CSS color function "oklch" with a math expression : .example { color: oklch(50% 0.1 asin(-1)) }

ALT Example of the CSS color function "oklch" with a math expression : .example { color: oklch(50% 0.1 asin(-1)) }

PostCSS@PostCSS
6 Apr 2023
Want to use new oklch() color function in CSS (with help of PostCSS polyfills)? Let’s tell designers about benefits for them in using OKLCH too. With better color math they will be able to define colors by a system, not by choosing each color manually. And show them P3 colors!
2
5
1,367
Want to use new oklch() color function in CSS (with help of PostCSS polyfills)? Let’s tell designers about benefits for them in using OKLCH too. With better color math they will be able to define colors by a system, not by choosing each color manually. And show them P3 colors!
@sitnik_en@mastodon.social@sitnikcode
6 Apr 2023
We launched our open source OKLCH color picker at Product Hunt! producthunt.com/posts/oklch-… It is not about the picker itself. We want to help design community in transition to using system for choosing colors. And this system needs a good math (OKLCH).
7
14
5,951
🎉 Big thanks to @stylelint for adding postcss-angular to your list of custom syntaxes! github.com/stylelint/awesome… 🙌

GitHub - stylelint/awesome-stylelint: A list of awesome Stylelint plugins, configs, etc.

A list of awesome Stylelint plugins, configs, etc. - stylelint/awesome-stylelint

github.com
1
2
395
We launched our open source OKLCH color picker at Product Hunt! producthunt.com/posts/oklch-… It is not about the picker itself. We want to help design community in transition to using system for choosing colors. And this system needs a good math (OKLCH).
3
21
68
22,777
PostCSS retweeted
Stylelint@stylelint
3 Apr 2023
A community member has ported deprecated stylistic rules since Stylelint v15 to a plugin! Check it out if you want to use Stylelint without Prettier! github.com/elirasza/stylelin…
1
1
7
1,093
PostCSS retweeted
CSS Tools@css_tools_
3 Apr 2023
We've been busy! We've released a new plugin (already part of PostCSS Preset Env) 🥳 postcss-color-mix lets you use color-mix in any browser. We've released a blog post (with a demo) to talk about it: preset-env.cssdb.org/blog/po…

PostCSS Color Mix Function | CSS Tools

Use the color-mix function in CSS.

preset-env.cssdb.org
1
6
7
4,703
PostCSS retweeted
Stylelint@stylelint
1 Apr 2023
15.4.0 is out! It adds 1 new rule, 1 new autofix, 2 CLI flag updates, and fixes 5 bugs: stylelint.io/CHANGELOG#1540 A new version of our standard config is out too. It turns on a rule about media feature ranges: github.com/stylelint/styleli…
4
18
2,461
Just created this npmjs.com/package/postcss-fo… new #PostCSS plugin called PostCSS Fontify! It generates font-face declarations from font files in a directory, and only recognizes woff2, woff, ttf, and otf files. Hope it makes the font file usage musch easier! #webdev #css #webfonts
2
1
553
Replying to @devongovett @cheeaun
But the old version of the spec : github.com/w3c/csswg-drafts/… Both lightningcss and Safari are incorrect. I stopped work on the PostCSS plugin until all this got proper tests in WPT.
1
1
2
461
Just created my page on Github Sponsor and describe how your donation will help in my work for webdev community. The best way to say Thanks for the open source and got postcard in return. Promote helping open source in your company. github.com/sponsors/ai/
4
21
41
14,589
Stylelint `media-feature-range-notation` rule is ready to implement: github.com/stylelint/styleli…
1
1
463
Huge thanks to @SpringerNature for their $2,220 donation to Browserslist 😍🦔 springernature.com
1
2
945
Agree. In open source build step (for TS or meaningless bundler) only reduces library maintainability. All my open source (@PostCSS, @logux_io) is written in JS and have TS types in separated files (tests also is using TS to check that types and JS code are synced).
Rich Harris
@Rich_Harris
24 Mar 2023
nope, the article is correct. SvelteKit is written in JS and distributed as source code — no build step — and it's been miraculous for productivity. build steps make sense for apps, they make much less sense for libraries
3
10
3,295
Load more