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
230
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
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.1k
生成AIを活用した初学者向けPython講座
soogie
1
140
Advance Your Career with Open Source
ivargrimstad
0
190
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
110
プログラマのための作曲入門
cheebow
0
510
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
850
CSC305 Lecture 01
javiergs
PRO
1
380
Swift Concurrency - 状態監視の罠
objectiveaudio
2
280
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
2
280
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
330
Featured
See All Featured
Balancing Empowerment & Direction
lara
4
670
Unsuck your backbone
ammeep
671
58k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
950
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Adaptive Systems
keathley
43
2.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
Embracing the Ebb and Flow
colly
88
4.8k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Into the Great Unknown - MozCon
thekraken
40
2.1k
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 ( ^◡^ )