From 653820239fb956a91dc9fc6a7ac2145b60de9f78 Mon Sep 17 00:00:00 2001 From: budfy Date: Tue, 5 Jan 2021 12:36:39 +0200 Subject: [PATCH 01/10] Pseudo elements added --- index.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 2f266f8..531b1e2 100644 --- a/index.js +++ b/index.js @@ -81,6 +81,28 @@ module.exports = function (options) { cssRule.push(' height: ' + height + ';'); } cssRule.push('}'); + cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + '-before::before' + ' {'); + cssRule.push(' content:\'\';'); + cssRule.push(' background-image: url("data:image/svg+xml;charset=utf8, ' + encodedSvg + '");'); + cssRule.push(' background-size: contain;'); + cssRule.push(' background-repeat: no-repeat;'); + cssRule.push(' background-position: center center;'); + if (options.addSize) { + cssRule.push(' width: ' + width + ';'); + cssRule.push(' height: ' + height + ';'); + } + cssRule.push('}'); + cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + '-after::after' + ' {'); + cssRule.push(' content:\'\';'); + cssRule.push(' background-image: url("data:image/svg+xml;charset=utf8, ' + encodedSvg + '");'); + cssRule.push(' background-size: contain;'); + cssRule.push(' background-repeat: no-repeat;'); + cssRule.push(' background-position: center center;'); + if (options.addSize) { + cssRule.push(' width: ' + width + ';'); + cssRule.push(' height: ' + height + ';'); + } + cssRule.push('}'); return cssRule.join('\n'); } @@ -103,7 +125,10 @@ module.exports = function (options) { height = height + 'px'; } - return { width: width, height: height }; + return { + width: width, + height: height + }; } var cssRules = []; From d973c1630da44596027ebdd80b12a163f6f87aa9 Mon Sep 17 00:00:00 2001 From: budfy Date: Sun, 10 Jan 2021 18:11:49 +0200 Subject: [PATCH 02/10] Pseudo elements optimized --- index.js | 13 +++++-------- package.json | 20 +++++++++++++------- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 531b1e2..8663c08 100644 --- a/index.js +++ b/index.js @@ -74,8 +74,13 @@ module.exports = function (options) { */ function buildCssRule(normalizedFileName, encodedSvg, width, height) { var cssRule = []; + cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + ',' + + options.cssSelector + options.cssPrefix + normalizedFileName + '-before::before' + ',' + + options.cssSelector + options.cssPrefix + normalizedFileName + '-after::after' + '{') cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + ' {'); cssRule.push(' background-image: url("data:image/svg+xml;charset=utf8, ' + encodedSvg + '");'); + cssRule.push('}'); + cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + '{') if (options.addSize) { cssRule.push(' width: ' + width + ';'); cssRule.push(' height: ' + height + ';'); @@ -83,10 +88,6 @@ module.exports = function (options) { cssRule.push('}'); cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + '-before::before' + ' {'); cssRule.push(' content:\'\';'); - cssRule.push(' background-image: url("data:image/svg+xml;charset=utf8, ' + encodedSvg + '");'); - cssRule.push(' background-size: contain;'); - cssRule.push(' background-repeat: no-repeat;'); - cssRule.push(' background-position: center center;'); if (options.addSize) { cssRule.push(' width: ' + width + ';'); cssRule.push(' height: ' + height + ';'); @@ -94,10 +95,6 @@ module.exports = function (options) { cssRule.push('}'); cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + '-after::after' + ' {'); cssRule.push(' content:\'\';'); - cssRule.push(' background-image: url("data:image/svg+xml;charset=utf8, ' + encodedSvg + '");'); - cssRule.push(' background-size: contain;'); - cssRule.push(' background-repeat: no-repeat;'); - cssRule.push(' background-position: center center;'); if (options.addSize) { cssRule.push(' width: ' + width + ';'); cssRule.push(' height: ' + height + ';'); diff --git a/package.json b/package.json index 7671d9f..73f9952 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "gulp-svg-css", - "version": "1.3.0", - "description": "Gulp plugin that embeds svg images inside a single CSS file using data-uri.", + "name": "gulp-svg-css-pseudo", + "version": "1.0.0", + "description": "Gulp plugin that embeds svg images inside a single CSS file using data-uri. Created on the basis of the plugin gulp-svg-css by Jan Bevers", "main": "index.js", "scripts": { "test": "_mocha", @@ -10,18 +10,20 @@ }, "repository": { "type": "git", - "url": "https://github.com/sdl/gulp-svg-css.git" + "url": "git+https://github.com/budfy/gulp-svg-css-pseudo.git" }, "keywords": [ "gulpplugin", "svg", "css", + "pseudoelements", "inline", "minification" ], "author": { - "name": "Jan Bevers", - "email": "jbevers@sdl.com" + "name": "budfy", + "email": "serdyuk.ro@gmail.com", + "github profile": "https://github.com/budfy" }, "license": "Apache-2.0", "devDependencies": { @@ -35,5 +37,9 @@ "gulp-util": "^3.0.7", "through2": "^2.0.1", "xmldom": "^0.1.22" - } + }, + "bugs": { + "url": "https://github.com/sdl/gulp-svg-css/issues" + }, + "homepage": "https://github.com/budfy/gulp-svg-css-pseudo#readme" } From 60ce07d02d392f1661ddbfb69102fc3dfe3024c6 Mon Sep 17 00:00:00 2001 From: budfy Date: Sun, 10 Jan 2021 18:16:02 +0200 Subject: [PATCH 03/10] Pseudo elements optimized --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 715aea5..7199378 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ -# gulp-svg-css -[![Build Status](https://travis-ci.org/sdl/gulp-svg-css.svg?branch=master)](https://travis-ci.org/sdl/gulp-svg-css) -[![Coverage Status](https://coveralls.io/repos/github/sdl/gulp-svg-css/badge.svg?branch=master)](https://coveralls.io/github/sdl/gulp-svg-css?branch=master) -[![npm version](https://badge.fury.io/js/gulp-svg-css.svg)](https://badge.fury.io/js/gulp-svg-css) -[![Dependency Status](https://david-dm.org/sdl/gulp-svg-css.svg)](https://david-dm.org/sdl/gulp-svg-css) -[![devDependency Status](https://david-dm.org/sdl/gulp-svg-css/dev-status.svg)](https://david-dm.org/sdl/gulp-svg-css#info=devDependencies) +# gulp-svg-css-pseudo +[![Build Status](https://travis-ci.org/sdl/gulp-svg-css.svg?branch=master)](https://travis-ci.org/sdl/gulp-svg-css-pseudo) +[![Coverage Status](https://coveralls.io/repos/github/sdl/gulp-svg-css/badge.svg?branch=master)](https://coveralls.io/github/sdl/gulp-svg-css-pseudo?branch=master) +[![npm version](https://badge.fury.io/js/gulp-svg-css.svg)](https://badge.fury.io/js/gulp-svg-css-pseudo) +[![Dependency Status](https://david-dm.org/sdl/gulp-svg-css.svg)](https://david-dm.org/sdl/gulp-svg-css-pseudo) +[![devDependency Status](https://david-dm.org/sdl/gulp-svg-css/dev-status.svg)](https://david-dm.org/sdl/gulp-svg-css-pseudo#info=devDependencies) Gulp plugin that embeds svg images inside a single CSS file using data-uri. @@ -93,7 +93,7 @@ Similar to defaultWidth, but for height. ## License -Copyright (c) 2015 All Rights Reserved by the SDL Group. +Copyright (c) 2021 All Rights Reserved by the SDL Group. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. From aafe1ca34f9c519dd78a5445d473cdac83282fbb Mon Sep 17 00:00:00 2001 From: budfy Date: Sun, 10 Jan 2021 19:06:10 +0200 Subject: [PATCH 04/10] Change readme --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 7199378..4d4a188 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ # gulp-svg-css-pseudo -[![Build Status](https://travis-ci.org/sdl/gulp-svg-css.svg?branch=master)](https://travis-ci.org/sdl/gulp-svg-css-pseudo) -[![Coverage Status](https://coveralls.io/repos/github/sdl/gulp-svg-css/badge.svg?branch=master)](https://coveralls.io/github/sdl/gulp-svg-css-pseudo?branch=master) +[![Build Status](https://travis-ci.org/sdl/gulp-svg-css.svg?branch=master)](https://travis-ci.org/budfy/gulp-svg-css-pseudo) +[![Coverage Status](https://coveralls.io/repos/github/sdl/gulp-svg-css/badge.svg?branch=master)](https://coveralls.io/github/budfy/gulp-svg-css-pseudo?branch=master) [![npm version](https://badge.fury.io/js/gulp-svg-css.svg)](https://badge.fury.io/js/gulp-svg-css-pseudo) -[![Dependency Status](https://david-dm.org/sdl/gulp-svg-css.svg)](https://david-dm.org/sdl/gulp-svg-css-pseudo) -[![devDependency Status](https://david-dm.org/sdl/gulp-svg-css/dev-status.svg)](https://david-dm.org/sdl/gulp-svg-css-pseudo#info=devDependencies) +[![Dependency Status](https://david-dm.org/sdl/gulp-svg-css.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo) +[![devDependency Status](https://david-dm.org/sdl/gulp-svg-css/dev-status.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo#info=devDependencies) Gulp plugin that embeds svg images inside a single CSS file using data-uri. From 40b1684a908e99b7d5a77b41d902bd0ee9fdfcd8 Mon Sep 17 00:00:00 2001 From: Roman Serdiuk <51324307+budfy@users.noreply.github.com> Date: Sun, 10 Jan 2021 19:24:50 +0200 Subject: [PATCH 05/10] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4d4a188..cf43d65 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ [![Coverage Status](https://coveralls.io/repos/github/sdl/gulp-svg-css/badge.svg?branch=master)](https://coveralls.io/github/budfy/gulp-svg-css-pseudo?branch=master) [![npm version](https://badge.fury.io/js/gulp-svg-css.svg)](https://badge.fury.io/js/gulp-svg-css-pseudo) [![Dependency Status](https://david-dm.org/sdl/gulp-svg-css.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo) -[![devDependency Status](https://david-dm.org/sdl/gulp-svg-css/dev-status.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo#info=devDependencies) +[![devDependency Status](https://david-dm.org/budfy/gulp-svg-css-pseudo/dev-status.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo#info=devDependencies) Gulp plugin that embeds svg images inside a single CSS file using data-uri. From bf66d17e504bcf662e441ac6fa8efff96341ab3d Mon Sep 17 00:00:00 2001 From: Roman Serdiuk <51324307+budfy@users.noreply.github.com> Date: Sun, 10 Jan 2021 19:38:36 +0200 Subject: [PATCH 06/10] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cf43d65..873b572 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # gulp-svg-css-pseudo [![Build Status](https://travis-ci.org/sdl/gulp-svg-css.svg?branch=master)](https://travis-ci.org/budfy/gulp-svg-css-pseudo) [![Coverage Status](https://coveralls.io/repos/github/sdl/gulp-svg-css/badge.svg?branch=master)](https://coveralls.io/github/budfy/gulp-svg-css-pseudo?branch=master) -[![npm version](https://badge.fury.io/js/gulp-svg-css.svg)](https://badge.fury.io/js/gulp-svg-css-pseudo) +[![npm version](https://badge.fury.io/js/gulp-svg-css-pseudo.svg)](https://badge.fury.io/js/gulp-svg-css-pseudo) [![Dependency Status](https://david-dm.org/sdl/gulp-svg-css.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo) [![devDependency Status](https://david-dm.org/budfy/gulp-svg-css-pseudo/dev-status.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo#info=devDependencies) From a6e223bb9387a0d5f57d02d70518cb52303cfb24 Mon Sep 17 00:00:00 2001 From: Roman Serdiuk <51324307+budfy@users.noreply.github.com> Date: Sun, 10 Jan 2021 19:39:48 +0200 Subject: [PATCH 07/10] Readme fix 2 --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 873b572..d0a7bd5 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # gulp-svg-css-pseudo -[![Build Status](https://travis-ci.org/sdl/gulp-svg-css.svg?branch=master)](https://travis-ci.org/budfy/gulp-svg-css-pseudo) -[![Coverage Status](https://coveralls.io/repos/github/sdl/gulp-svg-css/badge.svg?branch=master)](https://coveralls.io/github/budfy/gulp-svg-css-pseudo?branch=master) +[![Build Status](https://travis-ci.org/budfy/gulp-svg-css-pseudo.svg?branch=master)](https://travis-ci.org/budfy/gulp-svg-css-pseudo) +[![Coverage Status](https://coveralls.io/repos/github/budfy/gulp-svg-css-pseudo/badge.svg?branch=master)](https://coveralls.io/github/budfy/gulp-svg-css-pseudo?branch=master) [![npm version](https://badge.fury.io/js/gulp-svg-css-pseudo.svg)](https://badge.fury.io/js/gulp-svg-css-pseudo) -[![Dependency Status](https://david-dm.org/sdl/gulp-svg-css.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo) +[![Dependency Status](https://david-dm.org/budfy/gulp-svg-css-pseudo.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo) [![devDependency Status](https://david-dm.org/budfy/gulp-svg-css-pseudo/dev-status.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo#info=devDependencies) Gulp plugin that embeds svg images inside a single CSS file using data-uri. From 7ecf7c04d6d4bd70724ebd184cfb29c750cab703 Mon Sep 17 00:00:00 2001 From: budfy Date: Sun, 10 Jan 2021 19:41:09 +0200 Subject: [PATCH 08/10] Readme fix --- README.md | 2 -- package.json | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index d0a7bd5..35891e1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,4 @@ # gulp-svg-css-pseudo -[![Build Status](https://travis-ci.org/budfy/gulp-svg-css-pseudo.svg?branch=master)](https://travis-ci.org/budfy/gulp-svg-css-pseudo) -[![Coverage Status](https://coveralls.io/repos/github/budfy/gulp-svg-css-pseudo/badge.svg?branch=master)](https://coveralls.io/github/budfy/gulp-svg-css-pseudo?branch=master) [![npm version](https://badge.fury.io/js/gulp-svg-css-pseudo.svg)](https://badge.fury.io/js/gulp-svg-css-pseudo) [![Dependency Status](https://david-dm.org/budfy/gulp-svg-css-pseudo.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo) [![devDependency Status](https://david-dm.org/budfy/gulp-svg-css-pseudo/dev-status.svg)](https://david-dm.org/budfy/gulp-svg-css-pseudo#info=devDependencies) diff --git a/package.json b/package.json index 73f9952..9e892e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gulp-svg-css-pseudo", - "version": "1.0.0", + "version": "1.0.1", "description": "Gulp plugin that embeds svg images inside a single CSS file using data-uri. Created on the basis of the plugin gulp-svg-css by Jan Bevers", "main": "index.js", "scripts": { From 09a3b48ada7c694094706ecb3642d3a2a98b550a Mon Sep 17 00:00:00 2001 From: budfy Date: Sun, 10 Jan 2021 19:42:11 +0200 Subject: [PATCH 09/10] Readme fix --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9e892e1..433bf1d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gulp-svg-css-pseudo", - "version": "1.0.1", + "version": "1.0.2", "description": "Gulp plugin that embeds svg images inside a single CSS file using data-uri. Created on the basis of the plugin gulp-svg-css by Jan Bevers", "main": "index.js", "scripts": { From 44f70583528dfb0ba6bc254c4e6809c27bf34b0c Mon Sep 17 00:00:00 2001 From: budfy Date: Sun, 10 Jan 2021 21:23:12 +0200 Subject: [PATCH 10/10] Crytical fix --- index.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 8663c08..b6c358f 100644 --- a/index.js +++ b/index.js @@ -76,16 +76,15 @@ module.exports = function (options) { var cssRule = []; cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + ',' + options.cssSelector + options.cssPrefix + normalizedFileName + '-before::before' + ',' + - options.cssSelector + options.cssPrefix + normalizedFileName + '-after::after' + '{') - cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + ' {'); + options.cssSelector + options.cssPrefix + normalizedFileName + '-after::after' + '{'); cssRule.push(' background-image: url("data:image/svg+xml;charset=utf8, ' + encodedSvg + '");'); cssRule.push('}'); - cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + '{') if (options.addSize) { + cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + '{') cssRule.push(' width: ' + width + ';'); cssRule.push(' height: ' + height + ';'); + cssRule.push('}'); } - cssRule.push('}'); cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + '-before::before' + ' {'); cssRule.push(' content:\'\';'); if (options.addSize) {