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
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
210
XSLTで作るBrainfuck処理系
makki_d
0
200
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
300
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
1
540
Blueskyのプラグインを作ってみた
hakkadaikon
1
530
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
780
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
200
Datadog RUM 本番導入までの道
shinter61
1
270
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
320
Parallel::Pipesの紹介
skaji
2
910
Use Perl as Better Shell Script
karupanerura
0
690
生成AIで日々のエラー調査を進めたい
yuyaabo
0
550
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Done Done
chrislema
184
16k
For a Future-Friendly Web
brad_frost
179
9.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
GraphQLとの向き合い方2022年版
quramy
46
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
780
Unsuck your backbone
ammeep
671
58k
Building Adaptive Systems
keathley
43
2.6k
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 ( ^◡^ )