Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
node-sass-json-importer
Advanced tools
JSON importer for node-sass. Allows @import
ing .json
or .json5
files in Sass files parsed by node-sass
.
This module hooks into node-sass's importer api.
var sass = require('node-sass');
var jsonImporter = require('node-sass-json-importer');
// Example 1
sass.render({
file: scss_filename,
importer: jsonImporter(),
[, options..]
}, function(err, result) { /*...*/ });
// Example 2
var result = sass.renderSync({
data: scss_content
importer: [jsonImporter(), someOtherImporter]
[, options..]
});
To run this using node-sass CLI, point --importer
to your installed json importer, for example:
./node_modules/.bin/node-sass --importer node_modules/node-sass-json-importer/dist/cli.js --recursive ./src --output ./dist
import jsonImporter from 'node-sass-json-importer';
// Webpack config
export default {
module: {
loaders: [{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}],
},
// Apply the JSON importer via sass-loader's options.
sassLoader: {
importer: jsonImporter()
}
};
import jsonImporter from 'node-sass-json-importer';
// Webpack config
export default {
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
},
},
{
loader: 'sass-loader',
// Apply the JSON importer via sass-loader's options.
options: {
importer: jsonImporter(),
},
},
},
],
],
},
};
Since JSON doesn't map directly to SASS's data types, a common source of confusion is how to handle strings. While SASS allows strings to be both quoted and unquoted, strings containing spaces, commas and/or other special characters have to be wrapped in quotes. In terms of JSON, this means the string has to be double quoted:
{
"description": "A sentence with spaces."
}
{
"description": "'A sentence with spaces.'"
}
See discussion here for more:
https://github.com/Updater/node-sass-json-importer/pull/5
You can also import *.js Files. This way you can use javascript to compose and export json structure for node-sass-json-importer.
const xl = require('./variables.json')
const md = require('./variables-md.json')
const xs = require('./variables-xs.json')
module.exports = {
xl,
md,
xs,
}
Should you care to resolve paths, say, starting with ~/
relative to project root or some other arbitrary directory, you can do it as follows:
1.sass
:
@import '~/1.json'
body
margin: $body-margin
json/1.json
:
{"body-margin": 0}
var path = require('path');
var sass = require('node-sass');
var jsonImporter = require('../dist/node-sass-json-importer');
sass.render({
file: './1.sass',
importer: jsonImporter({
resolver: function(dir, url) {
return url.startsWith('~/')
? path.resolve(dir, 'json', url.substr(2))
: path.resolve(dir, url);
},
}),
}, function(err, result) { console.log(err || result.css.toString()) });
If you want to convert standard JavaScript caseCase keys into CSS/SCSS compliant kebab-case keys, for example:
variables.json
:
{
"bgBackgroundColor": 'red'
}
For usage like this:
style.scss
:
@import "variables.json";
div {
background: $bg-background-color;
}
You can pass set the convertCase
option to true as an argument to jsonImporter
like so:
sass.render({
file: './1.sass',
importer: jsonImporter({
convertCase: true,
}),
}, function(err, result) { console.log(err || result.css.toString()) });
This module is based on the sass-json-vars gem, which unfortunately isn't compatible with node-sass
.
FAQs
Allows importing json in sass files parsed by node-sass.
The npm package node-sass-json-importer receives a total of 22,559 weekly downloads. As such, node-sass-json-importer popularity was classified as popular.
We found that node-sass-json-importer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.