postcss: function postcss() {
return [simpleVars({
variables: function variables() {
return require("./src/styles/variables");
}
}), autoprefixer];
}
test('should not crash when node.raws.value is null', t => {
t.plan(1);
const css = '$color: red; h1{box-shadow:inset 0 -10px 12px 0 $color, /* some comment */ inset 0 0 5px 0 $color;color:blue}h2{color:blue}';
const res = postcss([ vars(), comments(), plugin]).process(css).css;
t.same(res, 'h1{box-shadow:inset 0 -10px 12px 0 red, inset 0 0 5px 0 red}h1,h2{color:blue}');
});
gulp.task('css', function() {
var processors = [
atImport(),
variable(),
postcss_bem({
defaultNamespace: 'c',
separators: {
descendent: '__',
modifier: '_'
} ,
shortcuts: {
descendent: 'desc'
}
}),
nested(),
mixin(),
// include(),
// autoprefixer({browsers:['>5%']}),
// cssnano(),
];
return gulp.src('dev/css/components/bem/style.css')
.pipe(postcss(processors))
.pipe(gulp.dest('dev/css'))
});
rule.nodes.forEach(node => {
const clone = node.clone();
const proxy = postcss.rule({ nodes: [clone] });
vars({ only: vals })(proxy);
rule.parent.insertBefore(rule, clone);
});
var insertMixin = function (result, mixins, rule, opts) {
var name = rule.params.split(/\s/, 1)[0];
var params = rule.params.slice(name.length).trim();
if ( params.indexOf(',') === -1 ) {
params = postcss.list.space(params);
if ( params.length > 1 ) {
result.warn('Space argument separation is depreacted and ' +
'will be removed in next version. Use comma.',
{ node: rule });
}
} else {
params = postcss.list.comma(params);
}
var meta = mixins[name];
var mixin = meta && meta.mixin;
if ( !meta ) {
if ( !opts.silent ) {
throw rule.error('Undefined mixin ' + name);
}
} else if ( mixin.name === 'define-mixin' ) {
var i;
var values = { };
for ( i = 0; i < meta.args.length; i++ ) {
values[meta.args[i][0]] = params[i] || meta.args[i][1];
}
var clones = [];
for ( i = 0; i < mixin.nodes.length; i++ ) {
clones.push( mixin.nodes[i].clone() );
}
var proxy = postcss.rule({ nodes: clones });
if ( meta.args.length ) {
vars({ only: values })(proxy);
}
if ( meta.content ) {
proxy.walkAtRules('mixin-content', function (place) {
place.replaceWith(rule.nodes);
});
}
rule.parent.insertBefore(rule, clones);
} else if ( typeof mixin === 'object' ) {
insertObject(rule, mixin, rule.source);
} else if ( typeof mixin === 'function' ) {
var args = [rule].concat(params);
var nodes = mixin.apply(this, args);
if ( typeof nodes === 'object' ) {
insertObject(rule, nodes, rule.source);
}
}
if ( rule.parent ) rule.remove();
};
config.postcss = function() {
return [
autoprefixer( { browsers: [ "last 2 version" ] } ),
imports( { path: path.join( __dirname, "app/css" ), glob: true } ),
mixins,
nested,
variables()
];
};
function insertMixin(result, mixins, rule, processMixins, opts) {
var name = rule.params.split(/\s/, 1)[0];
var rest = rule.params.slice(name.length).trim();
var params = postcss.list.comma(rest);
var meta = mixins[name];
var mixin = meta && meta.mixin;
if ( !meta ) {
if ( !opts.silent ) {
throw rule.error('Undefined mixin ' + name);
}
} else if ( mixin.name === 'define-mixin' ) {
var i;
var values = { };
for ( i = 0; i < meta.args.length; i++ ) {
values[meta.args[i][0]] = params[i] || meta.args[i][1];
}
var proxy = postcss.root();
for ( i = 0; i < mixin.nodes.length; i++ ) {
proxy.append( mixin.nodes[i].clone() );
}
if ( meta.args.length ) {
vars({ only: values })(proxy);
}
if ( meta.content ) {
proxy.walkAtRules('mixin-content', function (content) {
if ( rule.nodes && rule.nodes.length > 0 ) {
content.replaceWith(rule.nodes);
} else {
content.remove();
}
});
}
processMixins(proxy);
rule.parent.insertBefore(rule, proxy);
} else if ( typeof mixin === 'object' ) {
insertObject(rule, mixin, processMixins);
} else if ( typeof mixin === 'function' ) {
var args = [rule].concat(params);
var nodes = mixin.apply(this, args);
if ( typeof nodes === 'object' ) {
insertObject(rule, nodes, processMixins);
}
}
if ( rule.parent ) rule.remove();
}
gulp.task('styles:dev', function()
{
// Store PostCSS processors
var processors = [
cssImport(),
cssCalc(),
cssMixins(),
cssSimpleVars({
silent: true
}),
cssColorFunction(),
cssNested(),
cssCustomMedia(),
lost(),
cssConditionals(),
cssSimpleExtend(),
cssDiscardComments(),
autoprefixer({
browsers: [
'last 2 versions',
'safari 5',
'ie 9',
'ie 10',
'ie 11'
]
})
];
// Return source css files
return gulp.src(srcPath.styles + 'ensphere.pcss')
// Return any errors
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
// Initialize sourcemap
.pipe(sourcemaps.init())
// Process through postcss
.pipe(postcss(processors))
.pipe(rename({
basename : 'ensphere',
extname: '.css'
}))
// Write the sourcemap
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: distPath.styles + 'ensphere.css'
}))
// Write out the css file to dist
.pipe(gulp.dest(distPath.styles));
});
function plugins(root) {
if (_plugins) return _plugins
var np = node_path(root)
debug('plugin NODE_PATH=%s', np)
_plugins = [
cssimport({ path: np ? np : [], glob: true, root: root }),
cssnext({ import: false }),
nested(),
vars()
]
return _plugins
}
gulp.task('styles', function () {
var processors = [
imprt(),
cssnext(),
vars(),
nested(),
autoprefixer(),
];
return gulp.src(paths.styles + 'layout.css')
.pipe(plumber({errorHandler: onError}))
.pipe(postcss(processors))
.pipe(rename('style.css'))
.pipe(nano({convertValues: {length: false}}))
.pipe(gulp.dest(paths.css))
.pipe(reload({stream: true}));
});
css: bundle =>
bundle.src('css')
.pipe(gulpOneOf())
.pipe(postcss([
postcssImport(),
postcssEach,
postcssFor,
postcssSimpleVars(),
postcssCalc(),
postcssNested,
rebemCss,
postcssUrl({ url: 'rebase' }),
autoprefixer(),
postcssReporter()
]))
.pipe(concat(bundle.name + '.min.css'))
.pipe(gulpif(isProd, csso())),
gulp.task('buildCSS', function(){
gulp.src(src.cssMainStarter)
.pipe(plumber())
.pipe(postcss([
importCSS({
from: src.cssMainStarter
}),
mixins(),
nested(),
simpleVars(),
assets(),
autoprefixer()
]))
.pipe(concat('app.css'))
.pipe(minifyCss())
.pipe(gulp.dest(dist.css))
});
var unrollLoop = function (rule) {
var params = list.space(rule.params);
checkParams(rule, params);
var iterator = params[0].slice(1),
index = +params[2],
top = +params[4],
dir = top < index ? -1 : 1,
by = (params[6] || 1) * dir;
var value = {};
for ( var i = index; i * dir <= top * dir; i = i + by ) {
var content = rule.clone();
value[iterator] = i;
vars({ only: value })(content);
rule.parent.insertBefore(rule, content.nodes);
}
if ( rule.parent ) rule.removeSelf();
};
gulp.task('css-bem', function () {
var processors = [
atImport(),
variables({ silent: true }),
bem({separators: {
descendent: '__',
modifier: '_'
}}),
nested(),
];
return gulp
.src('css/modules/style.css')
.pipe(postcss(processors))
.pipe(comb(''))
.pipe(prefix({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('css'));
});
gulp.task('style', () => {
let vars = require('./app/style/variables.js');
let postcss = require('gulp-postcss'),
simpleVars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
autoprefixer = require('autoprefixer-core');
let postProcessors = [
autoprefixer({ browser: [
'> 1%', 'last 2 versions',
'Firefox ESR', 'Opera 12.1',
'ie 8', 'ie 9'
] }),
simpleVars({ variables: vars }),
nested()
];
gulp.src(config.style)
.pipe(postcss(postProcessors))
.pipe(gulp.dest(config.buildDir));
});
postcss: function() {
return [
//parse @import statements
atImport({
path: [
path.resolve(__dirname, './node_modules'),
path.resolve(__dirname, './src/css'),
],
}),
//added before simple vars so @mixin {name} ($var) can process $var
mixins(),
//parse $var: 'some-awesomeo-variable';
simpleVars({
variables: function() {
return require('./config/palette.js');
},
}),
//parse @for
forLoops(),
//parse calc();
calc(),
//added here to process mixins after vars have been parsed
mixins(),
//parse .className{ &:hover{} }
nested(),
//make old browsers work like a boss (kinda...)
autoprefixer(),
];
},
postcss: function() {
return [
autoprefixer,
postcssSimpleVars({ variables: cssGlobalVariables })
];
},
const autoprefixer = require('autoprefixer');
const postcssImport = require('postcss-smart-import');
const postcssNested = require('postcss-nested');
const postcssMixins = require('postcss-mixins');
const postcssSimpleVars = require('postcss-simple-vars');
const postcssRemoveEmpty = require('postcss-discard-empty');
const postcssRemoveComments = require('postcss-discard-comments');
const postcssRemoveDuiplicate = require('postcss-discard-duplicates');
module.exports = {
plugins: [
postcssImport(),
postcssMixins(),
postcssSimpleVars(),
postcssNested(),
autoprefixer({
browsers: ['last 2 versions', '> 2%']
}),
postcssRemoveComments({removeAll: true}),
postcssRemoveEmpty(),
postcssRemoveDuiplicate()
]
};
const autoprefixer = require('autoprefixer');
const postcssNested = require('postcss-nested');
const postcssVars = require('postcss-simple-vars');
module.exports = {
plugins: [
autoprefixer({
browsers: ['last 5 versions']
}),
postcssNested(),
postcssVars()
]
};
module.exports = function ($, config, gulp, merge) { return function () {
var variables = require('../app/themes/' + config.appTheme + '/variables');
var postcssApply = require('postcss-apply');
var postcssAutoprefixer = require('autoprefixer');
var postcssCssMqpacker = require('css-mqpacker');
var postcssCustomMedia = require('postcss-custom-media');
var postcssCustomProperties = require('postcss-custom-properties');
var postcssDiscardEmpty = require('postcss-discard-empty');
var postcssImport = require('postcss-import');
var postcssNesting = require('postcss-nesting');
var postcssReporter = require('postcss-reporter');
var postcssSimpleVars = require('postcss-simple-vars');
var postcssPlugins = [
// Transform @import rules by inlining content
postcssImport({
path: [
'app/elements',
'app/themes/' + config.appTheme
]
}),
// Sass-like variables
postcssSimpleVars({ variables: variables.global }),
// Transform W3C CSS Custom Media Queries
postcssCustomMedia(),
// Unwrap nested rules, following CSS Nesting Module Level 3 specification
postcssNesting(),
// Pack same CSS media query rules into one media query rule
postcssCssMqpacker(),
// Add vendor prefixes to CSS rules using values from "Can I Use"
postcssAutoprefixer(config.autoprefixer),
// Remove empty rules, selectors & media queries
postcssDiscardEmpty(),
postcssReporter({
clearMessages: true
})
];
var theme = gulp.src([
'app/themes/' + config.appTheme + '/*.html',
'!app/themes/' + config.appTheme + '/icons.html'
])
.pipe($.plumber({
handleError: function (error) {
console.log(error);
// For gulp.watch
// http://blog.ibangspacebar.com/handling-errors-with-gulp-watch-and-gulp-plumber/
this.emit('end');
}
}))
.pipe($.sourcemaps.init())
.pipe($.htmlPostcss(postcssPlugins))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/themes/' + config.appTheme))
.pipe($.size({title: 'Copy transformed styles to .tmp/themes dir:'}))
.pipe(gulp.dest('dist/themes/' + config.appTheme))
.pipe($.size({title: 'Copy transformed styles to dist/themes dir:'}));
var elements = gulp.src([
'.tmp/elements/**/*.html'
])
.pipe($.plumber({
handleError: function (error) {
console.log(error);
// For gulp.watch
// http://blog.ibangspacebar.com/handling-errors-with-gulp-watch-and-gulp-plumber/
this.emit('end');
}
}))
.pipe($.sourcemaps.init())
.pipe($.htmlPostcss(postcssPlugins))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/elements'))
.pipe($.size({title: 'Copy transformed styles to .tmp/elements dir:'}))
.pipe(gulp.dest('dist/elements'))
.pipe($.size({title: 'Copy transformed styles to dist/elements dir:'}));
var index = gulp.src([
'.tmp/index.html'
])
.pipe($.plumber({
handleError: function (error) {
console.log(error);
// For gulp.watch
// http://blog.ibangspacebar.com/handling-errors-with-gulp-watch-and-gulp-plumber/
this.emit('end');
}
}))
.pipe($.sourcemaps.init())
.pipe($.htmlPostcss([
// Transform @import rules by inlining content
postcssImport({
path: [
'app/themes/' + config.appTheme
]
}),
// Sass-like variables
postcssSimpleVars({ variables: variables.global }),
// Plugin enabling custom properties sets references - Polymer mixins
postcssApply(),
// Transform W3C CSS Custom Properties for variables syntax to more compatible CSS
postcssCustomProperties(),
// Transform W3C CSS Custom Media Queries
postcssCustomMedia(),
// Unwrap nested rules, following CSS Nesting Module Level 3 specification
postcssNesting(),
// Pack same CSS media query rules into one media query rule
postcssCssMqpacker(),
// Add vendor prefixes to CSS rules using values from "Can I Use"
postcssAutoprefixer(config.autoprefixer),
// Remove empty rules, selectors & media queries
postcssDiscardEmpty(),
postcssReporter({
clearMessages: true
})
]))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('.tmp'))
.pipe($.size({title: 'Copy transformed styles to .tmp dir:'}))
.pipe(gulp.dest('dist'))
.pipe($.size({title: 'Copy transformed styles to dist dir:'}));
return merge(theme, elements, index);
};};
const vars = require('postcss-simple-vars');
const rucksack = require('rucksack-css');
const autoprefixer = require('autoprefixer');
module.exports = [
vars({ variables: require('../src/common/vars') }),
rucksack,
autoprefixer
];
import filesize from 'rollup-plugin-filesize';
// PostCSS plugins
import simplevars from 'postcss-simple-vars';
import nested from 'postcss-nested';
import cssnext from 'postcss-cssnext';
import cssnano from 'cssnano';
export default {
entry: 'src/main.js',
format: 'cjs',
moduleName: 'app',
plugins: [
postcss({
plugins: [
simplevars(),
nested(),
cssnext({ warnForDuplicates: false, }),
cssnano(),
],
extensions: [ '.css' ]
}),
replace({
exclude: 'node_modules/**',
ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
}),
resolve({
jsnext: true,
main: true,
browser: true,
}),
import postCss from 'rollup-plugin-postcss';
import postCssSimpleVars from 'postcss-simple-vars';
import postCssNested from 'postcss-nested';
import babel from 'rollup-plugin-babel';
import { name, dependencies } from './package.json';
export default {
input: 'src/index.js',
output: [
{
format: 'cjs',
file: `dist/${name}.common.js`
},
{
format: 'es',
file: `dist/${name}.module.js`
}
],
external: Object.keys(dependencies),
plugins: [
postCss({
plugins: [
postCssSimpleVars(),
postCssNested()
]
}),
babel()
]
};
var postcssImport = require('postcss-import'),
postcssFor = require('postcss-for'),
postcssEach = require('postcss-each'),
postcssSimpleVars = require('postcss-simple-vars'),
postcssCalc = require('postcss-calc'),
postcssColorFunction = require('postcss-color-function'),
postcssCustomMedia = require('postcss-custom-media'),
postcssNested = require('postcss-nested'),
postcssMixins = require('postcss-mixins'),
autoprefixer = require('autoprefixer'),
cssnano = require('cssnano'),
defaults = require('../css/defaults.json')
module.exports = [
postcssImport,
postcssMixins,
postcssEach,
postcssFor,
postcssSimpleVars({ variables: defaults }),
postcssCalc({ mediaQueries: true }),
postcssNested,
postcssColorFunction,
postcssCustomMedia,
autoprefixer({ browsers: ['last 3 versions'] }),
cssnano
]
fallback: path.join(__dirname, 'node_modules'),
extensions: ['', '.js', '.jsx'],
unsafeCache: true
},
resolveLoaders: {
root: path.join(__dirname, 'node_modules'),
fallback: path.join(__dirname, 'node_modules')
},
postcss: [
postcssImport({
addDependencyTo: webpack
}),
postcssNested({}),
postcssVars({
unknown: function (node, name, result) {
node.warn(result, `Unknown variable ${name}`);
}
}),
rucksack({
autoprefixer: true
})
],
plugins: [
new HappyPack({
id: 'css',
threads: 4,
loaders: [
'style',
'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss'
]
var compressor = require('node-minify')
var conditionals = require('postcss-conditionals')
var customMedia = require("postcss-custom-media")
var simpleVars = require("postcss-simple-vars")
var purify = require('purify-css');
var cssnext = require('postcss-cssnext');
// css to be processed
var css = fs.readFileSync("src/htps.css", "utf8")
// process css
var output = postcss()
.use(atImport())
.use(cssvariables())
.use(simpleVars())
.use(conditionals())
.use(customMedia())
.use(cssnext())
.process(css, {
from: "./src/htps.css",
to: "./css/htps.css"
})
.css
fs.writeFile("css/htps.css", output, 'utf-8')
// Using Sqwish for CSS
new compressor.minify({
type: 'sqwish',
loader: 'url?limit=100000'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
}
]
},
postcss: [
stylelint(),
autoprefixer({
browsers: ['last 2 versions']
}),
vars({
variables: require('./Resources/Private/JavaScript/Shared/Constants/Theme.js')
}),
postCssImport(),
nested(),
hexToRgba()
],
resolve: {
root: [
path.resolve(__dirname, 'Resources/Private/JavaScript')
],
modulesDirectories: [
'node_modules',
path.resolve(__dirname, './node_modules')
]
},
gulp.task('components', function(){
// POSTCSS PLUGINS SETTINGS
var processors = [
postcssImport
, vars({
variables: function(){
delete require.cache[require.resolve('./' + src + '/variables.js')];
return require('./' + src + '/variables.js');
},
silent: true,
unknown: function (node, name, result) {
node.warn(result, 'Unknown variable ' + name);
}
})
, nested
, cssvariables
, minmax
, mscale
, grid({separator: '--'})
// , font
];
var postprocess = [
autoprefixer
, customProperties
, pxtorem({
propWhiteList: ['font', 'font-size', 'line-height', 'letter-spacing', 'margin', 'padding'],
mediaQuery: true
})
, query({sort: true})
, cssnano
];
return gulp.src(src + '/*.jade')
.pipe($.foreach(function(stream, file){
// BASE FILE NAME
var name = path.basename(file.path);
// CSS
var cssFileName = name.replace(/\.[^.]*$/i, '.css');
var cssFilePath = 'assets/css/';
var cssFileLink = '<link rel="stylesheet" type="text/css" href="'+ cssFilePath + cssFileName +'"/>';
// JS
var jsFileName = name.replace(/\.[^.]*$/i, '.min.js');
var jsFilePath = 'assets/js/';
var jsFileLink = '<script src="'+ jsFilePath + jsFileName +'"></script>';
// RETURN STREAM
return stream
// JADE 2 HTML
.pipe($.jade())
.pipe($.posthtml([
posthtmlBem({
elemPrefix: '__',
modPrefix: '_',
modDlmtr: '--'
})
]))
// EXTRACT JS AND CSS
.pipe($.resources())
// JS
.pipe($.if('**/*.js', $.concat(jsFolder + jsFileName)))
.pipe($.if(jsFolder + '*.js', $.uglify()))
// CSS
.pipe($.if('**/*.css', $.postcss(processors)))
.pipe($.if('**/*.css', $.concat(cssFolder + cssFileName)))
.pipe($.if('assets/css/**/*.css', $.postcss(postprocess)))
.pipe($.replace(/<link href[^>]+?[ ]*>/g, ''))
.pipe($.replace(/<script src[^>]+?[ ]*><\/[^>]+?[ ]*>/g, ''))
.pipe($.replace('img/', 'assets/img/'))
.pipe($.replace('<css></css>', cssFileLink))
.pipe($.replace('<js></js>', jsFileLink))
}))
.pipe(gulp.dest(dest));
});