Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'uncss' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
// This handles a bunch for us:
// autoprefixer: Adds vendor prefixes to CSS, using Autoprefixer.
// filters: Converts CSS shorthand filters to SVG equivalent
// rem: Generates pixel fallbacks for rem units
// pseudoElements: Converts pseudo-elements using CSS3 syntax
// (two-colons notation like ::after, ::before, ::first-line and ::first-letter) with the old one
// opacity: Adds opacity filter for IE8 when using opacity property
//
// We intentionally don't do any minification, since we'd prefer to run uncss first
pleeease({
import: false,
rebaseUrls: false,
minifier: false,
browsers: ['> 2%'],
}),
uncss.postcssPlugin({
html: [...htmlFiles, 'amp/empty.html'],
ignore,
}),
],
},
function styles() {
if (isProdBuild()) {
return gulp.src(settings.sources.stylesEntryPoint)
.pipe(sass())
.pipe(postcss([
autoprefixer(autoPrefixOptions),
cssnano({
discardComments: {
removeAll: true
}
})
]))
.pipe(rename('index.min.css'))
.pipe(gulp.dest(settings.destinations.prod.styles))
.pipe(rename('index.uncss.min.css'))
.pipe(postcss([uncss.postcssPlugin(uncssOptions)]))
.pipe(gulp.dest(settings.destinations.prod.styles));
}
return gulp.src(settings.sources.stylesEntryPoint)
.pipe(plumber({errorHandler: onError}))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss([autoprefixer(autoPrefixOptions)]))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(settings.destinations.dev.styles));
}
postcss: function() {
return [
uncss.postcssPlugin({
html: ['templates/event_amp.html'],
}),
];
},
};
export default function styles(cb) {
const stylesMinChannel = lazypipe()
.pipe(postcss, [
appConfig.uncssActive ? uncss.postcssPlugin(uncssOptions) : () => {},
cssnano({ discardComments: { removeAll: true } }),
])
.pipe(rename, { suffix: '.min' })
.pipe(gulp.dest, `${envPath}/${paths.assets.css}`);
/**
* Warning:
* 1. Returning the gulp stream causes an uncompleted task, I suppose because of the lazypipe.
* So we used the cb function to finish the task.
* 2. For best performance, don't add Sass partials to `gulp.src`
*/
return gulp
.src(appConfig.entry.styles, { sourcemaps: true })
.pipe(sass({ precision: 10, importer: inlineCssImporter }).on('error', errorHandler))
.pipe(
'use strict';
const gulp = require('gulp');
const nunjucks = require('gulp-nunjucks');
const imagemin = require('gulp-imagemin');
const htmlmin = require('gulp-htmlmin');
const browserify = require('browserify');
const babel = require('babelify');
const uglify = require('gulp-uglify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const sass = require('gulp-sass');
const uncss = require('uncss').postcssPlugin;
const concat = require('gulp-concat');
const webserver = require('gulp-webserver');
const postcss = require('gulp-postcss');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('autoprefixer');
const nano = require('cssnano');
const clean = require('gulp-clean');
const data = require('./src/data/index');
const PATH = {
"DIST": "./dist",
"TEMPLATES": "./src/templates/*.html",
"JS": "./src/index.js",
"IMG": "./src/assets/img/**/*",
"FONTS": "./node_modules/font-awesome/fonts/**/*",
"SASS": "./src/assets/sass/main.scss",
return new Promise((resolve, reject) => {
options.raw = css;
uncss(html, options, (error, output) => {
if (error) {
reject(error);
return;
}
resolve(output);
});
});
}