fix: Sass has not been compiled when tests running
This commit is contained in:
committed by
Mrugesh Mohapatra
parent
5e7c80ad74
commit
1dfe1f1ec0
@ -2,9 +2,10 @@ import favicons from './favicons';
|
|||||||
import meta from './meta';
|
import meta from './meta';
|
||||||
import styleSheets from './styleSheets';
|
import styleSheets from './styleSheets';
|
||||||
import mathjax from './mathjax';
|
import mathjax from './mathjax';
|
||||||
|
import sassjs from './sassjs';
|
||||||
|
|
||||||
const metaAndStyleSheets = meta
|
const metaAndStyleSheets = meta
|
||||||
.concat(favicons, styleSheets, mathjax)
|
.concat(favicons, styleSheets, mathjax, sassjs)
|
||||||
.map((element, i) => ({ ...element, key: `meta-stylesheet-${i}` }));
|
.map((element, i) => ({ ...element, key: `meta-stylesheet-${i}` }));
|
||||||
|
|
||||||
export default metaAndStyleSheets;
|
export default metaAndStyleSheets;
|
||||||
|
9
packages/learn/src/head/sassjs.js
Normal file
9
packages/learn/src/head/sassjs.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const cdnAddr =
|
||||||
|
'https://cdnjs.cloudflare.com/ajax/libs/sass.js/' +
|
||||||
|
'0.10.9/sass.sync.min.js';
|
||||||
|
|
||||||
|
const sassjs = [<script key='sassjs' src={cdnAddr} type='text/javascript' />];
|
||||||
|
|
||||||
|
export default sassjs;
|
@ -35,29 +35,10 @@ const console$logReg = /(?:\b)console(\.log\S+)/g;
|
|||||||
const NBSPReg = new RegExp(String.fromCharCode(160), 'g');
|
const NBSPReg = new RegExp(String.fromCharCode(160), 'g');
|
||||||
|
|
||||||
const isJS = matchesProperty('ext', 'js');
|
const isJS = matchesProperty('ext', 'js');
|
||||||
const testHTMLJS = overSome(isJS, matchesProperty('ext', 'html'));
|
const testHTML = matchesProperty('ext', 'html');
|
||||||
|
const testHTMLJS = overSome(isJS, testHTML);
|
||||||
export const testJS$JSX = overSome(isJS, matchesProperty('ext', 'jsx'));
|
export const testJS$JSX = overSome(isJS, matchesProperty('ext', 'jsx'));
|
||||||
|
|
||||||
// work around the absence of multi-flile editing
|
|
||||||
// this can be replaced with `matchesProperty('ext', 'sass')`
|
|
||||||
// when the time comes
|
|
||||||
const sassRE = /type='text\/sass'/i;
|
|
||||||
const testSASS = file => sassRE.test(file.contents);
|
|
||||||
// This can be done in the transformer when we have multi-file editing
|
|
||||||
const browserSassCompiler = `
|
|
||||||
<script>
|
|
||||||
var styleTags = [ ...document.querySelectorAll('style') ];
|
|
||||||
[].slice.call(styleTags, 1).forEach(
|
|
||||||
function compileSass(tag) {
|
|
||||||
var scss = tag.innerHTML;
|
|
||||||
Sass.compile(scss, function(result) {
|
|
||||||
tag.type = 'text/css';
|
|
||||||
tag.innerHTML = result.text;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
`;
|
|
||||||
// if shouldProxyConsole then we change instances of console log
|
// if shouldProxyConsole then we change instances of console log
|
||||||
// to `window.__console.log`
|
// to `window.__console.log`
|
||||||
// this let's us tap into logging into the console.
|
// this let's us tap into logging into the console.
|
||||||
@ -107,12 +88,37 @@ export const babelTransformer = cond([
|
|||||||
[stubTrue, identity]
|
[stubTrue, identity]
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export const sassTransformer = cond([
|
const htmlSassTransformCode = file => {
|
||||||
[testSASS, partial(vinyl.appendToTail, browserSassCompiler)],
|
let doc = document.implementation.createHTMLDocument();
|
||||||
|
doc.body.innerHTML = file.contents;
|
||||||
|
let styleTags = [].filter.call(
|
||||||
|
doc.querySelectorAll('style'),
|
||||||
|
style => style.type === 'text/sass'
|
||||||
|
);
|
||||||
|
if (styleTags.length === 0 || typeof Sass === 'undefined') {
|
||||||
|
return vinyl.transformContents(() => doc.body.innerHTML, file);
|
||||||
|
}
|
||||||
|
return styleTags.reduce((obs, style) => {
|
||||||
|
return obs.flatMap(file => new Promise(resolve => {
|
||||||
|
window.Sass.compile(style.innerHTML, function(result) {
|
||||||
|
style.type = 'text/css';
|
||||||
|
style.innerHTML = result.text;
|
||||||
|
resolve(vinyl.transformContents(() => doc.body.innerHTML, file));
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
}, Observable.of(file));
|
||||||
|
};
|
||||||
|
|
||||||
|
export const htmlSassTransformer = cond([
|
||||||
|
[testHTML, htmlSassTransformCode],
|
||||||
[stubTrue, identity]
|
[stubTrue, identity]
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export const _transformers = [replaceNBSP, babelTransformer, sassTransformer];
|
export const _transformers = [
|
||||||
|
replaceNBSP,
|
||||||
|
babelTransformer,
|
||||||
|
htmlSassTransformer
|
||||||
|
];
|
||||||
|
|
||||||
export function applyTransformers(file, transformers = _transformers) {
|
export function applyTransformers(file, transformers = _transformers) {
|
||||||
return transformers.reduce((obs, transformer) => {
|
return transformers.reduce((obs, transformer) => {
|
||||||
|
Reference in New Issue
Block a user