#postcss — Public Fediverse posts

Por fin me he quitado de encima un potencial problema que me traía de cabeza. El tema de una aplicación crítica ahora se visualiza decentemente y es operativo en el #Webview que usa Microsoft en sus aplicaciones.

La solución es algo enrevesada: incluye un pipeline complejo con #gulp y #webpack usando #SASS, #PostCSS, transpilación de módulos JavaScript, un par de #polyfills, un #ponyfill, una pizca de magia arcana y varios artificios quirúrgicos. Dista de ser perfecta pero por lo menos es funcional.

Por fin me he quitado de encima un potencial problema que me traía de cabeza. El tema de una aplicación crítica ahora se visualiza decentemente y es operativo en el #Webview que usa Microsoft en sus aplicaciones.

La solución es algo enrevesada: incluye un pipeline complejo con #gulp y #webpack usando #SASS, #PostCSS, transpilación de módulos JavaScript, un par de #polyfills, un #ponyfill, una pizca de magia arcana y varios artificios quirúrgicos. Dista de ser perfecta pero por lo menos es funcional.

postcss-color-golf plugin 1.2.0 released!
https://github.com/xero/postcss-color-golf/releases/tag/1.2.0

rgb(255,0,0) → red
aliceblue → #f0f8ff
#aabbcc → #abc;
rgba(255, 170, 187) → #fab
rgba(255, 170, 187, 0.8) → #fabcc
rgb(255, 255, 255, 1) → #fff
rgb(0, 255, 0, 0.8) → #0f0c
fuchsia → #f0f

#postcss #css #csstransforms #color #codegolf #golf #plugin

#Development #Releases
Native CSS nesting support arrives in the big three browsers · The release of Firefox 117.0 completes the trifecta https://ilo.im/150a5r

_____
#WebDev #Frontend #Browser #CSS #CssNesting #Chrome #Firefox #Safari #Sass #PostCSS

Фиксим залипающий hover на мобильных устройствах

Что мы проверили: Залипающий hover на мобильных устройствах – частый баг. Раньше мы решали это просто плагином PostCSS Hover Media Feature, он оборачивает все псевдоклассы :hover в медиазапрос @media (hover: hover) {}. Так мы проверяли поддержку hover и отключали его на мобилках. Но во время тестирования одного проекта оказалось, что на некоторых устройствах hover продолжает залипать.

https://habr.com/ru/articles/955650/

#CSS #scss #postcss #plugin

every wanna golf your css color codes? yeah, me neither. just use my postcss plugin to do it for you
https://github.com/xero/postcss-color-golf

https://npmjs.com/package/postcss-color-golf

#npm #js #postcss #css #scss #sass #style #css3 #optomization #golf #codegolf

グラデーションにイージング加えるとこんなにグラデーション滑らかになるのか！
#PostCSS と #Sketchapp プラグインが提供されてる :tony_astonished:

（最近ちょっと Sketchapp にちょっと興味戻ってきてるんだよな…

𝗕𝘆, 𝗯𝘆 𝗖𝗦𝗦𝗡𝗲𝘅𝘁, 𝗵𝗲𝗹𝗹𝗼 𝗽𝗼𝘀𝘁𝗰𝘀𝘀-𝗽𝗿𝗲𝘀𝗲𝘁-𝗲𝗻𝘃:

#Node #CSS #PostCSS

https://thewhale.cc/posts/by-by-cssnext-hello-postcss-preset-env

As CSSNext is now deprecated you can use instead the Postcss plugin "PostCSS Preset Env" to lets you use modern CSS in your style sheet.

𝗕𝘆, 𝗯𝘆 𝗖𝗦𝗦𝗡𝗲𝘅𝘁, 𝗵𝗲𝗹𝗹𝗼 𝗽𝗼𝘀𝘁𝗰𝘀𝘀-𝗽𝗿𝗲𝘀𝗲𝘁-𝗲𝗻𝘃:

#Node #CSS #PostCSS

https://thewhale.cc/posts/by-by-cssnext-hello-postcss-preset-env

As CSSNext is now deprecated you can use instead the Postcss plugin "PostCSS Preset Env" to lets you use modern CSS in your style sheet.

Un-Sass’ing My CSS: Compiling Multiple CSS Files Into One, by @sturobson:

https://www.alwaystwisted.com/articles/UnSassing-my-CSS-CSS-imports

