Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
cssgrace
Advanced tools
Changelog
V 3.0.0 (2015-11-11) :dog::dog::dog:
Readme
From now on,writing brief,elegant,future-oriented CSS.
CSS Grace is a plugin for PostCSS.It does not change the original grammar CSS, let CSS to write more simple and more elegant。
Download and install Node.js.
Installation cssgrace.
npm install cssgrace
npm install chokidar
var fs = require('fs')
var cssgrace = require('cssgrace')
var src = 'src/input.css'
console.info('Watching…\nModify the input.css and save.')
chokidar.watch(src, {
ignored: /[\/\\]\./,
persistent: true
}).on('all',
function(event, path, stats) {
var css = fs.readFileSync(src, 'utf8')
fs.writeFileSync('build/output.css', cssgrace.pack(css))
})
.foo::after {
position: center;
width: 210px;
height: 80px;
background: rgba(112, 26, 0, .3);
}
.bar {
display: inline-block;
opacity: .5;
}
node test
,we will get output.css
..foo:after {
position: absolute;
left: 50%;
top: 50%;
margin-left: -105px;
margin-top: -40px;
width: 210px;
height: 80px;
background: rgba(112, 26, 0, .3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c701a00', endColorstr='#4c701a00');
}
:root .foo:after {
filter: none\9;
}
.bar {
display: inline-block;
*display: inline;
*zoom: 1;
opacity: .5;
filter: alpha(opacity=50);
}
var fs = require('fs')
var chokidar = require('chokidar')
var postcss = require('postcss')
var cssgrace = require('cssgrace')
var nested = require('postcss-nested') //CSS 代码嵌套
var minmax = require('postcss-media-minmax') //使用 >=/<= 代替 @media 中的 min-/max
var selector = require('postcss-custom-selectors') //自定义选择器
var src = 'src/input.css'
console.info('Watching…\nModify the input.css and save.')
chokidar.watch(src, {
ignored: /[\/\\]\./,
persistent: true
}).on('all',
function(event, path, stats) {
var css = fs.readFileSync(src, 'utf8')
var output = postcss()
.use(minmax())
.use(cssgrace)
.use(selector())
.use(nested)
.process(css)
.css;
fs.writeFileSync('build/output.css', output)
})
npm install grunt-postcss
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
postcss: {
options: {
processors: [
require('postcss-custom-selector')(),
require('cssgrace'),
]
},
dist: {
src: ['src/*.css'],
dest: 'build/grunt.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('default', ['postcss']);
}
npm install gulp-postcss
var gulp = require('gulp');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var cssgrace = require('cssgrace');
var autoprefixer = require('autoprefixer-core')
gulp.task('default', function () {
var processors = [
require('cssgrace')
];
gulp.src('src/input.css')
.pipe(postcss(processors))
.pipe(rename('gulp.css'))
.pipe(gulp.dest('build'))
});
gulp.watch('src/*.css', ['default']);
input:
.foo {
background-image: -webkit-image-set(
url(../img/yuxifan@1x.jpg) 1x,
url(../img/yuxifan@2x.jpg) 2x);
}
output:
.foo {
background-image: url(../img/yuxifan@1x.jpg); /* Fallback */
background-image: -webkit-image-set(
url(../img/yuxifan@1x.jpg) 1x,
url(../img/yuxifan@2x.jpg) 2x);
}
@media only screen and (min-resolution: 2dppx) {
.foo {
background-image: url(../img/yuxifan@2x.jpg);
background-size: 320px 427px;
}
}
Using the image-width
and image-height
to obtain the image's width or height.
input:
.foo {
background: url(../img/post-and-pre.png);
width: image-width;
height: image-height;
}
.foo {
background: url(../img/post-and-pre.png);
margin: image-width image-height -image-height;
content: 'image-width';
}
output:
.foo {
background: url(../img/post-and-pre.png);
width: 720px;
height: 719px;
}
.foo {
background: url(../img/post-and-pre.png);
margin: 720px 719px -719px;
content: 'image-width';
}
input:
.foo {
clear: fix;
}
output:
.foo {
*zoom: 1;
}
.foo:after {
clear: both;
}
.foo:before,
.foo:after {
content: '';
display: table;
}
If there is already can remove floating property, don't generate compatible code.
input:
.foo {
clear: fix;
overflow: hidden;
}
output:
.foo {
overflow: hidden;
}
Automatic calculation of margin value, the mother will never have to worry about my math is not good.
input:
.foo {
position: center;
width: 300px;
height: 123px;
}
output:
.foo {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -61.5px;
width: 300px;
height: 123px;
}
input:
.foo {
position: absolute;
display: block;
}
.foo {
position: center;
display: block;
}
.foo {
float: left;
display: block;
}
output:
.foo {
position: absolute;
}
.foo {
position: center;
}
.foo {
float: left;
}
Remove float: left|right.
input:
.foo {
position: absolute;
float: left;
}
output:
.foo {
position: absolute;
}
input:
.foo {
resize: vertical;
}
.foo {
resize: both;
overflow: hidden;
}
output:
.foo {
resize: vertical;
overflow: auto;
}
.foo {
resize: both;
overflow: hidden;
}
input:
.foo {
text-overflow: ellipsis;
}
.foo {
text-overflow: ellipsis;
overflow: auto;
white-space: normal;
}
output:
.foo {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.foo {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
input:
.foo {
opacity: .6;
}
.foo {
opacity: 0.8293;
}
output:
.foo {
opacity: .6;
filter: alpha(opacity=60);
}
.foo {
opacity: 0.8293;
filter: alpha(opacity=83);
}
input:
.foo {
background: rgba(153, 85, 102, 0.3);
}
output:
.foo {
background: rgba(153, 85, 102, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c995566', endColorstr='#4c995566');
}
:root .foo {
filter: none\9;
}
input:
.foo {
display: inline-block;
}
output:
.foo {
display: inline-block;
*display: inline;
*zoom: 1;
}
$ git clone https://github.com/postcss/postcss-media-minmaxs.git
$ git checkout -b patch
$ npm install
$ npm test
FAQs
CSS postproccessor
The npm package cssgrace receives a total of 18 weekly downloads. As such, cssgrace popularity was classified as not popular.
We found that cssgrace demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.