gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(sass): Enable client-side sass compiling (#16747)

Browse Source
This commit is contained in:
Stuart Taylor
2018-02-19 20:41:01 +00:00
committed by Quincy Larson
parent 3131c55782
commit 1a5cab57a1
4 changed files with 86 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common/app/routes/Challenges/rechallenge/builders.js
View File

@ -95,7 +95,7 @@ export function concactHtml(required, template) {
const body = source
.flatMap(file => file.reduce((body, file) => {
return body + file.contents + htmlCatch;
return body + file.contents + file.tail + htmlCatch;
}, ''))
.map(source => ({ source }))
.map(createBody);

78
common/app/routes/Challenges/rechallenge/transformers.js
View File

@ -1,4 +1,13 @@
import _ from 'lodash';
import {
cond,
flow,
identity,
matchesProperty,
overEvery,
overSome,
partial,
stubTrue
} from 'lodash';
import * as babel from 'babel-core';
import presetEs2015 from 'babel-preset-es2015';
@ -24,15 +33,34 @@ function loopProtectHit(line) {
const console$logReg = /(?:\b)console(\.log\S+)/g;
const NBSPReg = new RegExp(String.fromCharCode(160), 'g');
const isJS = _.matchesProperty('ext', 'js');
const testHTMLJS = _.overSome(isJS, _.matchesProperty('ext', 'html'));
const testJS$JSX = _.overSome(isJS, _.matchesProperty('ext', 'jsx'));
const isJS = matchesProperty('ext', 'js');
const testHTMLJS = overSome(isJS, matchesProperty('ext', 'html'));
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 testSASS = file => (/type='text\/sass'/i).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
// to `window.__console.log`
// this let's us tap into logging into the console.
// currently we only do this to the main window and not the test window
export const proxyLoggerTransformer = _.partial(
export const proxyLoggerTransformer = partial(
vinyl.transformHeadTailAndContents,
source => (
source.replace(console$logReg, (match, methodCall) => {
@ -40,7 +68,7 @@ export const proxyLoggerTransformer = _.partial(
})),
);
const addLoopProtect = _.partial(
const addLoopProtect = partial(
vinyl.transformContents,
contents => {
/* eslint-disable import/no-unresolved */
@ -51,11 +79,11 @@ const addLoopProtect = _.partial(
}
);
export const addLoopProtectHtmlJsJsx = _.cond([
export const addLoopProtectHtmlJsJsx = cond([
[
_.overEvery(
overEvery(
testHTMLJS,
_.partial(
partial(
vinyl.testContents,
contents => contents.toLowerCase().includes('<script>')
)
@ -63,38 +91,50 @@ export const addLoopProtectHtmlJsJsx = _.cond([
addLoopProtect
],
[ testJS$JSX, addLoopProtect ],
[ _.stubTrue, _.identity ]
[ stubTrue, identity ]
]);
export const replaceNBSP = _.cond([
export const replaceNBSP = cond([
[
testHTMLJS,
_.partial(
partial(
vinyl.transformContents,
contents => contents.replace(NBSPReg, ' ')
)
],
[ _.stubTrue, _.identity ]
[ stubTrue, identity ]
]);
export const babelTransformer = _.cond([
export const babelTransformer = cond([
[
testJS$JSX,
_.flow(
_.partial(
flow(
partial(
vinyl.transformHeadTailAndContents,
babelTransformCode
),
_.partial(vinyl.setExt, 'js')
partial(vinyl.setExt, 'js')
)
],
[ _.stubTrue, _.identity ]
[ stubTrue, identity ]
]);
export const sassTransformer = cond([
[
testSASS,
partial(
vinyl.appendToTail,
browserSassCompiler
)
],
[ stubTrue, identity ]
]);
export const _transformers = [
addLoopProtectHtmlJsJsx,
replaceNBSP,
babelTransformer
babelTransformer,
sassTransformer
];
export function applyTransformers(file, transformers = _transformers) {

8
common/utils/polyvinyl.js
View File

@ -166,6 +166,14 @@ export function clearHeadTail(poly) {
};
}
export function appendToTail(tail, poly) {
checkPoly(poly);
return {
...poly,
tail: poly.tail.concat(tail)
};
}
// compileHeadTail(contents: String, poly: PolyVinyl) => PolyVinyl
export function compileHeadTail(padding = '', poly) {
return clearHeadTail(transformContents(

36
seed/challenges/03-front-end-libraries/sass.json
View File

@ -28,7 +28,7 @@
"title": "Store Data with Sass Variables",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
"raw": true
}
],
@ -42,13 +42,13 @@
"Create a variable <code>$text-color</code> and set it to red. Then change the value of the <code>color</code> property for the <code>.blog-post</code> and <code>h2</code> to the <code>$text-color</code> variable."
],
"challengeSeed": [
"<style>",
"<style type='text/sass'>",
" ",
" ",
" .header{",
" text-align: center;",
" }",
" .blog-post h2 {",
" .blog-post, h2 {",
" color: red;",
" }",
"</style>",
@ -85,7 +85,7 @@
"title": "Nest CSS with Sass",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
"raw": true
}
],
@ -99,7 +99,7 @@
"Use the <code>nesting</code> technique shown above to re-organize the CSS rules for both children of <code>.blog-post</code> element. For testing purposes, the <code>h1</code> should come before the <code>p</code> element."
],
"challengeSeed": [
"<style>",
"<style type='text/sass'>",
" .blog-post {",
" ",
" }",
@ -132,7 +132,7 @@
"title": "Create Reusable CSS with Mixins",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
"raw": true
}
],
@ -150,7 +150,7 @@
"Write a <code>mixin</code> for <code>border-radius</code> and give it a <code>$radius</code> parameter. It should use all the vendor prefixes from the example. Then use the <code>border-radius</code> <code>mixin</code> to give the <code>#awesome</code> element a border radius of 15px."
],
"challengeSeed": [
"<style>",
"<style type='text/sass'>",
" ",
" ",
" ",
@ -185,7 +185,7 @@
"title": "Use @if and @else to Add Logic To Your Styles",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
"raw": true
}
],
@ -199,7 +199,7 @@
"<blockquote>light - 1px solid black<br>medium - 3px solid black<br>heavy - 6px solid black<br>none - no border</blockquote>"
],
"challengeSeed": [
"<style>",
"<style type='text/sass'>",
" ",
" ",
" ",
@ -232,7 +232,7 @@
"title": "Use @for to Create a Sass Loop",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
"raw": true
}
],
@ -249,7 +249,7 @@
"It should create 5 classes called <code>.text-1</code> to <code>.text-5</code> where each has a <code>font-size</code> set to 10px multiplied by the index."
],
"challengeSeed": [
"<style>",
"<style type='text/sass'>",
" ",
" ",
" ",
@ -281,7 +281,7 @@
"title": "Use @each to Map Over Items in a List",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
"raw": true
}
],
@ -299,7 +299,7 @@
"Each class should set the <code>background-color</code> the respective color."
],
"challengeSeed": [
"<style>",
"<style type='text/sass'>",
" ",
" ",
" ",
@ -331,7 +331,7 @@
"title": "Apply a Style Until a Condition is Met with @while",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
"raw": true
}
],
@ -346,7 +346,7 @@
"There should be 10 different classes from <code>text-1</code> to <code>text-10</code>. Then set <code>font-size</code> to 5px multiplied by the current index number. Make sure to avoid an infinite loop!"
],
"challengeSeed": [
"<style>",
"<style type='text/sass'>",
" ",
" ",
" ",
@ -390,7 +390,7 @@
"title": "Split Your Styles into Smaller Chunks with Partials",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
"raw": true
}
],
@ -425,7 +425,7 @@
"title": "Extend One Set of CSS Styles to Another Element",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
"src": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js",
"raw": true
}
],
@ -442,7 +442,7 @@
"Make a class <code>.info-important</code> that extends <code>.info</code> and also has a <code>background-color</code> set to magenta."
],
"challengeSeed": [
"<style>",
"<style type='text/sass'>",
" h3{",
" text-align: center;",
" }",