Skip to content

Commit

Permalink
Regex var, grunt setup, options bug
Browse files Browse the repository at this point in the history
— Regexp using as variable
— added example of grunt setup in doc
— fixed bug with default options
  • Loading branch information
Ser-Gen committed Feb 8, 2015
1 parent 19b2ea4 commit 889bd50
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 10 deletions.
47 changes: 44 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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/'));
});

Expand All @@ -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
Expand Down
43 changes: 41 additions & 2 deletions README_RU.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Данные могут быть значениями свойств `background`, `background-image`, `border-image`, `src` (`@font-face`), `content` (псевдоэлементы).

Для определения данных используется выражение `/url\("?data/g`.
Для определения данных используется выражение `/url\(["']?data/g`.


## Установка
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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
Expand Down
9 changes: 5 additions & 4 deletions index.js
Original file line number Diff line number Diff line change
@@ -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);

Expand All @@ -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) {
Expand Down Expand Up @@ -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) {
Expand All @@ -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();
};
};
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down

1 comment on commit 889bd50

@Grawl
Copy link
Contributor

@Grawl Grawl commented on 889bd50 Feb 9, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool 😎 will try it in my next Grunt build

Please sign in to comment.