npmpackage.info

Gathering detailed insights and metrics for node-sass-json-importer

Other packages similar to node-sass-json-importer

node-sass-magic-importer

5.3.3

Custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once

node-sass-glob-importer

5.3.3

Custom importer for node-sass which makes it possible to use glob syntax in Sass import statements

node-sass-tilde-importer

1.0.2

A node-sass custom importer which turns ~ into absolute paths to the nearest parent node_modules directory.

node-sass-package-importer

5.3.3

Custom importer for node-sass to import packages from the `node_modules` directory

Gathering detailed insights and metrics for node-sass-json-importer

node-sass-json-importer

Allows importing json in sass files parsed by node-sass.

4.3.0

163

MIT

JavaScript

33.09 kB

7,631,864 2.5

Installations

npm install node-sass-json-importer

Pull Requests

Open

1

Total

59

Closed

15

Merged

43

Issues

Open

11

Total

45

Closed

34

Releases

v4.3.0

Published on 02 May 2020

v4.2.0

Published on 22 Apr 2020

v4.1.4

Published on 21 Apr 2020

v4.1.3

Published on 31 Mar 2020

v4.1.2

Published on 04 Feb 2020

v4.1.1

Published on 04 Feb 2020

View all 6 releases

Developer

Updater

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

13.14.0

NPM Version

6.13.7 Statistics

163 Stars

145 Commits

55 Forks

18 Watching

2 Branches

19 Contributors

Updated on 25 Nov 2024

Bundle Size

100.36 kB

Minified

33.09 kB

Minified + Gzipped

Bundlephobia

Languages

JavaScript (96.19%)

CSS (3.81%)

Total Downloads

Cumulative downloads

Total Downloads

7,631,864

Last day

-3.4%

4,777

Compared to previous day

Last week

18.7%

27,374

Compared to previous week

Last month

26.3%

109,495

Compared to previous month

Last year

-38.7%

1,279,482

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

node-sass-json-importer

JSON importer for node-sass. Allows @importing .json or .json5 files in Sass files parsed by node-sass.

Usage

node-sass

This module hooks into node-sass's importer api.

1var sass = require('node-sass');
2var jsonImporter = require('node-sass-json-importer');
3
4// Example 1
5sass.render({
6  file: scss_filename,
7  importer: jsonImporter(),
8  [, options..]
9}, function(err, result) { /*...*/ });
10
11// Example 2
12var result = sass.renderSync({
13  data: scss_content
14  importer: [jsonImporter(), someOtherImporter]
15  [, options..]
16});

node-sass command-line interface

To run this using node-sass CLI, point --importer to your installed json importer, for example:

1./node_modules/.bin/node-sass --importer node_modules/node-sass-json-importer/dist/cli.js --recursive ./src --output ./dist

Webpack / sass-loader

Webpack v1

1import jsonImporter from 'node-sass-json-importer';
2
3// Webpack config
4export default {
5  module: {
6    loaders: [{
7      test: /\.scss$/,
8      loaders: ["style", "css", "sass"]
9    }],
10  },
11  // Apply the JSON importer via sass-loader's options.
12  sassLoader: {
13    importer: jsonImporter()
14  }
15};

Webpack v2

1import jsonImporter from 'node-sass-json-importer';
2
3// Webpack config
4export default {
5  module: {
6    rules: [
7      {
8        test: /\.scss$/,
9        use: [
10          'style-loader',
11          {
12            loader: 'css-loader',
13            options: {
14              importLoaders: 1
15            },
16          },
17          {
18            loader: 'sass-loader',
19            // Apply the JSON importer via sass-loader's options.
20            options: {
21              importer: jsonImporter(),
22            },
23          },
24        },
25      ],
26    ],
27  },
28};

Importing

Importing strings

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:

Incorrect

1{
2  "description": "A sentence with spaces."
3}

Correct

1{
2  "description": "'A sentence with spaces.'"
3}

See discussion here for more:

https://github.com/Updater/node-sass-json-importer/pull/5

Importing *.js Files

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,
}

Custom resolver

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:

1@import '~/1.json'
2body
3    margin: $body-margin

json/1.json:

1{"body-margin": 0}

1var path = require('path');
2var sass = require('node-sass');
3var jsonImporter = require('../dist/node-sass-json-importer');
4
5sass.render({
6  file: './1.sass',
7  importer: jsonImporter({
8    resolver: function(dir, url) {
9      return url.startsWith('~/')
10        ? path.resolve(dir, 'json', url.substr(2))
11        : path.resolve(dir, url);
12    },
13  }),
14}, function(err, result) { console.log(err || result.css.toString()) });

camelCase to kebab-case

If you want to convert standard JavaScript caseCase keys into CSS/SCSS compliant kebab-case keys, for example:

variables.json:

1{
2  "bgBackgroundColor": 'red'
3}

For usage like this:

style.scss:

1@import "variables.json";
2
3div {
4  background: $bg-background-color;
5}

You can pass set the convertCase option to true as an argument to jsonImporter like so:

1sass.render({
2  file: './1.sass',
3  importer: jsonImporter({
4    convertCase: true,
5  }),
6}, function(err, result) { console.log(err || result.css.toString()) });

Thanks to

This module is based on the sass-json-vars gem, which unfortunately isn't compatible with node-sass.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

59 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-93f3-23rq-pjfp
Warn: Project is vulnerable to: GHSA-jmqm-f2gx-4fjv
Warn: Project is vulnerable to: GHSA-pw54-mh39-w3hc / GHSA-xgh6-85xh-479p
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
Warn: Project is vulnerable to: GHSA-r2j6-p67h-q639
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

2.5

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to node-sass-json-importer

Other packages similar to node-sass-json-importer

node-sass-json-importer

Installations

Pull Requests

1

59

15

43

Issues

11

45

34

Releases

Developer

Updater

Developer Guide

CommonJS

No

13.14.0

6.13.7

Statistics

Bundle Size

100.36 kB

33.09 kB

Languages

Total Downloads

7,631,864

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

node-sass-json-importer

Usage

node-sass

node-sass command-line interface

Webpack / sass-loader

Webpack v1

Webpack v2

Importing

Importing strings

Incorrect

Correct

Importing *.js Files

Custom resolver

camelCase to kebab-case

Thanks to

10

10

6

0

0

0

0

0

0

0

2.5

/10