Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PostCSS - Far beyond preprocessed
Search
Fernando Fleury
January 27, 2016
Programming
1
220
PostCSS - Far beyond preprocessed
A brief point of view of PostCSS
Fernando Fleury
January 27, 2016
Tweet
Share
More Decks by Fernando Fleury
See All by Fernando Fleury
PostCSS - Beyond preprocessors
fernandofleury
12
760
Other Decks in Programming
See All in Programming
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
11
3.5k
生成AI時代のフルスタック開発
kenn
8
1k
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
tico88612
0
190
MySQL初心者が311個のカラムにNot NULL制約を追加していってALTER TABLEについて学んだ話
hatsu38
2
150
In geheimer Mission: AI Agents entwickeln
joergneumann
0
130
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
ymbigo
14
6.6k
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
3
1.6k
Doma で目指す ORM 最適解
nakamura_to
1
140
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
300
Browser and UI #2 HTML/ARIA
ken7253
2
190
파급효과: From AI to Android Development
l2hyunwoo
0
170
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
dwchiang
0
150
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
RailsConf 2023
tenderlove
30
1.1k
Navigating Team Friction
lara
185
15k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Faster Mobile Websites
deanohume
307
31k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Transcript
postcss Far beyond preprocessed
Sobre fleury.io
None
Cenário atual
github.com/postcss/postcss
O que é
PostCSS is a tool for transforming CSS
.box { box-sizing: border-box; } .box { box-sizing: border-box; }
PostCSS is a tool for transforming CSS with JavaScript plugins
None
.box { box-sizing: border-box; } .box { -webkit-box-sizing: border-box; -moz-box-sizing:
border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } postcss-autoprefixer github.com/postcss/autoprefixer
Como funciona
Parser Plugins Stringifier .css .css
Anatomia de um plugin
Como utilizar
gulp.task('postcss', function () { var postcss = require('gulp-postcss'); return gulp.src('src/**/*.css')
.pipe(postcss([ require('autoprefixer')(), ])) .pipe(gulp.dest('build')); }); github.com/postcss/gulp-postcss
Performance github.com/postcss/benchmark
“Ah, mas instalar todos os módulos é muito chato, num
projeto pequeno eu nunca usaria.” - O chapa que não olha a documentação
npm i -D postcss-simple-var postcss-compass postcss-unix-container postcss-cron-job postcss-timezone postcss-laravel postcss-on-rails
postcss-windows postcss-dual-boot postcss-iso-burn postcss-kurumin postcss-kernel postcss-elementary-os postcss-hao123 postcss-baidu-protect postcss-pc-safe postcss-baixaki-downloader postcss-babylon-bar postcss-avast postcss-printer postcss-4shared postcss-pomodoro postcss-cpu postcss- intel postcss-megaupload postcss-vga postcss-short-circuit postcss-electron postcss- pcmegarapido postcss-adware postcss-bobrowser postcss-mobral postcss-css postcss- alabama-hot-pocket postcss-alaskan-pipeline postcss-suporte-tecnico postcss-ie7 postcss-ie5 postcss-netscape postcss-lorem-ipsum postcss-cold-reload postcss- angolarjs postcss-reativo postcss-rejectjs postcss-refluxo postcss-corotinho postcss- 51 postcss-pao-de-batata postcss-calcanhar-de-maracuja postcss-barrigudinha postcss-duelo postcss-chalise postcss-xandonzinho postcss-dolly-cola postcss-xamego postcss-dolly-citrus postcss-wesley-safadao postcss-carta-do-temer postcss-13-na-urna postcss-arte-na-praia postcss-miçanga postcss-pulserinha-do-bonfim postcss-de-humanas postcss-bolacha postcss-é-biscoito postcss-suissa postcss-wakemeupinside postcss- gotico-suave postcss-keit-amy-lee postcss-haddad-tranquilao postcss-malddad postcss- dogola postcss-3.80-nao postcss-nao-sao-so-30-centavos postcss-naovaitercopa postcss- vaitercopa postcss-ccleaner postcss-mackeeper postcss-defrag postcss-material postcss-definicoes-de-virus-foram-atualizadas postcss-league-of-lixos postcss-cszinho postcss-dotinha postcss-video-promo postcss-bauducco postcss-e-o-bambu postcss-peru postcss-picole-de-chuchu postcss-alckmin postcss-chega postcss-go-bus
npm i -D postcss-simple-vars postcss-nested postcss-mixin postcss-import
npm i -D postcss-simple-vars postcss-nested postcss-mixin postcss-import postcss-extend postcss-conditionals postcss-each
postcss-property-lookup
npm i -D precss
Mas por que parar por aí?
@alias { fs: font-size; fw: font-weight; bg: background; } .foo
{ fs: 16px; fw: 400; transition: bg 200ms ease; } .foo { font-size: 16px; font-weight: 400; transition: background 200ms ease; } postcss-alias github.com/seaneking/postcss-alias
postcss-custom-selectors (W3C specs) github.com/postcss/postcss-custom-selectors @custom-selector :--heading h1, h2, h3, h4,
h5, h6; article :--heading + p { margin-top: 0; } article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p { margin-top: 0; }
postcss-define-property github.com/daleeidd/postcss-define-property size: $height $width { height: $height; width: $width;
} .rectangle { size: 50px 100px; } .rectangle { height: 50px; width: 100px; }
doiuse (caniuse api) github.com/anandthakker/doiuse .box { transform: scaleX(2) user-select: none;
} box.css: line 2, col 3: CSS3 Transforms not supported by: IE (8) box.css: line 3, col 3: CSS user-select: none not supported by: IE (8,9)
cssgrace github.com/cssdream/cssgrace .bar { display: inline-block; opacity: .5; } .bar
{ display: inline-block; *display: inline; *zoom: 1; opacity: .5; filter: alpha(opacity=50); }
postcss-js github.com/postcss/postcss-js let prefixer = postcssJs.sync([ autoprefixer ]); let style
= prefixer({ border-radius: '10px' }); { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
.block { all: initial; } postcss-autoreset .block { ... backface-visibility:
visible; border: medium none; border-radius: 0; border-collapse: separate; border-spacing: 0; bottom: auto; box-shadow: none; ... } github.com/maximkoretskiy/postcss-autoreset
.className { color: green; background: red; } .otherClassName { composes:
className; color: yellow; } css-modules .className-x12zl { color: green; background: red; } .otherClassName-x11zl { color: yellow; } github.com/css-modules/css-modules
@svg-load nav url(img/nav.svg) { fill: #cfc; path:nth-child(2) { fill: #ff0;
} } .nav { background: svg-inline(nav); } postcss-inline-svg .nav { background: url(data:image/svg;... } github.com/TrySound/postcss-inline-svg
github.com/jonathantneal/postcss-font-magician body { font-family: 'Alice'; } font-magician @font-face { font-family:
"Alice"; font-style: normal; font-weight: 400; src: local("Alice"), local("Alice-Regular"), ... } body { font-family: "Alice"; }
github.com/assetsjs/postcss-assets body { background: resolve('foobar.jpg'); } postcss-assets body { background:
url('img/foobar.jpg'); }
atcss rtlcss csstyle cssnano postcss-cssstats postcss-sprites postcss-use postcss.parts
Essa não é a única finalidade
import fs from 'fs'; import postcss from 'postcss'; let className
= postcss.rule({ selector: '.classname' }) .append({ prop: 'color', value: 'black' }); let stylesheet = postcss.root().append(className); fs.writeFileSync('style.css', stylesheet.toResult().css); github.com/postcss/postcss/blob/master/docs/api.md
postcss é só uma ferramenta pra processar css.
Dúvidas?
Obrigado ( ^◡^ )