Skip to content

Commit 233c650

Browse files
committed
update tests and loader to recognize preprop type
1 parent 080b627 commit 233c650

File tree

3 files changed

+120
-15
lines changed

3 files changed

+120
-15
lines changed

__tests__/index.spec.js

Lines changed: 73 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,43 @@ import path from 'path';
22
const loader = require('../index').default;
33
const { operator } = require('../index');
44

5-
describe('js-to-sass-vars-loader', () => {
5+
describe('js-to-styles-vars-loader', () => {
66

77
describe('module', () => {
88
const context = {
9-
context: path.resolve()
9+
context: path.resolve(),
10+
_module: {
11+
resource: 'fakeResource.scss'
12+
}
1013
};
1114

1215
it('exports a function', () => {
1316
expect(typeof loader).toEqual('function');
1417
});
1518

16-
it('calls operator.mergeVarsToContent with content and loader context', () => {
19+
it('calls getResource with context', () => {
20+
spyOn(operator, 'getResource').and.callThrough();
21+
loader.call(context, 'asdf');
22+
expect(operator.getResource).toHaveBeenCalledWith(context);
23+
24+
});
25+
26+
it('calls getPreprocessorType with resource', () => {
27+
spyOn(operator, 'getPreprocessorType');
28+
loader.call(context, 'asdf');
29+
expect(operator.getPreprocessorType).toHaveBeenCalledWith({ resource: context._module.resource });
30+
});
31+
32+
it('calls operator.mergeVarsToContent with content and loader context, and preprocessor type', () => {
1733
spyOn(operator, 'mergeVarsToContent');
1834
loader.call(context, 'asdf');
19-
expect(operator.mergeVarsToContent).toHaveBeenCalledWith('asdf', context);
35+
expect(operator.mergeVarsToContent).toHaveBeenCalledWith('asdf', context, 'sass');
2036

2137
});
2238

2339
it('returns the result of mergeVarsToContent', () => {
2440
const content = 'require("./mocks/colors.js")\n' + '.someClass {\ncolor: $nice;\n}';
25-
const merged = operator.mergeVarsToContent(content, context);
41+
const merged = operator.mergeVarsToContent(content, context, 'sass');
2642
const result = loader.call(context, content);
2743
expect(result).toEqual(merged);
2844
});
@@ -92,25 +108,73 @@ describe('js-to-sass-vars-loader', () => {
92108
});
93109
});
94110

111+
describe('transformToLessVars', () => {
112+
it('takes a hash object and transforms it to less variables', () => {
113+
const colors = require('../mocks/colors.js');
114+
expect(operator.transformToLessVars(colors)).toEqual('@white: #fff;\n@black: #000;\n');
115+
});
116+
});
117+
95118
describe('mergeVarsToContent', () => {
96119
const context = {
97120
context: path.resolve()
98121
};
99122

100-
it('inserst vars to sass content', () => {
123+
it('inserts vars to styles content', () => {
101124
const content = "require('./mocks/colors.js');\n" +
102125
".someClass { color: #fff;}";
103-
const [ moduleData, sassContent ] = operator.divideContent(content);
126+
const [ moduleData, stylesContent ] = operator.divideContent(content);
104127
const modulePath = operator.getModulePath(moduleData);
105128
const varData = operator.getVarData(modulePath, context);
106-
const sassVars = operator.transformToSassVars(varData);
129+
const vars = operator.transformToStyleVars(varData);
107130

108-
expect(operator.mergeVarsToContent(content, context)).toEqual(sassVars + sassContent);
131+
expect(operator.mergeVarsToContent(content, context)).toEqual(vars + stylesContent);
109132
});
110133

111134
it('gives back content as is if there is no requre', () => {
112135
const content = ".someClass { color: #fff;}";
113136
expect(operator.mergeVarsToContent(content, context)).toEqual(content);
114137
});
115138
});
139+
140+
describe('getResource', () => {
141+
it('gets module.resource', () => {
142+
const context = {
143+
_module: {
144+
resource: 'fakeResource'
145+
}
146+
};
147+
148+
expect(operator.getResource(context)).toEqual(context._module.resource);
149+
});
150+
});
151+
152+
describe('getPreprocessorType', () => {
153+
it('should recognise sass resource', () => {
154+
expect(operator.getPreprocessorType({ resource: '/path/to/resource.scss'})).toEqual('sass');
155+
});
156+
157+
it('should recognise less resource', () => {
158+
expect(operator.getPreprocessorType({ resource: '/path/to/resource.less'})).toEqual('less');
159+
});
160+
161+
it('throw error if proprocessor type is unknown', () => {
162+
const caller = () => {
163+
operator.getPreprocessorType({ resource: 'unknown.extension'});
164+
};
165+
expect(caller).toThrow();
166+
});
167+
});
168+
169+
describe('transformToStyleVars', () => {
170+
it('calls the proper transformer by type', () => {
171+
spyOn(operator, 'transformToSassVars');
172+
spyOn(operator, 'transformToLessVars');
173+
operator.transformToStyleVars({ type: 'sass', varData: {} });
174+
expect(operator.transformToSassVars).toHaveBeenCalled();
175+
176+
operator.transformToStyleVars({ type: 'less', varData: {} });
177+
expect(operator.transformToLessVars).toHaveBeenCalled();
178+
});
179+
});
116180
});

demo/webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ module.exports = {
2020
loader: "sass-loader"
2121
},
2222
{
23-
loader: "js-to-sass-var-loader"
23+
loader: "../index.js"
2424
}]
2525
}
2626
]

index.js

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,23 +49,64 @@ const operator = {
4949
}, '');
5050
},
5151

52-
mergeVarsToContent (content, webpackContext) {
53-
const [ moduleData, sassContent ] = this.divideContent(content);
52+
transformToLessVars (varData) {
53+
const keys = Object.keys(varData);
54+
return keys.reduce( (result, key) => {
55+
result += `@${key}: ${varData[key]};\n`;
56+
return result;
57+
}, '');
58+
},
59+
60+
transformToStyleVars ({ type, varData } = {}) {
61+
switch (type) {
62+
case 'sass':
63+
return this.transformToSassVars(varData);
64+
case 'less':
65+
return this.transformToLessVars(varData);
66+
67+
}
68+
},
69+
70+
mergeVarsToContent (content, webpackContext, preprocessorType) {
71+
const [ moduleData, styleContent ] = this.divideContent(content);
5472
if (moduleData) {
5573
const modulePath = this.getModulePath(moduleData);
5674
const varData = this.getVarData(modulePath, webpackContext);
57-
const sassVars = this.transformToSassVars(varData);
58-
return sassVars + sassContent;
75+
const vars = this.transformToStyleVars({ type: preprocessorType, varData });
76+
return vars + styleContent;
5977
}
6078
else return content;
79+
},
80+
81+
getResource (context) {
82+
return context._module.resource;
83+
},
84+
85+
getPreprocessorType ( { resource } ={}) {
86+
const preProcs = [
87+
{
88+
type: 'sass',
89+
reg: /\.scss$/
90+
},
91+
{
92+
type: 'less',
93+
reg: /\.less$/
94+
}
95+
];
96+
97+
const result = preProcs.find( item => item.reg.test(resource));
98+
if (result) return result.type;
99+
throw Error(`Unknown preprocesor type for ${resource}`);
61100
}
62101
};
63102

64103
exports.operator = operator;
65104

66105
const loader = function (content) {
67106
const webpackContext = this;
68-
const merged = operator.mergeVarsToContent(content, webpackContext);
107+
const resource = operator.getResource(webpackContext);
108+
const preprocessorType = operator.getPreprocessorType({ resource });
109+
const merged = operator.mergeVarsToContent(content, webpackContext, preprocessorType);
69110
return merged;
70111
};
71112

0 commit comments

Comments
 (0)