gulp.task('css', function () {
var processors = [
cssnext( {
'customProperties':true,
'colorFunction':true,
'curstomSelectros':true,
}),
]
return gulp.src('./public/stylesheets/*.css')
.pipe(postcss(processors))
.pipe(postcss([ require('postcss-animation'),
require('postcss-color-gray'),
require('autoprefixer'),
require('precss'),
require('rucksack-css'),
require('postcss-import'),
require('postcss-center'),
require('postcss-responsive-images'),
require('postcss-input-style'),
]))
.pipe( gulp.dest('./public/css/') )
});
gulp.task("css", () => {
let processors = [
use({modules: ['postcss-normalize', 'cssnano']}),
precss(),
cssnext(
autoprefixer({
browsers: ['last 5 versions']
})),
lost(),
postcssassets({
loadPaths: ['./public/img'],
relativeTo: './public/css'
}),
flexbugs(),
svgfallback({
basePath: './public/img',
dest: './public/img/fallback/',
}),
fontmagican({
hosted: './public/fonts'
})
];
return combiner(
gulp.src('./frontend/css/style.css'),
sourcemaps.init(),
postcss(processors),
sourcemaps.write('./'),
gulp.dest('./public/css/')
).on('error', notify.onError());
});
module.exports = LANGS.map(lang => ({
entry: { [lang]: path.join(__dirname, 'client') },
output: {
path: path.join(__dirname, 'build', 'public', 'assets'),
filename: 'bundle_[hash].' + lang + '.js'
},
cache: IS_DEBUG,
debug: IS_DEBUG,
plugins: PLUGINS.concat([
new webpack.IgnorePlugin(new RegExp(`^\.\/(?!${lang}$)`), /i18n$/),
new webpack.IgnorePlugin(/^config(\/server)?(\/)?$/),
new webpack.DefinePlugin({
LANG: JSON.stringify(lang),
'process.env.NODE_ENV': JSON.stringify(ENV)
})
]).concat(IS_DEBUG ? [] : [
new optimize.UglifyJsPlugin({ comments: false })
]),
postcss: [
cssnext({
browsers: '> 0.1%',
url: false
})
],
devtool: IS_DEBUG ? 'source-map' : '',
resolve: {
root: __dirname
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', IS_DEBUG ?
'css?modules&importLoaders=1!postcss' :
'css?modules&importLoaders=1&minimize!postcss')
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url?limit=32768!image-webpack'
},
{
test: /\.(woff|woff2|ttf|eot)$/,
loader: 'url?limit=32768'
}
]
}
}));
const compileCss = async (srcPath) => {
const css = await fs.readFile(srcPath, 'utf-8');
const plugins = [
atImport(),
cssnext({
browsers: ENV === 'development' ? 'last 2 Chrome versions' : 'defaults',
features: {
customProperties: {
warnings: true,
preserve: true,
},
},
}),
];
if (ENV === 'production') {
plugins.push(cssnano({preset: [
'default', {
discardComments: {removeAll: true},
// This must be disabled because it breaks postcss-custom-properties:
// https://github.com/ben-eb/cssnano/issues/448
mergeLonghand: false,
},
]}));
}
const result = await postcss(plugins).process(css, {from: srcPath});
return result.css;
};
postcss: () => {
return [
cssnext({
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1', 'not ie <= 8', 'Android >= 4.0']
})
]
}
gulp.task('css', function() {
const processors = [
postcssImport(),
postcssUrl(),
postcssCssnext({
browsers: '> 1%, last 2 versions, Safari > 5, ie > 9, Firefox ESR',
}),
postcssReporter(),
];
// Compress in production.
if (isProd()) {
processors.push(cssnano({autoprefixer: false}));
}
return merge(
gulp.src('./src/css/index.css')
.pipe(plumber({errorHandler: streamError}))
.pipe(postcss(processors))
.pipe(gulp.dest('public/css')),
gulp.src('./src/css/chartjs-visualizations.css')
.pipe(plumber({errorHandler: streamError}))
.pipe(postcss(processors))
.pipe(gulp.dest('public/css'))
);
});
gulp.task('css', function () {
const postcss = require('gulp-postcss');
const sourcemaps = require('gulp-sourcemaps');
const cssnext = require('postcss-cssnext');
const precss = require('precss');
const csswring = require('csswring');
const plugins = [
cssnext({
browsers: AUTOPREFIXER_BROWSERS
}),
precss(),
csswring()
];
del('dest/css/*');
return gulp.src('./src/css/[!_]*.scss')
.pipe(sourcemaps.init())
.pipe(postcss(plugins))
.pipe(rename({
extname: '.css'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest/css'));
});
gulp.task('pcss', function () {
'use strict';
return gulp.src(global.paths.src + global.paths.pcss)
.pipe(postcss([cssnext()]))
.pipe(rename({extname: '.css'}))
.pipe(gulp.dest(global.paths.src));
});
postcss: function () {
return [
stylelint({ files: '../../src/app/*.css' }),
postcssNext(),
postcssAssets({ relative: true })
];
},
postcss: (ctx) => {
const atImport = postcssImport({ addDependencyTo: ctx })
return {
plugins: [atImport, cssnext(), rucksack(), lost()],
parser: sugarss
}
},
postcss: function(webpack) {
return [
cssImport({ addDependencyTo: webpack }),
precss(),
cssnext(),
];
}
plugins: () => [
precss(),
postcssCssnext({
browsers: ['last 2 versions', 'ie >= 9'],
compress: true,
}),
],
gulp.task('css', function () {
var processors = [
atImport(),
stylelint(),
immutableCss(),
reporter({
clearReportedMessages: true,
noIcon: true
}),
atVariables(),
atFor(),
cssEach(),
atIf(),
cssnext({
browsers: ['last 2 versions', '> 5%', 'not ie < 11']
}),
styleGuide({
dest: siteRoot + '/index.html',
project: projectName,
showCode: true,
theme: 'ideal'
})
];
return gulp.src('index.css')
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest(siteRoot))
.pipe(cssnano())
.pipe(size())
.pipe(rename({extname: '.min.css'}))
.pipe(notify('css optimized'))
.pipe(gulp.dest(siteRoot));
});
gulp.task('styles', function () {
var svgPrefix = 'data:image/svg+xml;charset=utf-8,';
return gulp.src('client/main.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init({loadMaps:true}))
.pipe($.sass({
outputStyle: 'expanded',
precision: 10,
includePaths: ['bower_components', bourbon]
}).on('error', $.sass.logError))
.pipe($.postcss([
cssnext({
features: {
colorRgba: false
}
}),
inlineSvg({
path: 'bower_components/ftc-icons/build',
transform: function(data, path, opts) {
return svgPrefix + encodeURIComponent(data);
}
})
]))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest('.tmp/styles'))
.pipe(browserSync.stream());
});
}).then((css) => {
const plugins = [
cssImport(),
cssnext({
browsers: ['last 2 versions'],
}),
];
if (process.env.NODE_ENV === 'production') {
plugins.push(cssnano({
autoprefixer: false,
discardComments: {
removeAll: true,
},
}));
}
return postcss(plugins).process(typeof css === 'object' ? css.css : css, {
from: join(config.folders.css, file),
to: join(config.output, file),
map: {
inline: false,
},
}).catch((error) => {
console.error(error);
});
}, (error) => {
gulp.task('styles', function () {
var processors = [
precss({}),
cssnext({}),
autoprefixer({browsers: [
'ie >= 10',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4.4',
'bb >= 10'
]})
];
gulp.src(workField +'/styles/main.css')
.pipe(postcss(processors))
.pipe(csslint())
.pipe(csslint.reporter())
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(build + '/styles'))
.pipe(browserSync.stream()); //reload browser
});
gulp.task('css-build-src', () => {
return gulp.src([`${cssSrcFolder}/**/*.scss`, `!${cssSrcFolder}/*.scss`])
.pipe(plugins.sass({outputStyle: 'compressed'}))
.pipe(plugins.postcss([cssnextPlugin()]))
.pipe(plugins.header(copyrightHeader))
.pipe(gulp.dest(cssBuildFolder));
});
postcss: (webpackInstance) => [
postcssImport({
path: ['./src'],
}),
postcssNested,
cssnext({ browsers: ['last 2 versions', 'IE > 10'] }),
],
postcss: () => [
cssnext({
browsers: ['last 2 versions', 'IE > 10'],
}),
postcssReporter({
clearMessages: true,
})
],
postcss: () => [
postcssFocus(), // Add a :focus to every :hover
cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
browsers: ['last 2 versions', 'IE > 10'], // ...based on this browser list
}),
postcssReporter({ // Posts messages from plugins to the terminal
clearMessages: true,
}),
],
const tidyCSS = (css, from) => {
return postcss()
.use(importer())
.use(cssnext())
.use(cssnano({ mergeRules: false }))
.use(cssfmt())
.process(css, { from })
.then((result) => result.css);
};
postcss: () => {
return [
cssimport({
path: __dirname + '/dist/',
addDependencyTo: webpack
}),
cssnext()
];
}
postcss: (webpackInstance) => [
stylelint,
postcssImport({
path: ['./src'],
}),
postcssNested,
cssnext({ browsers: ['last 2 versions', 'IE > 10'] }),
postcssReporter({ clearMessages: true }),
],
postcss: () => [
postcssFocus(),
cssnext({
browsers: ['last 2 versions', 'IE > 9'],
}),
postcssReporter({
clearMessages: true,
}),
],
return webpack => ( [ postcssImport({ addDependencyTo: webpack })
, postcssUrl( { url: 'inline'
//, basePath: '../src/app'
//, assetsPath: '../images'
})
, postcssCssnext()
, postcssBrowserReporter()
, postcssReporter()
] )
plugins: loader => [
postcssImport({ path: path.resolve(__dirname, 'src') }),
postcssCssnext({ browsers: ['Safari >= 8'] }),
postcssUrl({
url: 'inline',
maxSize: 300,
basePath: path.resolve(__dirname, 'src')
})
]
postcss: function() {
return [
postcssImport,
postcssUrl,
cssnext({
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
})
]
},
gulp.task("css", () => (
gulp.src("./src/css/*.css")
.pipe(postcss([
cssImport({from: "./src/css/main.css"}),
cssnext(),
cssnano(),
]))
.pipe(gulp.dest("./dist/css"))
.pipe(browserSync.stream())
));
gulp.task('css', () => {
const processor = [
mixins(),
nested(),
next({browsers: ['> 1%', 'android > 4']})
]
return gulp.src('./src/*.css')
.pipe(post(processor))
.pipe(gulp.dest('dist/'))
})
gulp.task('build:styles', function(){
gulp.src('./style/index.css')
.pipe(postcss([
postcss_import(),
postcss_cssnext(),
postcss_reporter()
]))
.pipe(rename(pkg.name + '.css'))
.pipe(gulp.dest('./dist'));
});