From 889bd50c2adfc17a897594138d7464b204fd0362 Mon Sep 17 00:00:00 2001 From: Sergey Vasilev Date: Sun, 8 Feb 2015 14:44:47 +0300 Subject: [PATCH] Regex var, grunt setup, options bug MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit — Regexp using as variable — added example of grunt setup in doc — fixed bug with default options --- README.md | 47 ++++++++++++++++++++++++++++++++++++++++++++--- README_RU.md | 43 +++++++++++++++++++++++++++++++++++++++++-- index.js | 9 +++++---- package.json | 2 +- 4 files changed, 91 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 8b8646c..521ff2b 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,9 @@ Embedded data can be used in value of these properties: `background`, `background-image`, `border-image`, `src` (`@font-face`), `content` (pseudoelements). -Regexp `/url\("?data/g` is using to detect a data in values. +Regexp `/url\(["']?data/g` is using to detect a data in values. + +Этот документ [по-русски](https://github.com/Ser-Gen/postcss-data-packer/blob/master/README_RU.md). ## Installation @@ -60,7 +62,7 @@ Note that a reliable `gzip` can replace this function because duplicate rows can ### Using -Plugin can be used just like any other `PostCSS` plugin. For example, [Gulp](https://github.com/gulpjs/gulp) setup: +Plugin can be used just like any other `PostCSS` plugin. For example, [Gulp](https://github.com/gulpjs/gulp) setup (using [gulp-postcss](https://github.com/w0rm/gulp-postcss)): ```js var $ = require('gulp'); @@ -90,7 +92,7 @@ $.task('processcss--data', function () { ]; $.src('css/main.css') .pipe(plugins().postcss(processors)) - .pipe(plugins().rename('main_data.css')) // создаём новый файл + .pipe(plugins().rename('main_data.css')) // new file .pipe($.dest('css/')); }); @@ -99,6 +101,45 @@ $.task('default', function () { }); ``` +And [Grunt](https://github.com/gruntjs/grunt) setup (using [grunt-postcss](https://github.com/nDmitry/grunt-postcss)): + +```js +module.exports = function(grunt) { + 'use strict'; + require('load-grunt-tasks')(grunt); + + var dataPaker = require('postcss-data-packer'); + + grunt.initConfig({ + postcss: { + data: { + options: { + map: false, + processors: [ + dataPaker() + ] + }, + src: 'css/main.css', + dest: 'css/main_data.css' + }, + pure: { + options: { + map: false, + processors: [ + dataPaker({ + dataFile: false + }) + ] + }, + src: 'css/main.css' + } + } + }); + + return grunt.registerTask('default', ['postcss']); +}; +``` + And then declare these files in the markup: ```html diff --git a/README_RU.md b/README_RU.md index 0432cd5..f5254b0 100644 --- a/README_RU.md +++ b/README_RU.md @@ -4,7 +4,7 @@ Данные могут быть значениями свойств `background`, `background-image`, `border-image`, `src` (`@font-face`), `content` (псевдоэлементы). -Для определения данных используется выражение `/url\("?data/g`. +Для определения данных используется выражение `/url\(["']?data/g`. ## Установка @@ -60,7 +60,7 @@ npm install postcss-data-packer ### Подключение -Обработчик используется так же, как любой другой для `PostCSS`. Например, так для сборки [Галпом](https://github.com/gulpjs/gulp): +Обработчик используется так же, как любой другой для `PostCSS`. Например, так для сборки [Галпом](https://github.com/gulpjs/gulp) (используется [gulp-postcss](https://github.com/w0rm/gulp-postcss)): ```js var $ = require('gulp'); @@ -99,6 +99,45 @@ $.task('default', function () { }); ``` +А так можно настроить сборку [Грантом](https://github.com/gruntjs/grunt) (используется [grunt-postcss](https://github.com/nDmitry/grunt-postcss)): + +```js +module.exports = function(grunt) { + 'use strict'; + require('load-grunt-tasks')(grunt); + + var dataPaker = require('postcss-data-packer'); + + grunt.initConfig({ + postcss: { + data: { + options: { + map: false, + processors: [ + dataPaker() + ] + }, + src: 'css/main.css', + dest: 'css/main_data.css' + }, + pure: { + options: { + map: false, + processors: [ + dataPaker({ + dataFile: false + }) + ] + }, + src: 'css/main.css' + } + } + }); + + return grunt.registerTask('default', ['postcss']); +}; +``` + И затем подключаем эти файлы в разметке: ```html diff --git a/index.js b/index.js index d6f751b..57d14a6 100644 --- a/index.js +++ b/index.js @@ -1,12 +1,13 @@ module.exports = function (opts) { return function (css) { - opts = opts || true; + opts = opts || {}; var defs = { dataFile: true, pure: true }; + var dataRegexp = /url\(["']?data/g; opts = extend(defs, opts); @@ -29,7 +30,7 @@ module.exports = function (opts) { // удаляем свойства и правила без данных css.eachRule(function (rule, i) { rule.eachDecl(function (decl, j) { - if (!(/url\(["']?data/g.test(decl.value))) { + if (!(dataRegexp.test(decl.value))) { decl.removeSelf(); }; if (rule.nodes.length === 0) { @@ -123,7 +124,7 @@ module.exports = function (opts) { function removeData () { css.eachRule(function (rule, i) { rule.eachDecl(function (decl, j) { - if (/url\(["']?data/g.test(decl.value)) { + if (dataRegexp.test(decl.value)) { decl.removeSelf(); }; if (rule.nodes.length === 0) { @@ -135,7 +136,7 @@ module.exports = function (opts) { if (atRule.name === 'font-face') { atRule.eachDecl(function (decl, j) { if (decl.prop === 'src') { - if (/url\(["']?data/g.test(decl.value)) { + if (dataRegexp.test(decl.value)) { atRule.removeSelf(); }; }; diff --git a/package.json b/package.json index 09711cc..5552f30 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "postcss-data-packer", - "version": "1.0.4", + "version": "1.0.5", "description": "PostCSS plugin to move an embedded data into a separate file", "keywords": [ "css",