I have been looking for a while but i haven't found a solution yet, I'm using node-sass and i need to edit the scss before compiling it (more specifically, the variables), sadly once you execute the render function it gets directly compiled into css, is there a way of editing the imported scss before node-sass compiles it ? Or read the scss and resolve all the imports without node-sass ?
thank you
First you should add !default keyword to end of your scss variables and then you can pass parameters which one you want to override for example:
You have an variable for primary color, in scss file yo should define it like
$primaryColor = #fff !default
and then while overriding this column you should send params like
{ primaryColor: '#bbb' } this one will override your primaryColor variable in your scss file.
const generateSassVariables = map =>
Object.keys(map)
.map(name => `$${name}:${map[name]};`)
.join('\n');
sass.render(
{
data: `${generateSassVariables(newVariables)}#import '${scssFilePath}';`,
includePaths: [styleBasePath, 'app/'],
outputStyle: 'compressed',
},
(error, result) => {..... })
Related
I was adding a snapshot test to a piece of React code, and I incurred in this error:
Unexpected node type: SequenceExpression (This is an error on an internal node. Probably an internal error. Location has been estimated.)
The code transpiles and works just fine, and the AST explorer doesn't warn me about anything.
Before this new test, no other test gave me any sort of similar error, and we have quite a few of them in our codebase.
I tried to reinstall jest, reinstall babel-jest, remove and reinstall all modules (using yarn --pure-lock), upgraded both jest and babel-jest to the latest version (20.0.1 for both), rinsed and repeated.
Nothing worked.
This occurs only when I try to collect the coverage (with --coverage), while the minimal snippet it occurs with is:
import { tint } from 'polished'
import styled from 'styled-components'
export default styled.label`
background: ${({ x, y }) => (x ? tint(0.3, y.a) : y.b)};
`
Here's what i've found:
This is an issue with jest code coverage being able to understand styled components and polished. I am using babel-plugin-polished with the following in my babelrc:
"plugins": [ "polished" ]
But still if you call export on a value, and do not also use that value in an object or exported object, it will fail.
Fails:
export const charcoalBlue = rgb(104, 131, 145);
Doesn't fail:
export const charcoalBlue = rgb(104, 131, 145);
const colors = { charcoalBlue }
So my solution has been to ignore my style files, or simply ensure I'm using the values I create and not just exporting them.
One way to ignore the style files, place this in your package.json:
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/*.styles.js",
]
}
And name your style files {ComponentName}.styles.js
Hope this helps!
I came across the same issue!
I fixed it by working around it:
import styled, {css} from 'styled-components';
styled.label`
${({x,y}) => x
? css`background: tint(0.3, y.a);`
: css`background: ${y.b};`
}
`;
I'm trying to optimize my javascript project with r.js optimizer from requirejs. I use both amd and non-amd modules in my project. There will be two environments, one with requirejs environment and the other with no requirejs environment.The files at the non-requirejs environment should not have on require or define calls. While combining amd-modules into bundles using r.js it is fine to have a define call with bundle name at the end of the file. But for the non-requirejs environment after the files have been optimized, they are also getting a define insertion at the end of the file with the module name.
Let's take I have four files A and B which are AMD-modules and C and D are non-AMD modules.
my build.js is like this
({
appDir: "../",
baseUrl: "./",
dir : "../../../output",
paths: {
A : '../somepath/to/A',
B : '../somepath/to/B'
},
modules : [
{
name : 'bundle1',
create : true,
include : ['A', 'B']
},
{
name : 'bundle2',
create : true,
include : ['C', 'D']
}
],
// removeCombined : true,
cjsTranslate: false,
optimizeCss : "none",
skipModuleInsertion: true,
optimize: "uglify",
fileExclusionRegExp: /^(((r|app.build)\.js)|(v0))$/,
keepBuildDir: false,
bundlesConfigOutFile: "bundles.js",
onModuleBundleComplete : function(data) {
console.log(data)
}
})
This is the bundles amd-file looks like.
define('A', function(){
//some stuff of A
});
define('B', function(){
//some stuff of B
});
define('bundle1',function(){});
The bundled non-amd file looks like
//some stuff of C
});
//some stuff of D
define('bundle2',function(){});
How to resolve this situation. I have gone through the optimization docs and example.build.js. still couldn't figure out the way. Am I missing something ? Is there a way to exclude that define call at the end of the non-amd-modules. If yes, How ?
I see you have used skipModuleInsertion option which based on the documentation should have helped you. I am not sure why it didn't.
Another option you can use is after the build is complete before writing to file, you can remove that particular define call using onBuildWrite
So I want to do a very simple task using webpack.
I have a few static HTML templates like e.g.
test.html
<div><span>template content</span></div>
and all I want to do is return the string inside the template
e.g
require("raw!./test.html")
with should return a string like:
"<div><span>template content</span></div>"
but instead, it returns the following string
"modules.exports = <div><span>template content</span></div>"
I have tried several modules, like the raw-loader and html-loader.
and they both behave the same way.So I took a look at the source code, just to find out that its SUPPOSED to behave this way.
so what exactly am I expected to do with this, if I just want the raw
HTML? is it a bad practice just to remove the prepended
"module.exports =" string? from the bundle
edit: removing the 'modules.export =' part results in the bundle returning nothing :/
my config
module.exports =
{
module:
{
loaders:
[
{ test: /\.html$/, loader: "raw-loader" }
]
}
};
The solution is to require your file without specifying any additional loader, as this is already specified in the webpack config
const test = require('./test.html')
Explanation: With your current code, you are applying the raw loader twice to your file. When you specify a loader chain in your configuration:
loaders:
[
{ test: /\.html$/, loader: "raw-loader" }
]
... you are already telling webpack to add this loader to the loader chain every time you require a file matching the test condition (here, every html file)
Therefore, when you write this
const test = require('raw!./test.html')
... it is actually equivalent to this
const test = require('raw!raw!./test.html')
I finally figured it out I think. You need to resolve the path name using require.resolve(./test.html) https://nodejs.org/dist/latest-v7.x/docs/api/globals.html#globals_require
When you write require('./test.html') it means that you simply run the code returned by the loaders chain. The result is exported in this code as module.exports. To use this result you need to assign your require statement to variable:
var htmlString = require('raw!./test.html');
//htmlString === "<div><span>template content</span></div>"
Remember that any loader in Webpack returns JS code - not HTML, not CSS. You can use this code to get HTML, CSS and whatever.
I'm trying both gulp.js and grunt.js to convert from markdown to PDF, both of them use markdownpdf npm package.
This is my gulpfile.js
gulp.task('markdownpdf', function () {
gulp.src('_src/*.md')
.pipe(concat('document.md'))
.pipe(markdownpdf({
cssPath: '/_src/css/pdf.css',
paperFormat: 'A4',
paperOrientation: 'portrait',
paperBorder: '2cm'
}))
.pipe(gulp.dest('_dist'));
});
Without cssPath option, markdownpdf package picks node_modules/gulp-markdown-pdf/node_modules/markdown-pdf/pdf.css (I tired to edit this file to confirm that it was picked)
Please help how to setup custom css path.
Thanks.
What's worked for me is to start the path with a ./. The single dot represents the directory with the gulpfile in it.
e.g
gulp.task('docs', function () {
return gulp.src('./docs/*.md')
.pipe(markdownpdf({
'cssPath': './docs/assets/pdf.css'
}))
.pipe(gulp.dest('./web/docs/pdfs'));
});
so '/_src/css/pdf.css' maps to what?
It should respond to relative path notation, so if it picks node_modules/gulp-markdown-pdf/node_modules/markdown-pdf/pdf.css by default, then try setting your cssPath value to ../../../_src/css/pdf.css, assuming _src is in your project's root
Maybe you will need back 5 levels.
My gruntfile.js...
markdownpdf: {
options: {
cssPath: "../../../../../css/style.css",
I'm trying to define a global object that i can reference across all of my modules. however, in the modules, i am unable to reference my path, and it's saying that "g" does not exist.
In main1.js, i have this:
requirejs.config({
paths: {
Underscore: 'lib/underscore/1.3.3/underscore.min',
Backbone: 'lib/backbone/0.9.2/backbone.min',
Globals: 'lib/backbone/ globalVars'
}
});
require([ 'views/pages', 'views/filters'], function(allPages, filters) {
filters.render();
allPages.render();
});
inside globalVars.js, i have this:
(function() {
var Globals = {
isDemo: false
}
console.log('in globalvars') // this shows in my console
}).call(this);
and finally, inside of view/pages.js, i have this:
define([
'Globals',
'Underscore',
'Backbone'
], function(g, _, Backbone){
console.log(g.isDemo) //<-- returns "TypeError: g is undefined"
If i use a define inside my main1.js like this:
define( 'Globals', function() {
return {
isDemo: true
}
})
it works just fine. I haven't had much luck with trying to figure out why this is not working. I'd like to be able to just include a path to the globalVars rather than boilerplate pasting a define block in each and every module that needs it, since changing isDemo to false would require updating many other module pages (main2.js, main3.js, etc) as well. thanks!
Well, to start with, your globalVars.js is not in the module pattern, so requirejs doesn't know what you're trying to register as the module. If you change that file to use the pattern, like the define you added to main1.js, you should be all set. Is there a reason you aren't defining it as a module?