#css #sass #postcss

Compiling Multiple CSS Files Into One, by @geoff (@csstricks):

https://css-tricks.com/compiling-multiple-css-files-into-one/

#css #sass #postcss #tooling

#Development #Approaches
Compiling multiple CSS files into one · Simplify your setup with a custom script or PostCSS https://ilo.im/166t50

_____
#Files #CSS #Sass #PostCSS #JavaScript #NodeJS #Tooling #WebDev #Frontend

What We Learned From Creating PostCSS, by @sitnik_en and @travisturner.bsky.social (@evilmartians):

https://evilmartians.com/chronicles/what-we-learned-from-creating-postcss

#postcss #history #lessons #tipsandtricks

CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?

Разбираем новые возможности CSS Media Queries Level 4 — логические операторы сравнения, которые делают код более читаемым и интуитивным. От (min-width: 768px) and (max-width: 1024px) к простому (768px <= width <= 1024px) . Зачем это нужно и как с этим работать?

https://habr.com/ru/articles/929530/

#медиазапросы #media_queries #вёрстка #адаптивная_вёрстка #css #css3 #postcss #диапазоны_css

#PostCSS もそろそろ使わなくてもいいかもな…

Beautiful thingie on #postcss website.

We lost so much when dropping Sass for PostCSS.

CSS built-in nesting is awkward, static variables can be useful actually, and what's the point of dropping a consistent API with good DX if we're still transforming our stylesheets anyways?

Chaining together interoperable PostCSS modules to accomplish half of what Sass can do is nearly impossible.

#CSS #Sass #PostCSS #WebDev

After reading this, checked my existing styling as processed through autoprefixer, found the few vendor prefixes that had been added, and manually added them to my styling — so it now doesn’t require any additional tools for cross-browser compatibility.

https://weser.io/blog/vendor-prefixes-in-2024

#WebDev #VendorPrefix #Browsers #CSS #PostCSS #Autoprefixer

Post >> TIL some info about PostCSS Preset Env and Browserslist • When all else fails, I go to the source and ask.

https://www.brycewray.com/posts/2024/02/til-some-info-postcss-preset-env-browserslist/

#WebDev #CSS #PostCSS #Browserslist

Just learned something I’d hoped was true: if your project has a more updated version of browserslist than what’s in postcss-preset-env, postcss-preset-env will use the better data instead of what’s in its own browserslist dependency:

https://github.com/csstools/postcss-plugins/discussions/1299

#WebDev #CSS #PostCSS #browserslist

Post >> Using Lightning CSS with Hugo: back to the workaround • Why a clear separation between dev mode and prod mode made sense.

https://www.brycewray.com/posts/2024/02/using-lightning-css-hugo-back-workaround/

#WebDev #CSS #LightningCSS #PostCSS #SSG #Hugo

I made a contribution to browserslist:

https://github.com/browserslist/browserslist/pull/819

I have been trying to get the Lume static site generator to run inside a #Dropserver sandbox, but I have been running into all kinds of issues: some modules written for #NodeJS assume they have read permissions for the entire disk, and error out when you run them with restrictive permissions. Any project that uses #PostCSS + #autoprefixer (ie most build systems) will hit this.

https://github.com/browserslist/browserslist/issues/813

1/2

(Restoring an earlier item that I briefly removed when I encountered, and subsequently fixed, a local glitch...)

Post >> Using Lightning CSS with Hugo — without workarounds • With a little tinkering, there’s no need for that PostCSS plugin I recently mentioned.

https://www.brycewray.com/posts/2024/02/using-lightning-css-hugo-without-workarounds/

#Hugo #WebDev #CSS #LightningCSS #PostCSS #SSG

Any #PostCSS users know how I can include other CSS files with a prefix. Use case is that I want to import two files - light and dark themes for #highlightjs, but dark mode needs all selectors to be scoped with an additional `.dark` class prefix

New post >> Using Lightning CSS with Hugo • Does Hugo natively support Lightning CSS? No, but there’s a neat workaround for that.

https://www.brycewray.com/posts/2024/01/using-lightning-css-hugo/

#LightningCSS #CSS #WebDev #Hugo #SSG #PostCSS

...well I did promise a part 3, so let's close it off!

JAVASCRIPT WEB TOOLS.... but a Trading Card Game! (PART 3 of 3)

