在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:postcss/postcss开源软件地址:https://github.com/postcss/postcss开源编程语言:TypeScript 56.9%开源软件介绍:PostCSSPostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer PostCSS plugin is one of the most popular CSS processors. PostCSS takes a CSS file and provides an API to analyze and modify its rules (by transforming them into an Abstract Syntax Tree). This API can then be used by plugins to do a lot of useful things, e.g., to find errors automatically, or to insert vendor prefixes. Support / Discussion: Gitter For PostCSS commercial support (consulting, improving the front-end culture of your company, PostCSS plugins), contact Evil Martians at [email protected]. SponsorshipPostCSS needs your support. We are accepting donations at Open Collective. PluginsCurrently, PostCSS has more than 200 plugins. You can find all of the plugins in the plugins list or in the searchable catalog. Below is a list of our favorite plugins — the best demonstrations of what can be built on top of PostCSS. If you have any new ideas, PostCSS plugin development is really easy. Solve Global CSS Problem
Use Future CSS, Today
Better CSS Readability
Images and Fonts
Linters
Other
SyntaxesPostCSS can transform styles in any syntax, not just CSS. If there is not yet support for your favorite syntax, you can write a parser and/or stringifier to extend PostCSS.
Articles
More articles and videos you can find on awesome-postcss list. Books
UsageYou can start using PostCSS in just two steps:
CSS-in-JSThe best way to use PostCSS with CSS-in-JS is module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'postcss-loader'],
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
}
]
}
} Then create module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
} ParcelParcel has built-in PostCSS support. It already uses Autoprefixer
and cssnano. If you want to change plugins, create module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
} Parcel will even automatically install these plugins for you.
WebpackUse module.exports = {
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
}
]
}
} Then create module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
} GulpUse gulp.task('css', () => {
const postcss = require('gulp-postcss')
const sourcemaps = require('gulp-sourcemaps')
return gulp.src('src/**/*.css')
.pipe( sourcemaps.init() )
.pipe( postcss([ require('autoprefixer'), require('postcss-nested') ]) )
.pipe( sourcemaps.write('.') )
.pipe( gulp.dest('build/') )
}) npm ScriptsTo use PostCSS from your command-line interface or with npm scripts
there is postcss --use autoprefixer -o main.css css/*.css BrowserIf you want to compile CSS string in browser (for instance, in live edit tools like CodePen), just use Browserify or webpack. They will pack PostCSS and plugins files into a single file. To apply PostCSS plugins to React Inline Styles, JSS, Radium
and other CSS-in-JS, you can use const postcss = require('postcss-js')
const prefixer = postcss.sync([ require('autoprefixer') ])
prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] } DenoPostCSS also supports Deno: import postcss from 'https://deno.land/x/postcss/mod.js'
import autoprefixer from 'https://jspm.dev/autoprefixer'
const result = await postcss([autoprefixer]).process(css) Runners
JS APIFor other environments, you can use the JS API: const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const postcssNested = require('postcss-nested')
const fs = require('fs')
fs.readFile('src/app.css', (err, css) => {
postcss([autoprefixer, postcssNested])
.process(css, { from: 'src/app.css', to: 'dest/app.css' })
.then(result => {
fs.writeFile('dest/app.css', result.css, () => true)
if ( result.map ) {
fs.writeFile('dest/app.css.map', result.map.toString(), () => true)
}
})
}) Read the PostCSS API documentation for more details about the JS API. All PostCSS runners should pass PostCSS Runner Guidelines. OptionsMost PostCSS runners accept two parameters:
Common options:
Treat Warnings as ErrorsIn some situations it might be helpful to fail the build on any warning
from PostCSS or one of its plugins. This guarantees that no warnings
go unnoticed, and helps to avoid bugs. While there is no option to enable
treating warnings as errors, it can easily be done
by adding module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-fail-on-warn')
]
} Editors & IDE IntegrationVS Code
Atom
Sublime Text
Vim
WebStormTo get support for PostCSS in WebStorm and other JetBrains IDEs you need to install this plugin. Security ContactTo report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure. For EnterpriseAvailable as part of the Tidelift Subscription. The maintainers of |
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论