gulp.task('styles', function () {
var processors = [
atImport(),
cssnext({browsers: ['last 2 versions']}),
cssnano(),
];
// return gulp.src('./src/*.css')
// to watch all files in the directory
return gulp.src('./src/styles.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dist'));
});
postcss: function(wp) {
return [
cssimports({
addDependencyTo: wp
}),
cssvariables(),
cssnesting(),
rucksack({
autoprefixer: true
})
];
},
components.forEach(function (component) {
var newDir = rmHtmlExt(component.replace('src/', ''))
var newFile = newDir + '/index.html'
var componentHtml = fs.readFileSync(component, 'utf8')
var fmParsed = fm.parse(componentHtml)
var frontMatter = fmParsed.attributes || {}
frontMatter.bodyClass = frontMatter.bodyClass || ''
frontMatter.title = frontMatter.title || getTitle(component)
frontMatter.name = frontMatter.name || getName(component)
frontMatter.classes = getClasses(fmParsed.body).map(function(klass) {
return '.' + klass
})
frontMatter.componentHtml = componentHtml
frontMatter.content = fmParsed.body
frontMatter.escapedHtml = escapeHtml(fmParsed.body)
frontMatter.footer = footer
frontMatter.analytics = analytics
frontMatter.head = head
frontMatter.highlight = highlight
frontMatter.componentsForNav = componentsForNav
var moduleSrcs = {}
var getModules = postcss.plugin('get-modules', function () {
return function (css, result) {
css.walkRules(function (rule) {
moduleSrcs[rule.source.input.from] = true
})
}
})
postcss([
atImport(), cssVariables(), conditionals(), customMedia(), select(frontMatter.classes),
removeComments({ removeAll: true }), mqPacker(), removeEmpty(), getModules(), perfectionist()
]).process(tachyonsCss, {
from: 'src/css/tachyons.css'
}).then(function (result) {
console.log('component css selection complete for', component)
frontMatter.componentCss = result.css
frontMatter.stats = cssstats(frontMatter.componentCss)
// TODO: Update me once src/ uses the npm modules
frontMatter.modules = Object.keys(moduleSrcs).map(function (module) {
return 'tachyons-' + module.split('/_')[1].replace('.css', '')
})
var compiledPage = _.template(template)(frontMatter)
console.log('creating new dir', newDir)
mkdirp.sync(newDir)
fs.writeFileSync(newFile, compiledPage)
console.log('finished component build for', component)
}).catch(function (e) { console.log(e) })
})
function transformSyntax(input, src, path) {
const processors = [
pcssImport({ path: ['src/styles'] }),
pcssMixins,
pcssVar,
pcssNested,
autoprefixer,
];
return postcss(processors).process(input, {
from: `${path}/${src}.css`,
}).then(result => result.css).catch(err => console.log(err));
}
postcss: function (webpack) {
return [
postcssImport({
addDependencyTo: webpack
}),
require('postcss-clearfix'),
require('postcss-mixins'),
require('autoprefixer'),
require('postcss-custom-media'),
require('postcss-css-variables'),
];
},
gulp.task('css', function() {
var processors = [
cssimport(),
autoprefixer({
browsers: ['last 2 versions']
})
];
return gulp.src(SRC + '/assets/css/style*.css')
.pipe(postcss(processors))
.pipe(gulp.dest(DEST + '/assets/css'));
});
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));
});
postcss: function(webpack) {
return [
postcssImport({addDependencyTo: webpack}),
precss,
autoprefixer,
postcssMixins,
simpleVars,
colorFunctions,
postcssBEM,
postcssNested,
customMedia
];
},
postcssPlugins: function(webpack) {
return [
postcssImport({
addDependencyTo: webpack
}),
cssnext({
browsers: ['last 2 versions', 'IE > 10'],
}),
postcssReporter({
clearMessages: true,
}),
];
},
postcss: function(webpack) {
return {
defaults: [postcssImport, precss, autoprefixer],
cleaner: [
postcssImport({
addDependencyTo: webpack,
path: [ path.resolve(__dirname, 'src') ]
}),
precss,
autoprefixer
]
}
}
gulp.task('styles', function() {
return (
gulp.src('./css/all.css')
.pipe(postcss([
cssimport(),
cssnext(),
reporter()
]))
.pipe(nano())
.pipe(gulp.dest('./dist/css'))
.pipe(browserSync.stream())
);
});
gulp.task('css', function () {
var processors = [
cssImport(),
autoprefixer({browsers: ['> 1%', 'last 2 versions']}),
];
return gulp.src(dirs.src + '/css/' + pkg.name + '.css')
.pipe(header(banner, {pkg:pkg}))
.pipe(postcss(processors))
.pipe(gulp.dest(dirs.dist + '/css'))
.pipe(cssnano())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(dirs.dist + '/css'));
});
postcss: function (webpack) {
return [
atImport({ addDependencyTo: webpack }),
precss,
fontMagician,
cssnext({ browsers: ['last 2 versions'] }),
lost,
postCSSFocus,
nested,
mqpacker,
cssnano({ autoprefixer: false })
]
}
postcss: function () {
return [
cssimport({
// see postcss-import docs to learn about onImport callback
// https://github.com/postcss/postcss-import
path: spec.stylePath,
onImport: function (files) {
files.forEach(this.addDependency)
}.bind(this)
}),
cssnext()
]
},
gulp.task('styles', function () {
var processors = [
cssimport(),
hwb(),
customMedia(),
customProperties(),
autoprefixer({ browsers: ['last 2 versions'] })
];
return gulp.src(['css/main.css', 'css/frontpage-only.css'])
.pipe(postcss(processors))
.pipe(gulp.dest('dist/css'));
});
gulp.task('css', function () {
var processors = [
autoprefixer({browsers: ['last 1 version']}),
atImport({from: './src/style.css'})
]
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./build'))
.pipe(connect.reload())
})
gulp.task('postcss', ['clean-css'], function() {
var processors = [
autoprefixer({browsers: ['last 1 version']}),
inlineImport(),
gray(),
nested(),
variables()
];
return gulp.src('./src/css/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./build/css'))
.pipe(browserSync.stream());
});
module.exports = function (_ctx) {
return {
'map': ENABLE_SOURCE_MAP ? { 'inline': false } : false,
'plugins': [
importPlugin({
root: process.cwd(),
path: [], // we'd like to enforce to use a relative path.
skipDuplicates: true,
}),
],
};
};
config.postcss = function(webpack) {
return [
postcssImport({
async: true,
addDependencyTo: webpack,
}),
autoprefixer({
browsers: ['last 2 versions'],
}),
postcssFontMagician(),
precss(),
]
}
module.exports = co.wrap(function* (config) {
const
from = `${ config.root }/src/global.css`,
to = `${ config.output }/global.css`,
css = yield fsp.readFile(from, 'utf8'),
p = postcss()
.use(postcssImport())
.use(postcssUrl())
.use(autoprefixer())
.use(cssnano({ safe: true })),
result = yield p.process(css, { from, to })
yield fsp.writeFile(to, result.css)
})
postcss: function () {
// use webpack context
var postcssImport = require('postcss-import');
return [
postcssImport({
onImport: function (files) {
files.forEach(this.addDependency);
}.bind(this)
}),
require('postcss-custom-properties'),
]
},
function bundle () {
return gulp.src('./test/manual/suite/**/*.css')
.pipe(plumber(handleError))
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(postcss([
atImport()
]))
.pipe(sourcemaps.write())
.pipe(plumber.stop())
.pipe(gulp.dest('./test-dist'))
.pipe(debug({ title: 'Style:' }));
}
config.postcss = webpack => [
importer({
addDependencyTo: webpack
}),
stylelint,
cssnext,
lost,
normalize,
// this doesn't work with unicode-range etc
font({
formats: 'woff2'
}),
reporter
]
test("cssNodeContextLookup checking media context", t => {
const testLookup = cssNodeContextLookup()
t.plan(8)
postcss([postcssImport()])
.process("@import 'fixtures/one.css'; @import 'fixtures/two.css';", {
from: path.join(__dirname, "fake.css"),
})
.then(result => {
const rulesBySelector = {}
result.root.walkRules(rule => {
rulesBySelector[rule.selector] = rule
})
// a-d are in one file; e-h in another
t.equal(
testLookup.getContext(rulesBySelector.a, rulesBySelector.a.parent),
testLookup.getContext(rulesBySelector.b, rulesBySelector.b.parent)
)
t.notEqual(
testLookup.getContext(rulesBySelector.a, rulesBySelector.a.parent),
testLookup.getContext(rulesBySelector.c, rulesBySelector.c.parent)
)
t.notEqual(
testLookup.getContext(rulesBySelector.a, rulesBySelector.a.parent),
testLookup.getContext(rulesBySelector.e, rulesBySelector.e.parent)
)
t.equal(
testLookup.getContext(rulesBySelector.c, rulesBySelector.c.parent),
testLookup.getContext(rulesBySelector.d, rulesBySelector.d.parent)
)
t.notEqual(
testLookup.getContext(rulesBySelector.c, rulesBySelector.c.parent),
testLookup.getContext(rulesBySelector.g, rulesBySelector.g.parent)
)
t.equal(
testLookup.getContext(rulesBySelector.e, rulesBySelector.e.parent),
testLookup.getContext(rulesBySelector.f, rulesBySelector.f.parent)
)
t.notEqual(
testLookup.getContext(rulesBySelector.f, rulesBySelector.f.parent),
testLookup.getContext(rulesBySelector.g, rulesBySelector.g.parent)
)
t.equal(
testLookup.getContext(rulesBySelector.g, rulesBySelector.g.parent),
testLookup.getContext(rulesBySelector.h, rulesBySelector.h.parent)
)
})
.catch(err => console.log(err.stack)) // eslint-disable-line
})
plugins: () => {
const plugins = [
postcssImport(),
postcssPresetEnv({
stage: 0
})
]
if (argv.mode === 'production') {
plugins.push(cssnano());
}
return plugins;
}
postcss: function () {
return [
postcssImport({
addDependencyTo: webpack,
// path: [path.resolve(rootDir, 'node_modules')]
// path: path.resolve(rootDir, 'src')
}),
postcssMixins,
postcssSimpleVars,
postcssNested,
postcssNormalize,
autoprefixer({browsers: ['last 2 version']})
];
},
gulp.task('styles', function() {
var processors = [
autoprefixer,
atImport()
];
return gulp.src(config.paths.scss.entry)
.pipe(sass({
includePaths: ['node_modules/'],
})).on('error', sass.logError)
.pipe(postcss(processors))
.pipe(gulp.dest(config.paths.css.dest))
.pipe(gulpif(browserSync.active, browserSync.reload({stream: true})));
});
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
}
plugins: loader => [
cssImport({
skipDuplicates: true
}),
require('postcss-flexbugs-fixes'),
require('postcss-mixins'),
postcssPresetEnv({
stage: 2,
features: {
"nesting-rules": true
}
}),
require('precss') // SASS-like markup,
]
postcss: function(webpack) {
return [
postcssImport({addDependencyTo: webpack}),
stylelint({
config: require('../stylelint.config.js'),
failOnError: true
}),
// do not autoprefixer the css because of style lint in development env,
// whereas it will be called in production env, see production.config.js
// cssnext({autoprefixer: {browsers: "ie >= 9, ..."}}),
postcssReporter({clearMessages: true})
];
}