postcss / Postcss Cli
Licence: other
CLI for postcss
Stars: â 621
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Postcss Cli
Ffsend
đŦ Easily and securely share files from the command line. A fully featured Firefox Send client.
Stars: â 5,448 (+777.29%)
Mutual labels: cli
Gitkit Js
Pure javascript implementation of Git (Node.js and Browser)
Stars: â 597 (-3.86%)
Mutual labels: cli
Trdsql
CLI tool that can execute SQL queries on CSV, LTSV, JSON and TBLN. Can output to various formats.
Stars: â 593 (-4.51%)
Mutual labels: cli
Ponzu
Headless CMS with automatic JSON API. Featuring auto-HTTPS from Let's Encrypt, HTTP/2 Server Push, and flexible server framework written in Go.
Stars: â 5,373 (+765.22%)
Mutual labels: cli
Nth Start Project
Startkit for HTML / CSS / JS pages layout.
Stars: â 578 (-6.92%)
Mutual labels: postcss
Very good cli
A Very Good Command Line Interface for Dart created by Very Good Ventures đĻ
Stars: â 605 (-2.58%)
Mutual labels: cli
Hugo Theme Hello Friend
Pretty basic theme for Hugo that covers all of the essentials. All you have to do is start typing!
Stars: â 586 (-5.64%)
Mutual labels: postcss
Marp Cli
A CLI interface for Marp and Marpit based converters
Stars: â 606 (-2.42%)
Mutual labels: cli
Ignite Bowser
Bowser is now re-integrated into Ignite CLI! Head to https://github.com/infinitered/ignite to check it out.
Stars: â 586 (-5.64%)
Mutual labels: cli
Dev Setup
macOS development environment setup: Easy-to-understand instructions with automated setup scripts for developer tools like Vim, Sublime Text, Bash, iTerm, Python data analysis, Spark, Hadoop MapReduce, AWS, Heroku, JavaScript web development, Android development, common data stores, and dev-based OS X defaults.
Stars: â 5,590 (+800.16%)
Mutual labels: cli
Python Mss
An ultra fast cross-platform multiple screenshots module in pure Python using ctypes.
Stars: â 582 (-6.28%)
Mutual labels: cli
Poi
âĄA zero-config bundler for JavaScript applications.
Stars: â 5,291 (+752.01%)
Mutual labels: postcss
React Native Make
A collection of everyday React Native CLI tools
Stars: â 606 (-2.42%)
Mutual labels: cli
Install
npm i -D postcss postcss-cli
Usage
Usage:
postcss [input.css] [OPTIONS] [-o|--output output.css] [--watch|-w]
postcss <input.css>... [OPTIONS] --dir <output-directory> [--watch|-w]
postcss <input-directory> [OPTIONS] --dir <output-directory> [--watch|-w]
postcss <input-glob-pattern> [OPTIONS] --dir <output-directory> [--watch|-w]
postcss <input.css>... [OPTIONS] --replace
Basic options:
-o, --output Output file [string]
-d, --dir Output directory [string]
-r, --replace Replace (overwrite) the input file [boolean]
-m, --map Create an external sourcemap
--no-map Disable the default inline sourcemaps
-w, --watch Watch files for changes and recompile as needed [boolean]
--verbose Be verbose [boolean]
--env A shortcut for setting NODE_ENV [string]
Options for use without a config file:
-u, --use List of postcss plugins to use [array]
--parser Custom postcss parser [string]
--stringifier Custom postcss stringifier [string]
--syntax Custom postcss syntax [string]
Options for use with --dir:
--ext Override the output file extension; for use with --dir [string]
--base Mirror the directory structure relative to this path in the output
directory, for use with --dir [string]
Advanced options:
--include-dotfiles Enable glob to match files/dirs that begin with "."
[boolean]
--poll Use polling for file watching. Can optionally pass polling
interval; default 100 ms
--config Set a custom directory to look for a config file [string]
Options:
--version Show version number [boolean]
-h, --help Show help [boolean]
Examples:
postcss input.css -o output.css Basic usage
postcss src/**/*.css --base src --dir build Glob Pattern & output
cat input.css | postcss -u autoprefixer > output.css Piping input & output
If no input files are passed, it reads from stdin. If neither -o, --dir, or
--replace is passed, it writes to stdout.
If there are multiple input files, the --dir or --replace option must be passed.
Input files may contain globs (e.g. src/**/*.css). If you pass an input
directory, it will process all files in the directory and any subdirectories,
respecting the glob pattern.
âšī¸ More details on custom parsers, stringifiers and syntaxes, can be found here.
Config
If you need to pass options to your plugins, or have a long plugin chain, you'll want to use a configuration file.
postcss.config.js
module.exports = {
parser: 'sugarss',
plugins: [
require('postcss-import')({ ...options }),
require('postcss-url')({ url: 'copy', useHash: true }),
],
}
Note that you can not set the from
or to
options for postcss in the config file. They are set automatically based on the CLI arguments.
Context
For more advanced usage, it's recommended to use a function in postcss.config.js
; this gives you access to the CLI context to dynamically apply options and plugins per file
Name | Type | Default | Description |
---|---|---|---|
env |
{String} |
'development' |
process.env.NODE_ENV |
file |
{Object} |
dirname, basename, extname |
File |
options |
{Object} |
map, parser, syntax, stringifier |
PostCSS Options |
postcss.config.js
module.exports = (ctx) => ({
map: ctx.options.map,
parser: ctx.file.extname === '.sss' ? 'sugarss' : false,
plugins: {
'postcss-import': { root: ctx.file.dirname },
cssnano: ctx.env === 'production' ? {} : false,
},
})
â ī¸ If you want to set options via CLI, it's mandatory to reference
ctx.options
inpostcss.config.js
postcss input.sss -p sugarss -o output.css -m
postcss.config.js
module.exports = (ctx) => ({
map: ctx.options.map,
parser: ctx.options.parser,
plugins: {
'postcss-import': { root: ctx.file.dirname },
cssnano: ctx.env === 'production' ? {} : false,
},
})
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].