Edge CSS
EdgeCSS is a collection of carefully chosen and configured PostCSS plugins.
It combines some common learnings and conventions from Sass, with some upcoming CSS4 features and adds a whole chain of fixes for a variety of browser bugs.
Features
MERGING
smart-import
Smarter @import() plugin to include other CSS, Sass, SugarSS files.
URLS/ASSETS
simple-url
Re-rebasing url()-referenced assets during processing. Respects locations of imported files and PostCSS configured output location.
assets
Asset Manager for PostCSS. For us mainly interesting for its support for detecting image dimensions and base64 based inlining.
CLEANUP
discard-comments
Discard comments in your CSS files with PostCSS. Remove all comments... we don't need them further down the line which improves performance (reduces number of AST nodes)
SASS INSPIRED
sassy-mixins
Sass-like mixins.
advanced-variables
Converts Sass-like variables and conditionals into CSS.
nested
Unwrap nested rules like how Sass does it.
LAYOUT
lost
Fractional grid system built with calc(). Supports masonry, vertical, and waffle grids.
grid-kiss
A PostCSS plugin to keep CSS grids stupidly simple
COLOR
hexrgba
Adds shorthand hex methods to rbga() values.
color-hex-alpha
Transform RGBA hexadecimal notations (#RRGGBBAA or #RGBA) to more compatible CSS (rgba())
color-function
Transform W3C CSS color function to more compatible CSS
MEDIA QUERIES
media-minmax
Writing simple and graceful Media Queries! Support for CSS Media Queries Level 4.
custom-media
Define custom Media Queries.
EFFECTS
magic-animations
Adds @keyframes from Magic Animations
will-change
Insert 3D hack before will-change property
easings
Replace easing names from http://easings.net to cubic-bezier().
pleeease-filters
Fallback for Webkit Filters property to SVG filters. Amazing stuff.
It converts all 10 CSS shorthand filters: grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast, blur, drop-shadow.
transform-shortcut
Use shorthand transform properties in CSS.
EXTENSIONS
responsive-type
Automagical responsive typography. Adds a responsive property to font-size,
line-height and letter-spacing that generates complex calc and vw based font sizes.
clearfix
Adds fix and fix-legacy attributes to the clear property, for self-clearing of children.
font-family-system-ui
Transform W3C CSS "font-family: system-ui" to a practical font-family list. See also this article by booking.com.
FIXES
gradient-transparency-fix
Fix up CSS gradients with transparency for older browsers
flexbugs-fixes
Tries to fix all of flexbug's issues
input-style
Adds new pseudo-elements to inputs for easy cross-browser styling of their inner elements. Currently, as of 0.3.0, supports range input controls only.
selector-matches
Transform :matches() W3C CSS pseudo class to more compatible CSS (simpler selectors)
pseudoelements
Add single and double colon peudo selectors
Normalizes e.g. ::before to :before for wider browser support
autoprefixer
Parse CSS and add vendor prefixes to rules by Can I Use
OPTIMIZATION
calc
Reduce calc().
zindex
Reduce z-index values.
csso
Adding the best CSS compressor to the chain.
DEVELOPER FEEDBACK
at-warn
Sass like @warn for PostCSS. Disabling internal usage of "postcss-reporter".
reporter
Log PostCSS messages to the console
License
Apache License Version 2.0, January 2004
Copyright
Copyright 2017
Sebastian Software GmbH