21: #PostCSS - "A tool for transforming CSS with JavaScript plugins."

Mit `@apply` macht #Svelte und #Tailwind durchaus Spaß. Caveat: #PostCSS muss an sein.

Как автоматизировать использование дизайн токенов с помощью Stylelint и PostCSS

Привет, Хабр! Меня зовут Саша и вот уже 7 лет я работаю фулстек разработчиком и пишу на C# и TypeScript/React. Сегодня я хотел бы поделиться своим небольшим успехом в автоматизации. В какой-то момент я понял, что во время код ревью я указываю разработчикам на одни и те же ошибки. Но, что ещё хуже, я сам время от времени допускаю эти ошибки. Сегодня хочу рассказать об одной из таких проблем, которую я решил с помощью PostCSS + Stylelint, и о том, как я это сделал. Статья будет полезна для разработчиков, которые уже используют или собираются использовать дизайн токены. Начнём!

https://habr.com/ru/articles/779492/

#javascript #stylelint #postcss #дизайнтокены #автоматизация #cssпеременные #линтеры #typescript #плагины

Looking to move away from Sass (#SCSS) to pure #CSS now that pretty much all functionality exists in #CSS. The only remaining feature that I would need some kind of processor/bundler for is for combining different files (I like to separate everything).

Any tips for a good bundler? Is #PostCSS the thing to go for?

#WebDev #WebDevelopment

#Development #Reviews
CSS is fun again · Why it’s time to revisit CSS if you have lost sight of it https://ilo.im/15ek6d

“The pace of new features has accelerated so much, that I envy those who are just learning CSS today.” — Jeff Sandberg

_____
#WebDev #Frontend #CSS #Sass #PostCSS

@nachtfunke ah. okay. thanks for that clarification. that makes sense actually. but is that specific to sass?
Are you the guy* who was talking about #PostCSS ?

( *RE: sleep disorder. sometimes zombie functioning. i remember tags and avatars. but it's kind of like trying to remember a near blackout. function also of very poor sleep habits, no real schedule. a person like me needs strict discipline to avoid those symptons )

Starting to think about transitioning off of Sass to “modern CSS” with postcss-preset-env for downlevel transformation. Mostly because someday we’ll have native CSS nesting support which should really reduce the size of stylesheets. I haven’t found a great PostCSS replacement for inlined constants like Sass has though. #CSS #postcss #sass

Waiting for Safari 17 to test the PostCSS plugin to use JXL in the CSS background

https://github.com/nucliweb/jxl-in-css

#JPEGXL #JXL #PostCSS #CSS #ImagePerf #ProductPerf #WebPerf

Progress on all fronts!
1. My private website refactoring is almost done: typography for posts, most layouts, and I just enjoy #PostCss & #CSSCustomProperties.
2. I was able to test the GreenKayak app with several users and improved the overall flow a lot. It got simpler and stuff like a FAB was removed as most people found this confusing.

Progress on all fronts!
1. My private website refactoring is almost done: typography for posts, most layouts, and I just enjoy #PostCss & #CSSCustomProperties.
2. I was able to test the GreenKayak app with several users and improved the overall flow a lot. It got simpler and stuff like a FAB was removed as most people found this confusing.

Progress on all fronts!
1. My private website refactoring is almost done: typography for posts, most layouts, and I just enjoy #PostCss & #CSSCustomProperties.
2. I was able to test the GreenKayak app with several users and improved the overall flow a lot. It got simpler and stuff like a FAB was removed as most people found this confusing.

Progress on all fronts!
1. My private website refactoring is almost done: typography for posts, most layouts, and I just enjoy #PostCss & #CSSCustomProperties.
2. I was able to test the GreenKayak app with several users and improved the overall flow a lot. It got simpler and stuff like a FAB was removed as most people found this confusing.

I also needed to deal with the SCSS, which #ParcelJS can luckily also build. @zner0L had to update his iconfont plugin with support for #PostCSS 8 (https://github.com/zner0L/postcss-fonticons/releases/tag/2.0.0).

I ran into some unfortunate incompatibilities between libsass (which #Hugo uses) and dart-sass (which #ParcelJS uses), which cause a lot of annoying deprecation warnings in the build output (see https://github.com/datenanfragen/website/pull/902#issue-1269637575). *shrug* 4/9

postcss-color-golf plugin 1.2.0 released!
https://github.com/xero/postcss-color-golf/releases/tag/1.2.0

rgb(255,0,0) → red
aliceblue → #f0f8ff
#aabbcc → #abc;
rgba(255, 170, 187) → #fab
rgba(255, 170, 187, 0.8) → #fabcc
rgb(255, 255, 255, 1) → #fff
rgb(0, 255, 0, 0.8) → #0f0c
fuchsia → #f0f

#postcss #css #csstransforms #color #codegolf #golf #plugin

postcss-color-golf plugin 1.2.0 released!
https://github.com/xero/postcss-color-golf/releases/tag/1.2.0

rgb(255,0,0) → red
aliceblue → #f0f8ff
#aabbcc → #abc;
rgba(255, 170, 187) → #fab
rgba(255, 170, 187, 0.8) → #fabcc
rgb(255, 255, 255, 1) → #fff
rgb(0, 255, 0, 0.8) → #0f0c
fuchsia → #f0f

#postcss #css #csstransforms #color #codegolf #golf #plugin

postcss-color-golf plugin 1.2.0 released!
https://github.com/xero/postcss-color-golf/releases/tag/1.2.0

rgb(255,0,0) → red
aliceblue → #f0f8ff
#aabbcc → #abc;
rgba(255, 170, 187) → #fab
rgba(255, 170, 187, 0.8) → #fabcc
rgb(255, 255, 255, 1) → #fff
rgb(0, 255, 0, 0.8) → #0f0c
fuchsia → #f0f

#postcss #css #csstransforms #color #codegolf #golf #plugin

postcss-color-golf plugin 1.2.0 released!
https://github.com/xero/postcss-color-golf/releases/tag/1.2.0

rgb(255,0,0) → red
aliceblue → #f0f8ff
#aabbcc → #abc;
rgba(255, 170, 187) → #fab
rgba(255, 170, 187, 0.8) → #fabcc
rgb(255, 255, 255, 1) → #fff
rgb(0, 255, 0, 0.8) → #0f0c
fuchsia → #f0f

#postcss #css #csstransforms #color #codegolf #golf #plugin

CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?

Разбираем новые возможности CSS Media Queries Level 4 — логические операторы сравнения, которые делают код более читаемым и интуитивным. От (min-width: 768px) and (max-width: 1024px) к простому (768px <= width <= 1024px) . Зачем это нужно и как с этим работать?

https://habr.com/ru/articles/929530/

#медиазапросы #media_queries #вёрстка #адаптивная_вёрстка #css #css3 #postcss #диапазоны_css

CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?

Разбираем новые возможности CSS Media Queries Level 4 — логические операторы сравнения, которые делают код более читаемым и интуитивным. От (min-width: 768px) and (max-width: 1024px) к простому (768px <= width <= 1024px) . Зачем это нужно и как с этим работать?

https://habr.com/ru/articles/929530/

#медиазапросы #media_queries #вёрстка #адаптивная_вёрстка #css #css3 #postcss #диапазоны_css

CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?

Разбираем новые возможности CSS Media Queries Level 4 — логические операторы сравнения, которые делают код более читаемым и интуитивным. От (min-width: 768px) and (max-width: 1024px) к простому (768px <= width <= 1024px) . Зачем это нужно и как с этим работать?

https://habr.com/ru/articles/929530/

#медиазапросы #media_queries #вёрстка #адаптивная_вёрстка #css #css3 #postcss #диапазоны_css

Any #PostCSS users know how I can include other CSS files with a prefix. Use case is that I want to import two files - light and dark themes for #highlightjs, but dark mode needs all selectors to be scoped with an additional `.dark` class prefix

Any #PostCSS users know how I can include other CSS files with a prefix. Use case is that I want to import two files - light and dark themes for #highlightjs, but dark mode needs all selectors to be scoped with an additional `.dark` class prefix

Any #PostCSS users know how I can include other CSS files with a prefix. Use case is that I want to import two files - light and dark themes for #highlightjs, but dark mode needs all selectors to be scoped with an additional `.dark` class prefix

Any #PostCSS users know how I can include other CSS files with a prefix. Use case is that I want to import two files - light and dark themes for #highlightjs, but dark mode needs all selectors to be scoped with an additional `.dark` class prefix

In fact, AFAIK #Sass was the very first thing with any concept like that… #Webpacker, #Typescript, #PostCSS, #Less, and all are children of #SassCSS !