Skip to content

Commit

Permalink
Rename package
Browse files Browse the repository at this point in the history
  • Loading branch information
Jair Medeiros committed Apr 21, 2022
1 parent 73b9d0b commit 2a33d7a
Show file tree
Hide file tree
Showing 9 changed files with 211 additions and 197 deletions.
48 changes: 25 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# scss2json - forked from [scss-to-json](https://github.com/ryanbahniuk/scss-to-json) ![Build](https://github.com/jairmedeiros/scss2json/actions/workflows/build.yml/badge.svg)
# scss-json - forked from [scss-to-json](https://github.com/ryanbahniuk/scss-to-json) ![Build](https://github.com/jairmedeiros/scss-json/actions/workflows/build.yml/badge.svg)

> A package to require SCSS variables in JSON format.
Expand All @@ -9,18 +9,20 @@ This package allows you to use your SCSS variables in your JS code. Specifically
Install via npm or yarn:

```sh
npm install scss2json --save-dev
npm install scss-json --save-dev
```

```sh
yarn add scss2json --dev
yarn add scss-json --dev
```

## Known Issues

There are some issues that need to be fixed:

- [No https path in scss](https://github.com/ryanbahniuk/scss-to-json/issues/26).
- [Variable which including '//' will be regarded as comment](https://github.com/ryanbahniuk/scss-to-json/issues/20).
- [Not correct variable names with '__'](https://github.com/ryanbahniuk/scss-to-json/issues/19).
- [Not correct variable names with '\_\_'](https://github.com/ryanbahniuk/scss-to-json/issues/19).
- [Parenthesis not working property](https://github.com/ryanbahniuk/scss-to-json/issues/16).
- **[Support for maps](https://github.com/ryanbahniuk/scss-to-json/issues/15).**
- [Leading comments break compiling](https://github.com/ryanbahniuk/scss-to-json/issues/13).
Expand All @@ -42,7 +44,7 @@ $text-color-light: lighten($text-color, 15%);
$border-color: #123 !global; // use for all borders
```

When run on that code above, scss2json will output the below JSON:
When run on that code above, scss-json will output the below JSON:

```js
{
Expand All @@ -54,18 +56,18 @@ When run on that code above, scss2json will output the below JSON:
}
```

Note that scss2json will filter out flags (marked with an !) and comments and evaluate Sass functions before it produces the JSON object.
Note that scss-json will filter out flags (marked with an !) and comments and evaluate Sass functions before it produces the JSON object.

## Using this Package

In your CommonJS JavaScript file, requiring this package will return a function that takes a file path of your SCSS variables file. It also takes an optional options object, which is detailed in the next section.

```js
var scss2Json = require("scss2json");
var scssJson = require("scss-json");
var path = require("path");

var filePath = path.resolve(__dirname, "colors.scss");
var colors = scss2Json(filePath);
var colors = scssJson(filePath);
```

## Options
Expand All @@ -77,12 +79,12 @@ The second argument of the returned function is an optional options object. Each
SCSS variables files sometimes rely on other SCSS variables defined earlier in your import tree. In order to keep these files isolated (and still produce JSON), you can specify an array of files that your given file depends on. For example, below we are trying to convert our color mapping file, but it depends on the actual color definitions which are found in a different file.

```js
var scss2Json = require("scss2json");
var scssJson = require("scss-json");
var path = require("path");

var filePath = path.resolve(__dirname, "color-mapping.scss");
var dependencyPath = path.resolve(__dirname, "colors.scss");
var colors = scss2Json(filePath, {
var colors = scssJson(filePath, {
dependencies: [{ path: dependencyPath }],
});
```
Expand All @@ -104,14 +106,14 @@ html {

This will keep `$font-size` scoped locally inside that block, while allowing it to be used to derive global variables marked with the `!global` flag. These variables will be available throughout your SCSS import tree.

If you use this method in your SCSS variables file, you can provide an option to scss2json to output only the global variables to JSON. The option takes the name of the scoping placeholder as a string.
If you use this method in your SCSS variables file, you can provide an option to scss-json to output only the global variables to JSON. The option takes the name of the scoping placeholder as a string.

```js
var scss2Json = require("scss2json");
var scssJson = require("scss-json");
var path = require("path");

var filePath = path.resolve(__dirname, "variables.scss");
var colors = scss2Json(filePath, {
var colors = scssJson(filePath, {
scope: "%scoped",
});
```
Expand All @@ -126,18 +128,18 @@ $second-variable: blue;
```

```js
var scss2Json = require('scss2json');
var path = require('path');
var camelCase = require('lodash.camelCase');
var filePath = path.resolve(__dirname, 'variables.scss');
var colors = scss2Json(filePath, {
rename: function(name) {
return camelCase(name.replace('$', ''));
}
var scssJson = require("scss-json");
var path = require("path");
var camelCase = require("lodash.camelCase");
var filePath = path.resolve(__dirname, "variables.scss");
var colors = scssJson(filePath, {
rename: function (name) {
return camelCase(name.replace("$", ""));
},
});
```

When run on the code above, scss2json will output the following JSON:
When run on the code above, scss-json will output the following JSON:

```js
{
Expand All @@ -150,7 +152,7 @@ The value returned by the `rename` function is used as-is, so be sure to return

## CLI

You can also use the CLI `scss2json <file>`.
You can also use the CLI `scss-json <file>`.

## Contributing

Expand Down
45 changes: 45 additions & 0 deletions bin/scss-json
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
#!/usr/bin/env node
"use strict";

var fs = require("fs");
var path = require("path");
var minimist = require("minimist");

var scssJson = require("../main");
var opts = minimist(process.argv.slice(2), {
alias: {
h: "help",
v: "version",
d: "dependencies",
s: "scope",
},
});

var file = opts._[0];

if (opts.version) {
console.log(require("../package.json").version);
} else if (!file || file === "help" || opts.help) {
fs.createReadStream(path.resolve(__dirname, "usage.txt"))
.pipe(process.stdout)
.on("close", function () {
throw Error("Error reading usage.txt");
});
} else {
var options = {};

if (opts.dependencies) {
options.dependencies = opts.dependencies
.split(",")
.map(function (dependency) {
return { path: path.resolve(dependency) };
});
}

if (opts.scope) {
options.scope = opts.scope;
}

var result = JSON.stringify(scssJson(file, options), null, 2);
console.log(result);
}
43 changes: 0 additions & 43 deletions bin/scss2json

This file was deleted.

2 changes: 1 addition & 1 deletion bin/usage.txt
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Usage: node scss2json [options] [<file>]
Usage: node scss-json [options] [<file>]

Options:

Expand Down
8 changes: 4 additions & 4 deletions main.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
'use strict';
"use strict";

var Processor = require('./src/processor');
var Processor = require("./src/processor");

function scss2Json(path, options) {
function scssJson(path, options) {
var processor = new Processor(path, options);
return processor.object;
}

module.exports = scss2Json;
module.exports = scssJson;
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "scss2json",
"name": "scss-json",
"version": "1.0.0",
"description": "A package to export SCSS variables in JSON format",
"homepage": "https://github.com/jairmedeiros/scss2json",
"homepage": "https://github.com/jairmedeiros/scss-json",
"keywords": [
"scss",
"sass",
Expand All @@ -13,14 +13,14 @@
"email": "jairmedeiros@protonmail.com"
},
"bin": {
"scss2json": "./bin/scss2json"
"scss-json": "./bin/scss-json"
},
"repository": {
"type": "git",
"url": "git://github.com/jairmedeiros/scss2json.git"
"url": "git://github.com/jairmedeiros/scss-json.git"
},
"bugs": {
"url": "https://github.com/jairmedeiros/scss2json/issues"
"url": "https://github.com/jairmedeiros/scss-json/issues"
},
"license": "MIT",
"main": "main.js",
Expand Down
77 changes: 40 additions & 37 deletions test/cli.js
Original file line number Diff line number Diff line change
@@ -1,74 +1,77 @@
/* eslint-env node, mocha */
'use strict';
"use strict";

var assert = require('assert');
var path = require('path');
var spawn = require('cross-spawn');
var cli = path.join(__dirname, '../bin/scss2json');
var PKG_VERSION = require('../package.json').version;
var assert = require("assert");
var path = require("path");
var spawn = require("cross-spawn");
var cli = path.join(__dirname, "../bin/scss-json");
var PKG_VERSION = require("../package.json").version;

function callAndExpectNoErrors(args, cb) {
var bin = spawn(cli, args);
bin.stdout.setEncoding('utf8');
bin.stderr.setEncoding('utf8');
bin.stdout.setEncoding("utf8");
bin.stderr.setEncoding("utf8");

bin.stderr.once('data', function(data) {
bin.stderr.once("data", function (data) {
throw new Error(data);
});

bin.stdout.once('data', cb);
bin.stdout.once("data", cb);
}

describe('cli', function() {
it('returns help', function(done) {
callAndExpectNoErrors(['-h'], function(data) {
assert.equal(data.indexOf('Usage:'), 0);
describe("cli", function () {
it("returns help", function (done) {
callAndExpectNoErrors(["-h"], function (data) {
assert.equal(data.indexOf("Usage:"), 0);
done();
});
});

it('returns version number', function(done) {
callAndExpectNoErrors(['-v'], function(data) {
it("returns version number", function (done) {
callAndExpectNoErrors(["-v"], function (data) {
assert.equal(data.trim(), PKG_VERSION);
done();
});
});

it('compiles', function(done) {
var file = path.resolve(__dirname, 'scss', 'test.scss');
callAndExpectNoErrors([file], function(data) {
assert.ok(data.indexOf('$icon-font-size-lg') >= 0);
it("compiles", function (done) {
var file = path.resolve(__dirname, "scss", "test.scss");
callAndExpectNoErrors([file], function (data) {
assert.ok(data.indexOf("$icon-font-size-lg") >= 0);
done();
});
});

it('compiles with scoping', function(done) {
var file = path.resolve(__dirname, 'scss', 'scoped.scss');
callAndExpectNoErrors([file, '--scope', '%scoped'], function(data) {
assert.ok(data.indexOf('$global-with-function') >= 0);
it("compiles with scoping", function (done) {
var file = path.resolve(__dirname, "scss", "scoped.scss");
callAndExpectNoErrors([file, "--scope", "%scoped"], function (data) {
assert.ok(data.indexOf("$global-with-function") >= 0);
done();
});
});

it('compiles with dependencies', function(done) {
var file = path.resolve(__dirname, 'scss', 'has-dependents.scss');
var dependency = path.resolve(__dirname, 'scss', 'dependency.scss');
it("compiles with dependencies", function (done) {
var file = path.resolve(__dirname, "scss", "has-dependents.scss");
var dependency = path.resolve(__dirname, "scss", "dependency.scss");
var expectedLines = [
'{',
"{",
' "$first": "#00f",',
' "$global-variable": "#f00",',
' "$references": "#00f",',
' "$scss-function-with-variable": "#e60000"',
'}'
"}",
];

callAndExpectNoErrors([file, '--dependencies', dependency], function(data) {
var lines = data.trim().replace(/\r\n/g, '\n').split('\n');
assert.equal(lines.length, expectedLines.length);
lines.forEach(function(l, i) {
assert.equal(l, expectedLines[i]);
});
done();
});
callAndExpectNoErrors(
[file, "--dependencies", dependency],
function (data) {
var lines = data.trim().replace(/\r\n/g, "\n").split("\n");
assert.equal(lines.length, expectedLines.length);
lines.forEach(function (l, i) {
assert.equal(l, expectedLines[i]);
});
done();
}
);
});
});
Loading

0 comments on commit 2a33d7a

Please sign in to comment.