How to use clean-css - 10 common examples
To help you get started, we’ve selected a few clean-css examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
puzzle-js / puzzle-js / tests / resource-injector.spec.ts View on Github 
it("should inject style sheets using default version", async (done) => {
// arrange
const fragments = {
"f1": FragmentHelper.create(),
"f2": FragmentHelper.create()
};
sandbox.stub(fragments.f1, "getAsset").callsFake((arg) => arg + "-CSS-");
sandbox.stub(fragments.f2, "getAsset").callsFake((arg) => arg + "-CSS-");
sandbox.stub(ResourceFactory.instance, "getRawContent").callsFake( (arg): any => arg + "-CSS-");
sandbox.stub(CleanCSS.prototype, "minify").callsFake( (arg): any => ({ styles: arg }));
// act
const dom = cheerio.load("");
const resourceInjector = new ResourceInjector(fragments, "", {});
await resourceInjector.injectStyleSheets(dom as any, false);
const c1 = fragments.f1.config;
const c2 = fragments.f2.config;
const assets = c1.assets.concat(c2.assets).filter((asset) => asset.type === RESOURCE_TYPE.CSS);
const deps = c1.dependencies.concat(c2.dependencies).filter((dep) => dep.type === RESOURCE_TYPE.CSS);
let expectedDependencyList = assets.concat(deps).map( (res) => res.name);
expectedDependencyList = expectedDependencyList.filter((v,i) => expectedDependencyList.indexOf(v) === i); // remove dublications
const expectedCssContent = expectedDependencyList.concat([""]); // for last -CSS-it("should inject style sheets using passive version", async (done) => {
// arrange
const fragments = {
"f1": FragmentHelper.create(),
"f2": FragmentHelper.create()
};
const f1Version = faker.random.arrayElement(["2.0.0", "3.0.0"]);
const f2Version = faker.random.arrayElement(["2.0.0", "3.0.0"]);
sandbox.stub(fragments.f1, "detectVersion").callsFake(() => f1Version);
sandbox.stub(fragments.f2, "detectVersion").callsFake( () => f2Version);
sandbox.stub(fragments.f1, "getAsset").callsFake((arg) => arg + "-CSS-");
sandbox.stub(fragments.f2, "getAsset").callsFake((arg) => arg + "-CSS-");
sandbox.stub(ResourceFactory.instance, "getRawContent").callsFake( (arg): any => arg + "-CSS-");
sandbox.stub(CleanCSS.prototype, "minify").callsFake( (arg): any => ({ styles: arg }));
// act
const dom = cheerio.load("");
const resourceInjector = new ResourceInjector(fragments, "", {});
await resourceInjector.injectStyleSheets(dom as any, false);
const c1 = fragments.f1.config.passiveVersions[f1Version];
const c2 = fragments.f2.config.passiveVersions[f2Version];
const assets = c1.assets.concat(c2.assets).filter((asset) => asset.type === RESOURCE_TYPE.CSS);
const deps = c1.dependencies.concat(c2.dependencies).filter((dep) => dep.type === RESOURCE_TYPE.CSS);
const expectedDependencyList = assets.concat(deps).map( (res) => res.name);
const expectedCssContent = expectedDependencyList.concat([""]); // for last -CSS-
// assert});
//
// Build Files
//
var build = {
"../README.md" : htmlToMarkDown(fs.readFileSync("../index.html", "utf8")),
"../dist/jquery.form.js" : unminifedJS.join('\n'),
"../dist/jquery.form.min.js" : minifedJS.join('\n'),
"../dist/jquery.form.css" : styles.join('\n'),
"../dist/jquery.form.min.css" : cleanCSS.process(styles.join('\n')),
"../dist/jquery.editor.js" : fs.readFileSync("./jquery.editor.js", "utf8"),
"../dist/jquery.editor.min.js" : UglifyJS.minify("./jquery.editor.js").code,
"../dist/jquery.editor.css" : fs.readFileSync("./jquery.editor.css", "utf8"),
"../dist/jquery.editor.min.css" : cleanCSS.process(fs.readFileSync("./jquery.editor.css").toString()),
"../dist/jquery.predict.js" : fs.readFileSync("./jquery.predict.js", "utf8"),
"../dist/jquery.predict.min.js" : UglifyJS.minify("./jquery.predict.js").code,
"../dist/jquery.predict.css" : fs.readFileSync("./jquery.predict.css", "utf8"),
"../dist/jquery.predict.min.css" : cleanCSS.process(fs.readFileSync("./jquery.predict.css").toString())
};
for(var x in build){
(function(name,code){
fs.writeFile( name, code, function(err) {
if(err) {
console.log(err);
} else {
console.log(name + " created!");
}
});
})(x, build[x]);const processCss = (css: string, id: string): void => {
if ((!css || !/\S/.test(css)) && !emitEmpty) {
if (debug) this.warn('CSS empty, not emitting file');
return;
}
if (optimize) {
const cleancss = new CleanCSS({
sourceMap: false, // TODO: Add source map support
...(typeof optimize === 'object' ? optimize : {}),
});
const result = cleancss.minify(css);
for (const err of result.warnings) this.warn(err);
for (const err of result.errors) this.error(err);
// eslint-disable-next-line no-param-reassign
css = result.styles;
}
const name = id.replace(extname(id), '');
this.emitAsset(`${name}.css`, css);// if outside css modules, fileObj would be undefined
// then dont add styleBox
var opt = {};
if (addStyleBox && fileObj) {
// ex. arale/widget/1.0.0/ => arale-widget-1_0_0
var styleId = unixy((options || {}).idleading || '')
.replace(/\/$/, '')
.replace(/\//g, '-')
.replace(/\./g, '_');
opt.prefix = ['.', styleId, ' '].join('');
}
code = css2str(code, opt);
// remove comment and format
code = cleancss.process(code, {
keepSpecialComments: 0,
removeEmpty: true
});
// transform css to js
// spmjs/spm#581
var template = 'function() {seajs.importStyle(\'%s\')}';
return format(template, code);
}match({ routes, history }, (error, redirectLocation, renderProps) => {
if (error) {
// response.status(500).send(error.message);
} else if (redirectLocation) {
// response.redirect(302, `${redirectLocation.pathname}${redirectLocation.search}`);
} else if (renderProps) {
response(template({
root: renderToString(),
css: new cleancss().minify(jss.sheets.toString()).styles,
jsBundle: clientAssets.main.js
}));
} else {
// response.status(404).send('Not found');
}
});
}resources.compileCSS = function compileCSS() {
var css = "";
resources.files.css.forEach(function (file) {
css += fs.readFileSync(path.join(paths.mod, file)).toString("utf8") + "\n";
});
// Vendor prefixes
css = postcss([autoprefixer]).process(css).css;
// Minify
if (minify) css = cleanCSS.minify(css).styles;
return {data: new Buffer(css), etag: etag(), mime: mime("css")};
};return this.edit(function (blob) {
try {
blob.content = cleancss.process(blob.content, settings);
} catch (err) {
fQuery.Event.error({
method: 'cleancss',
message: 'failed',
fquery: this,
blob: blob,
data: err
});
}
});
};srcJsPath = path.join('component', name, 'src', name + '.js');
}
try {
js = uglifyjs.minify(srcJsPath);
fs.writeFileSync(jsPath, js.code);
} catch (e) {
p.reject(e);
return p;
}
var cssPath = path.join(distDir, name + '.min.css');
console.log(cssPath);
try {
css = fs.readFileSync(path.join('component', name, 'src', name + '.css')).toString();
css = cleancss.process(css);
fs.writeFileSync(cssPath, css);
} catch (e) {
p.reject(e);
return p;
}
if (typeof js !== 'undefined' && typeof css !== 'undefined') {
p.fulfill({css: css, js: js.code});
} else {
throw "missing resulting source";
}
return p;
}Object.keys(out).forEach(function (file) {
if (/\.js$/.test(file)) {
out[file] = new Buffer(uglify.minify(out[file].toString(), opts.uglify).code);
} else if (/\.css$/.test(file)) {
out[file] = new Buffer(cleanCSS.minify(out[file].toString()).styles);
}
});
}
