8000 support customizing symbols in postcss version · geddski/csstyle@616e1ff · GitHub
[go: up one dir, main page]
Skip to content

Commit 616e1ff

Browse files
geddskigeddski
committed
support customizing symbols in postcss version
1 parent 37953e0 commit 616e1ff

File tree

2 files changed

+79
-57
lines changed

2 files changed

+79
-57
lines changed

‎csstyle.js‎

Lines changed: 73 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -8,67 +8,85 @@
88

99
var _ = require('lodash');
1010

11-
module.exports = function csstyle(css){
12-
css.eachRule(function(node){
13-
var output = '';
14-
var selectors = node.selector.split(' ').map(getAbstraction);
15-
selectors.forEach(function(selector, index){
16-
var previous = selectors[index - 1] || {};
17-
var spacing = '';
18-
// regular spacing before and after non-csstyle selectors
19-
if(selector.type === 'other' || previous.type === 'other'){
20-
spacing = ' ';
21-
}
22-
// special case for parts children of option
23-
if(selector.type === 'part' && previous.type === 'option'){
24-
var component = _.findLast(selectors, {type: 'component'});
25-
spacing = ' ';
26-
output += spacing + component.prefix + component.name + selector.prefix + selector.name;
27-
return;
28-
}
11+
module.exports = function (opts){
12+
// symbols are configurable
13+
opts = opts || {};
14+
opts.optionSymbol = opts.optionSymbol || '\\--';
15+
opts.partSymbol = opts.partSymbol || '__';
16+
opts.tweakSymbol = opts.tweakSymbol || '\\+';
17+
opts.locationSymbol = opts.locationSymbol || '\\@';
18+
opts.rootId = opts.rootId || 'csstyle';
19+
20+
return function csstyle(css){
21+
css.eachRule(function(node){
22+
var output = '';
23+
var selectors = node.selector.split(' ').map(getAbstraction);
24+
selectors.forEach(function(selector, index){
25+
var previous = selectors[index - 1] || {};
26+
var spacing = '';
27+
// regular spacing before and after non-csstyle selectors
28+
if(selector.type === 'other' || previous.type === 'other'){
29+
spacing = ' ';
30+
}
31+
// special case for parts children of option
32+
if(selector.type === 'part' && previous.type === 'option'){
33+
var component = _.findLast(selectors, {type: 'component'});
34+
spacing = ' ';
35+
output += spacing + component.prefix + component.name + selector.prefix + selector.name;
36+
return;
37+
}
38+
39+
output += spacing + selector.prefix + selector.name;
40+
});
2941

30-
output += spacing + selector.prefix + selector.name;
42+
node.selector = output;
3143
});
3244

33-
node.selector = output;
34-
});
35-
36-
return css;
37-
};
38-
39-
/**
40-
* Find the matching csstyle abstractions if any.
41-
* Return non-csstyle selectors untouched as type 'other'.
42-
*/
43-
function getAbstraction(selector){
44-
var types = {
45-
component: '.',
46-
part: '__',
47-
option: '.\\--',
48-
tweak: '#csstyle .\\+',
49-
location: '#csstyle .\\@'
45+
return css;
5046
};
5147

52-
var res = Object.keys(types).map(function(type){
53-
var regexp = new RegExp('('+type+'\\(([^)]*)\\))');
54-
// var match = selector.match(/(component\(([^)]*)\))/);
48+
/**
49+
* Find the matching csstyle abstractions if any.
50+
* Return non-csstyle selectors untouched as type 'other'.
51+
*/
52+
function getAbstraction(selector){
53+
var types = {
54+
component: '.',
55+
part: opts.partSymbol,
56+
option: '.' + opts.optionSymbol,
57+
tweak: '#' + opts.rootId + ' .' + opts.tweakSymbol,
58+
location: '#' + opts.rootId + ' .' + opts.locationSymbol
59+
};
60+
61+
var res = Object.keys(types).map(function(type){
62+
var regexp = new RegExp('('+type+'\\(([^)]*)\\))');
63+
// var match = selector.match(/(component\(([^)]*)\))/);
64+
return {
65+
type: type,
66+
match: selector.match(regexp)
67+
};
68+
})
69+
// get first match
70 A3DB +
.filter(function(potential){
71+
return potential.match;
72+
})[0];
73+
74+
if (!res){
75+
return { type: 'other', name: selector, prefix: '' };
76+
}
77+
5578
return {
56-
type: type,
57-
match: selector.match(regexp)
79+
type: res.type,
80+
name: res.match[2],
81+
prefix: types[res.type]
5882
};
59-
})
60-
// get first match
61-
.filter(function(potential){
62-
return potential.match;
63-
})[0];
64-
65-
if (!res){
66-
return { type: 'other', name: selector, prefix: '' };
6783
}
6884

69-
return {
70-
type: res.type,
71-
name: res.match[2],
72-
prefix: types[res.type]
73-
};
74-
}
85+
};
86+
87+
/**
88+
* support calling with no options
89+
*/
90+
module.exports.postcss = function (css) {
91+
module.exports()(css);
92+
};

‎spec/setup-spec.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ exec('rm -rf spec/scss/fixtures/*.css');
1111
exec('sass --update spec/scss/fixtures --style expanded --sourcemap=none');
1212

1313
// compile postcss fixtures
14-
var processor = postcss([require('postcss-nested'), require('postcss-simple-vars'), require('../csstyle')]);
14+
var processor = postcss([
15+
require('postcss-nested'),
16+
require('postcss-simple-vars'),
17+
require('../csstyle')
18+
]);
1519
var files = glob.sync(__dirname + "/postcss/fixtures/**/*.pcss");
1620
files.forEach(function(file){
1721
var result = processor.process(fs.readFileSync(file));
@@ -30,7 +34,7 @@ var customMatchers = {
3034
result.message = "woot";
3135
return result;
3236
}
33-
}
37+
};
3438
}
3539
};
3640

0 commit comments

Comments
 (0)
0