postcss-spacer v0.0.4
PostCSS Spacer
PostCSS Spacer is a PostCSS plugin for normalising spaces between lines on your stylesheets.
Main features:
- Set the space before or after certain lines
- Define specific options for different types of lines
- Target only lines with specific patterns on them
Installation
$ npm install postcss-spacer --save-dev
Usage
This plugin runs as a PostCSS processor. To use it simply add it as a dependency on the processors
option array in the postcss
task.
Syntax
This plugin can be used with pure CSS, SCSS, Sass or even Less. Pure CSS is supported by PostCSS natively, however to work with SCSS, Sass or Less you'll need to use a custom syntax parser such as:
- SCSS:
postcss-scss
- Sass:
sugarss
- Less:
postcss-less
Note: to use a syntax parser you'll have to set it as a dependency (require()
) on the syntax
option of PostCSS like this, for example:
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-spacer')({ /* plugin options */ })
],
syntax: require('sugarss')
},
}
});
Grunt:
To run the postcss
properly in Grunt its suggested to use grunt-postcss
as a dependency.
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-spacer')({ /* plugin options */ })
]
},
dist: {
src: '*.css'
}
}
});
grunt.loadNpmTasks('grunt-postcss');
Options
This plugin analyses the types of lines on your dist
files and fixes their spacing size according to the options you set.
Line Types
Each line type is an option property in itself, which receives an object with a certain set of options for that specific file type.
In this example the comments
handle is used as the key and its value is a set of options that adds 4 lines before
and 2 lines after
each comment:
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-spacer')({
'comments': {
before: 4,
after: 2
}
})
]
},
}
});
Supported line types:
all
(object) : targets all types of linescomments
(object) : targets comments held within/**/
rules
(object) : targets CSS rulesdeclarations
(object) : targets CSS declarationsat-rules
(object) : targets CSS at-rules
Line Options
before
(number) : false : adds empty lines before the target lineafter
(number) : false : adds empty lines after the target line
Example:
JS
'comments': {
before: 4,
after: 2
},
CSS
Before:
/* ===== MAIN STYLES ===== */
body{
background: #fff
}
After:
/* ===== MAIN STYLES ===== */
body{
background: #fff
}
Note: adding 0
as a value on any of the above options will remove the empty lines on that specific area of a line.
Patterns
If pattern
is defined, each line of the defined line type will be analysed and if any defined pattern (string) is found, the options are run
pattern
(array) : false : array of patterns to target
Example:
JS
'comments': {
pattern: ['====='],
after: 2
},
CSS
Before:
/* ===== MAIN STYLES ===== */
body{
background: #fff
}
After:
/* ===== MAIN STYLES ===== */
body{
background: #fff
}
Debug
By default, after each process a summary is displayed with the number of lines that were changed and how many patterns were identified.
debug
(boolean) : false : enables debug mode, which logs each line that was targeted by the process and how many patterns were identified in it. In the end of each line type report a comprehensive summary is also displayed. This mode will help the user identify why weren't certain lines targeted in the process and what the process is actually doing.
Each line type can hold its one debug
mode, like so:
'comments': {
pattern: ['====='],
after: 2,
debug: true
},
Changelog
- v0.0.4 Debug logs now contain colors to make them easier to read.
- v0.0.3 More verbose error messages: Error messages should be spot on the issue that is causing the process to fail.
- v0.0.2 Break task when error occurs: When an error is found on the process, or something went wrong, the task should break.
- v0.0.1 Initial release.
6 years ago