diff --git a/src/index.js b/src/index.js index 376d660..b9160a8 100644 --- a/src/index.js +++ b/src/index.js @@ -3,25 +3,25 @@ import postcss from 'postcss'; const filter = (filter, attributeSelector) => new RegExp(filter.map(attribut => `^\\[${attribut}`).join('|')).test(attributeSelector); export default postcss.plugin('postcss-attribute-selector-prefix', options => { - return nodes => { - return nodes.walkRules(rule => { - rule.selector = rule.selector.replace(/\[.*?]/g, match => { - if (options.prefix === undefined) { - return match; - } + return nodes => { + return nodes.walkRules(rule => { + rule.selector = rule.selector.replace(/\[.*?]/g, match => { + if (options.prefix === undefined) { + return match; + } - if (options.filter !== undefined && filter(options.filter, match) === false) { - return match; - } + if (options.filter !== undefined && filter(options.filter, match) === false) { + return match; + } - if (options.ignore !== undefined && filter(options.ignore, match) === true) { - return match; - } + if (options.ignore !== undefined && filter(options.ignore, match) === true) { + return match; + } - return match.replace(/(\[.*?="?)(.*?)("?])/, (match, before, requireds, after) => { - return `${before}${requireds.split(' ').map(required => options.prefix + required).join(' ')}${after}`; - }); - }); - }); - }; + return match.replace(/(\[.*?="?)(.*?)("?])/, (match, before, requireds, after) => { + return `${before}${requireds.split(' ').map(required => options.prefix + required).join(' ')}${after}`; + }); + }); + }); + }; }); diff --git a/test/test-plugin.js b/test/test-plugin.js index f9e678b..3b6c988 100644 --- a/test/test-plugin.js +++ b/test/test-plugin.js @@ -1,74 +1,74 @@ import test from 'ava'; import postcss from 'postcss'; -import plugin from '../src/'; +import plugin from '../src'; const processing = (inputCSS, options) => postcss([plugin(options)]).process(inputCSS).css; test('processing not options and not attribute selector', t => { - const expected = '.class, .test { color:red; }'; - const fixtures = '.class, .test { color:red; }'; - t.is(processing(fixtures), expected); + const expected = '.class, .test { color:red; }'; + const fixtures = '.class, .test { color:red; }'; + t.is(processing(fixtures), expected); }); test('processing options prefix and not attribute selector', t => { - const expected = '.class { color:red; }'; - const fixtures = '.class { color:red; }'; - t.is(processing(fixtures, {prefix: 'test-'}), expected); + const expected = '.class { color:red; }'; + const fixtures = '.class { color:red; }'; + t.is(processing(fixtures, {prefix: 'test-'}), expected); }); test('processing options prefix multiple', t => { - const expected = '.class, [type="test-text"], [class*="test-lorem-1 test-lorem-2"], [id^="test-myID"] { color:red; }'; - const fixtures = '.class, [type="text"], [class*="lorem-1 lorem-2"], [id^="myID"] { color:red; }'; - t.is(processing(fixtures, {prefix: 'test-'}), expected); + const expected = '.class, [type="test-text"], [class*="test-lorem-1 test-lorem-2"], [id^="test-myID"] { color:red; }'; + const fixtures = '.class, [type="text"], [class*="lorem-1 lorem-2"], [id^="myID"] { color:red; }'; + t.is(processing(fixtures, {prefix: 'test-'}), expected); }); test('processing options prefix and attribute selector', t => { - const expected = '.class, [type="test-text"] { color:red; }'; - const fixtures = '.class, [type="text"] { color:red; }'; - t.is(processing(fixtures, {prefix: 'test-'}), expected); + const expected = '.class, [type="test-text"] { color:red; }'; + const fixtures = '.class, [type="text"] { color:red; }'; + t.is(processing(fixtures, {prefix: 'test-'}), expected); }); test('processing options prefix, filter and attribute selector', t => { - const expected = '.class, [type="text"], [class*="test-lorem"] { color:red; }'; - const fixtures = '.class, [type="text"], [class*="lorem"] { color:red; }'; - t.is(processing(fixtures, { - prefix: 'test-', - filter: ['class'] - }), expected); + const expected = '.class, [type="text"], [class*="test-lorem"] { color:red; }'; + const fixtures = '.class, [type="text"], [class*="lorem"] { color:red; }'; + t.is(processing(fixtures, { + prefix: 'test-', + filter: ['class'] + }), expected); }); test('processing options prefix, filter and attribute selector witch indentical class filter', t => { - const expected = '.class, [type="text"], [alt*="class"] { color:red; }'; - const fixtures = '.class, [type="text"], [alt*="class"] { color:red; }'; - t.is(processing(fixtures, { - prefix: 'test-', - filter: ['class'] - }), expected); + const expected = '.class, [type="text"], [alt*="class"] { color:red; }'; + const fixtures = '.class, [type="text"], [alt*="class"] { color:red; }'; + t.is(processing(fixtures, { + prefix: 'test-', + filter: ['class'] + }), expected); }); test('processing options filter and attribute selector', t => { - const expected = '.class, [type="text"], [class*="lorem"] { color:red; }'; - const fixtures = '.class, [type="text"], [class*="lorem"] { color:red; }'; - t.is(processing(fixtures, { - filter: ['class'] - }), expected); + const expected = '.class, [type="text"], [class*="lorem"] { color:red; }'; + const fixtures = '.class, [type="text"], [class*="lorem"] { color:red; }'; + t.is(processing(fixtures, { + filter: ['class'] + }), expected); }); test('processing options prefix, filter, ignore and attribute selector', t => { - const expected = '.class, [type="text"], [class*="lorem"] { color:red; }'; - const fixtures = '.class, [type="text"], [class*="lorem"] { color:red; }'; - t.is(processing(fixtures, { - prefix: 'test', - filter: ['class'], - ignore: ['class'] - }), expected); + const expected = '.class, [type="text"], [class*="lorem"] { color:red; }'; + const fixtures = '.class, [type="text"], [class*="lorem"] { color:red; }'; + t.is(processing(fixtures, { + prefix: 'test', + filter: ['class'], + ignore: ['class'] + }), expected); }); test('processing options prefix, ignore and attribute selector', t => { - const expected = '.class, [type="text"], [class*="test-lorem"] { color:red; }'; - const fixtures = '.class, [type="text"], [class*="lorem"] { color:red; }'; - t.is(processing(fixtures, { - prefix: 'test-', - ignore: ['type'] - }), expected); + const expected = '.class, [type="text"], [class*="test-lorem"] { color:red; }'; + const fixtures = '.class, [type="text"], [class*="lorem"] { color:red; }'; + t.is(processing(fixtures, { + prefix: 'test-', + ignore: ['type'] + }), expected); });