gulp.task('styl', function () {
gulp.src(path.src.styl+'*.styl')
.pipe(stylus({
'include css': true,
use: [rupture()],
}))
.on('error', onError)
.pipe(postcss([
autoprefixer(),
clipPathPolyfill(),
require('postcss-focus')(),
cssvariables({
preserve: true,
}),
cssMqpacker({sort: true}),
assets({
loadPaths: ['src/img/'],
relative: 'src/stylus'
}),
// require('postcss-cssnext')(),
require('cssnano')(),
]))
.on('error', onError)
.pipe(gulp.dest(path.public.css))
.pipe(reload({stream:true}));
})
postcss: function processPostcss(webpack) {
return [
postcssImport({
addDependencyTo: webpack
}),
postcssCustomMedia(),
postcssCssVariables(),
postcssCalc(),
precss,
autoprefixer({ browsers: ['last 2 versions'] })
];
},
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) })
})
postcss: function(wp) {
return [
cssimports({
addDependencyTo: wp
}),
cssvariables(),
cssnesting(),
rucksack({
autoprefixer: true
})
];
},
var fs = require("fs")
var autoprefixer = require("autoprefixer")
var postcss = require("postcss")
var atImport = require("postcss-import")
var cssvariables = require('postcss-css-variables')
var compressor = require('node-minify')
var conditionals = require('postcss-conditionals')
var customMedia = require("postcss-custom-media")
// css to be processed
var css = fs.readFileSync("src/style.css", "utf8")
// process css
var output = postcss()
.use(atImport())
.use(cssvariables())
.use(conditionals())
.use(customMedia())
.use(autoprefixer())
.process(css, {
from: "./src/style.css",
to: "./css/style.css"
})
.css
fs.writeFile("css/style.css", output, 'utf-8')
// Using Sqwish for CSS
new compressor.minify({
type: 'sqwish',
fileIn: './css/style.css',
import include from 'postcss-import';
import precss from 'precss';
import variables from 'postcss-css-variables';
import cssnext from 'postcss-cssnext';
import assets from 'postcss-assets';
import mqpacker from 'css-mqpacker';
const options = require(path.resolve('config/kit'));
let files = options.entry.css.map((file) => path.join('app', 'css', file));
let plugins = [
include(),
precss(options.precss),
variables(),
cssnext(options.cssnext),
assets({
loadPaths: options.discover,
basePath: 'build/'
}),
mqpacker({
sort: true
})
];
gulp.task('postcss', () => {
return gulp.src(files, {base: 'app', allowEmpty: true})
.pipe(postcss(plugins))
.pipe(minify({keepSpecialComments: 0}))
.pipe(gulp.dest('build'))
gulp.task('buildPackage', done => {
console.log('[buildPackage]', argv.package);
let p = `packages/${argv.package}/src/index.ts`;
let plugins = [];
let config = {
mode: 'none',
entry: {
[p.split('/')[1]]: './' + p
},
output: {
path: path.join(__dirname, '../../packages'),
filename: '[name]/dist/index.js',
library: '@riim/[name]',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /(?:node_modules|bower_components)/,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.ts$/,
exclude: /(?:node_modules|bower_components)/,
loader: 'awesome-typescript-loader'
},
{
test: /\.rnt$/,
loader: ['raw-loader', 'trim-lines-loader', 'collapse-line-breaks-loader']
},
{
test: /\.css$/,
loader: [
'simple-css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
postcssCSSVariables(),
postcssRioniteComponent(),
postcssNested(),
postcssColorFunction(),
autoprefixer({ browsers: ['last 3 versions'] }),
csso({ restructure: false })
]
}
}
]
},
{
test: /\.svg$/,
loader: 'simple-svg-loader',
options: {
removeAttributes: ['stroke-width', 'stroke', 'fill']
}
}
]
},
resolve: {
extensions: ['.ts', '.js']
},
context: path.join(__dirname, '../..'),
externals,
plugins,
node: {
console: false,
global: false,
process: false,
__filename: false,
__dirname: false,
Buffer: false,
setImmediate: false
}
};
webpack(config, onComplete);
function onComplete(err, stats) {
if (err) {
onError(err);
} else {
let strStats = stats.toString({ colors: true, reasons: true });
if (stats.hasErrors()) {
onError(strStats);
} else {
onSuccess(strStats);
}
}
}
function onError(err) {
done(new gutil.PluginError('webpack', err));
}
function onSuccess(detailInfo) {
gutil.log('[webpack]', detailInfo);
done();
}
});
gulp.task('autoprefixer', function() {
return gulp.src('src/*.css')
.pipe(postcss([ autoprefixer, cssvariables(/* options */) ]))
.pipe(gulp.dest('dest/'));
});
gulp.task('styles', function () {
return gulp.src('src/*.css')
.pipe(postcss([ nested(), cssvariables(), neat({neatMaxWidth: '64rem'}) ]))
.pipe(gulp.dest('dest/'));
});