Sublime Forum

Package to convert all syles to Inline?

#1

Hi,
Sometimes I have to build email/signatures for which inline styling is a must and thus a tool is required to convert all styles of heading to inline. Such as: CSS Inliner Tool

Do we have any package in sublime through which it can be done?

0 Likes
#2

i guess we don’t have stuff like this. at least i never see those kind of a packages for sublime

1 Like
#3

you can do it with gulp
https://www.npmjs.com/package/gulp-inline-css
and there is a nice plugin for gulp https://packagecontrol.io/packages/Gulp

0 Likes
#4

Hi,
Thanks for the link: https://packagecontrol.io/packages/Gulp

I have installed gulp plugin in my Sublime, how can I now get it working? :slight_smile:

0 Likes
#5

you need to install gulp globally to your system, so that the gulp was available via command line
check https://gulpjs.com/
Gulp requires NodeJS, so you must install it first
https://nodejs.org/en/
yea)) and than install those plugin for inline css.
and here is a sample of gulpfile.js(file with the gulp tasks)

const gulp = require('gulp'),
inlineCss = require('gulp-inline-css'), // npm i -D gulp-inline-css
htmlmin = require('gulp-htmlmin');  // npm i -D gulp-htmlmin -> command to install

gulp.task('build:email', function() {
	return gulp.src('./template.html')
	.pipe(inlineCss({
		removeHtmlSelectors: true,
	}))
	.pipe(htmlmin({
		collapseInlineTagWhitespace: true,
		collapseWhitespace: true,
		minifyCSS: true,
		removeComments: true
	}))
	.pipe(gulp.dest('build/'));
});

as you can see i use it with html minifier (gulp-htmlmin). and maybe there is some error, because my full gulpfile looks like

'use strict';
// https://www.youtube.com/playlist?list=PLDyvV36pndZFLTE13V4qNWTZbeipNhCgQ
//@todo: add and configure gulp-sftp and gulp-git as a "deploy" task
const gulp = require('gulp'),
concat = require('gulp-concat'), //npm i -D gulp-concat // -D same as --save-dev
debug = require('gulp-debug'), //npm install --save-dev gulp-debug
plumber = require('gulp-plumber'),
notify = require("gulp-notify"),
inlineCss = require('gulp-inline-css'),
htmlmin = require('gulp-htmlmin'),
browserSync = require("browser-sync").create();
// bsReload = browserSync.reload, //don't need for now


gulp.task('build:email', function() {
	// return gulp.src('./*.html')
	return gulp.src('./template.html')
	.pipe(inlineCss({
		removeHtmlSelectors: true,
	}))
	.pipe(htmlmin({
		collapseInlineTagWhitespace: true,
		collapseWhitespace: true,
		// conservativeCollapse: true
		minifyCSS: true,
		removeComments: true,
		// preserveLineBreaks: true
	}))
	.pipe(gulp.dest('build/'));
});


gulp.task('watch', function() {

	var currentDir = __dirname.split("\\");
	currentDir = 'https://' + currentDir[currentDir.length - 1];

	browserSync.init({
		open: false,
		notify: false,
		logLevel: 'warn',
		logFileChanges: false,
		ghostMode: {
			clicks: false, // not work on regular links("a" tags) with Turbolinks 5.2.0 - https://github.com/turbolinks/turbolinks, and had bugs in Firefox(right click works as left)
			forms: true,
			scroll: true
		},
		snippetOptions: {
			rule: {
				async: true, // add async attribute to script tag
				// match: /<\/head>/i,
				match: /$/, // insert browserSync script at the and of page
				fn: function (snippet, match) {
					return snippet + match;
				}
			}
		},
		server: {
			baseDir: './',
			directory: true // show directory listing if not index file, e.g. for avoid "cannot GET error"
		},
		// proxy: 'https://stream-classifieds',
		// proxy: currentDir, // set current directory name as host for proxy(for Open Server)
		files: [
		'./*.html',
		'./*.css'
		],
	});

});

it’s a little messy) and require plugins for my other tasks

1 Like