From 2a33d7af17d81d29260233229891605d5e015b00 Mon Sep 17 00:00:00 2001 From: Jair Medeiros Date: Thu, 21 Apr 2022 19:24:00 -0300 Subject: [PATCH] Rename package --- README.md | 48 ++++++------- bin/scss-json | 45 ++++++++++++ bin/scss2json | 43 ------------ bin/usage.txt | 2 +- main.js | 8 +-- package.json | 10 +-- test/cli.js | 77 +++++++++++---------- test/integrationTests.js | 143 ++++++++++++++++++++------------------- test/mainTests.js | 32 ++++----- 9 files changed, 211 insertions(+), 197 deletions(-) create mode 100755 bin/scss-json delete mode 100755 bin/scss2json diff --git a/README.md b/README.md index 3850c52..7ddcfbe 100644 --- a/README.md +++ b/README.md @@ -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. @@ -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). @@ -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 { @@ -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 @@ -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 }], }); ``` @@ -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", }); ``` @@ -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 { @@ -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 `. +You can also use the CLI `scss-json `. ## Contributing diff --git a/bin/scss-json b/bin/scss-json new file mode 100755 index 0000000..6e312f8 --- /dev/null +++ b/bin/scss-json @@ -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); +} diff --git a/bin/scss2json b/bin/scss2json deleted file mode 100755 index f686d6f..0000000 --- a/bin/scss2json +++ /dev/null @@ -1,43 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -var fs = require('fs'); -var path = require('path'); -var minimist = require('minimist'); - -var scss2Json = 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(scss2Json(file, options), null, 2); - console.log(result); -} diff --git a/bin/usage.txt b/bin/usage.txt index 266312e..4f1ac50 100644 --- a/bin/usage.txt +++ b/bin/usage.txt @@ -1,4 +1,4 @@ -Usage: node scss2json [options] [] +Usage: node scss-json [options] [] Options: diff --git a/main.js b/main.js index 198fba1..73855c4 100644 --- a/main.js +++ b/main.js @@ -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; diff --git a/package.json b/package.json index dba236f..1011182 100644 --- a/package.json +++ b/package.json @@ -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", @@ -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", diff --git a/test/cli.js b/test/cli.js index 8c0c7f0..2ab051f 100644 --- a/test/cli.js +++ b/test/cli.js @@ -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(); + } + ); }); }); diff --git a/test/integrationTests.js b/test/integrationTests.js index 2f944d1..5874f27 100644 --- a/test/integrationTests.js +++ b/test/integrationTests.js @@ -1,24 +1,24 @@ -'use strict'; +"use strict"; -var path = require('path'); -var assert = require('assert'); -var scss2Json = require('../main.js'); +var path = require("path"); +var assert = require("assert"); +var scssJson = require("../main.js"); -describe('Integration Tests', function() { +describe("Integration Tests", function () { var output; - context('if file has no dependencies', function() { - beforeEach(function() { + context("if file has no dependencies", function () { + beforeEach(function () { output = { - "$first": "52px", + $first: "52px", "$second-variable": "red", "$global-variable": "#123", - "$references": "red", + $references: "red", "$scss-function": "#1e3c59", "$scss-function-with-variable": "#0b1520", - "$image": "url(sample.svg)", - "$image-with-quotes": "url(\"sample.svg\")", - "$calculation": "40px", + $image: "url(sample.svg)", + "$image-with-quotes": 'url("sample.svg")', + $calculation: "40px", "$multiple-variables": "52px solid red", "$multiple-calculations": "40px", "$gray-50": "#fff", @@ -27,87 +27,94 @@ describe('Integration Tests', function() { "$font-size-small": "15px", "$font-size-large": "18px", "$icon-font-size": "15px", - "$icon-font-size-lg": "18px" + "$icon-font-size-lg": "18px", }; }); - it('should compile the sample file to the correct JS object', function() { - var filePath = path.resolve(__dirname, 'scss', 'test.scss'); - var compiled = scss2Json(filePath); + it("should compile the sample file to the correct JS object", function () { + var filePath = path.resolve(__dirname, "scss", "test.scss"); + var compiled = scssJson(filePath); assert.deepEqual(compiled, output); }); }); - context('if file has dependencies', function() { - beforeEach(function() { + context("if file has dependencies", function () { + beforeEach(function () { output = { - "$first": "#00f", + $first: "#00f", "$global-variable": "#f00", - "$references": "#00f", - "$scss-function-with-variable": "#e60000" + $references: "#00f", + "$scss-function-with-variable": "#e60000", }; }); - it('should compile the sample file to the correct JS object', function() { - var filePath = path.resolve(__dirname, 'scss', 'has-dependents.scss'); - var dependencyPath = path.resolve(__dirname, 'scss', 'dependency.scss'); - var compiled = scss2Json(filePath, { - dependencies: [ - { path: dependencyPath } - ] + it("should compile the sample file to the correct JS object", function () { + var filePath = path.resolve(__dirname, "scss", "has-dependents.scss"); + var dependencyPath = path.resolve(__dirname, "scss", "dependency.scss"); + var compiled = scssJson(filePath, { + dependencies: [{ path: dependencyPath }], }); assert.deepEqual(compiled, output); }); }); - context('if file is scoped', function() { - beforeEach(function() { + context("if file is scoped", function () { + beforeEach(function () { output = { "$global-variable": "17px", - "$global-with-function": "#0b1520" + "$global-with-function": "#0b1520", }; }); - it('should compile the sample file to the correct JS object', function() { - var filePath = path.resolve(__dirname, 'scss', 'scoped.scss'); - var compiled = scss2Json(filePath, { - scope: '%scoped' + it("should compile the sample file to the correct JS object", function () { + var filePath = path.resolve(__dirname, "scss", "scoped.scss"); + var compiled = scssJson(filePath, { + scope: "%scoped", }); assert.deepEqual(compiled, output); }); }); - context('if file is scoped and has dependencies on a scoped file', function() { - beforeEach(function() { - output = { - "$button-color-global": "#00f", - "$tag-color-global": "#0f0" - }; - }); - - it('should compile the sample file to the correct JS object', function() { - var filePath = path.resolve(__dirname, 'scss', 'scoped-has-dependents.scss'); - var dependencyPath = path.resolve(__dirname, 'scss', 'scoped-dependency.scss'); - var compiled = scss2Json(filePath, { - scope: '%scoped', - dependencies: [ - { path: dependencyPath, scope: '%scoped' } - ] + context( + "if file is scoped and has dependencies on a scoped file", + function () { + beforeEach(function () { + output = { + "$button-color-global": "#00f", + "$tag-color-global": "#0f0", + }; }); - assert.deepEqual(compiled, output); - }); - }); - context('if rename option is specified', function() { - it('should compile the sample file to the correct JS object', function() { - var filePath = path.resolve(__dirname, 'scss', 'small-test.scss'); - var compiled = scss2Json(filePath, { - rename: function(name) { - return name.replace('$', 'renamed-'); - } + it("should compile the sample file to the correct JS object", function () { + var filePath = path.resolve( + __dirname, + "scss", + "scoped-has-dependents.scss" + ); + var dependencyPath = path.resolve( + __dirname, + "scss", + "scoped-dependency.scss" + ); + var compiled = scssJson(filePath, { + scope: "%scoped", + dependencies: [{ path: dependencyPath, scope: "%scoped" }], + }); + + assert.deepEqual(compiled, output); + }); + } + ); + context("if rename option is specified", function () { + it("should compile the sample file to the correct JS object", function () { + var filePath = path.resolve(__dirname, "scss", "small-test.scss"); + var compiled = scssJson(filePath, { + rename: function (name) { + return name.replace("$", "renamed-"); + }, }); output = { "renamed-first": "52px", @@ -117,15 +124,15 @@ describe('Integration Tests', function() { assert.deepEqual(compiled, output); }); - it('should retain the last-seen value for matching names', function() { - var filePath = path.resolve(__dirname, 'scss', 'small-test.scss'); - var compiled = scss2Json(filePath, { - rename: function() { - return 'allTheSame'; - } + it("should retain the last-seen value for matching names", function () { + var filePath = path.resolve(__dirname, "scss", "small-test.scss"); + var compiled = scssJson(filePath, { + rename: function () { + return "allTheSame"; + }, }); output = { - "allTheSame": "red" + allTheSame: "red", }; assert.deepEqual(compiled, output); diff --git a/test/mainTests.js b/test/mainTests.js index e2df233..b5b9ef2 100644 --- a/test/mainTests.js +++ b/test/mainTests.js @@ -1,38 +1,38 @@ -'use strict'; +"use strict"; -var assert = require('assert'); -var proxyquire = require('proxyquire'); -var sinon = require('sinon'); +var assert = require("assert"); +var proxyquire = require("proxyquire"); +var sinon = require("sinon"); -describe('Main', function() { - var scss2Json; +describe("Main", function () { + var scssJson; var ProcessorStub; var returnedObject; var path; var options; - beforeEach(function() { + beforeEach(function () { returnedObject = { - test: true + test: true, }; - ProcessorStub = sinon.spy(function() { + ProcessorStub = sinon.spy(function () { this.object = returnedObject; }); - scss2Json = proxyquire('../main', { - './src/processor': ProcessorStub + scssJson = proxyquire("../main", { + "./src/processor": ProcessorStub, }); - path = 'test/path.scss'; + path = "test/path.scss"; options = { - dependencies: [] + dependencies: [], }; }); - describe('Constructor', function() { - it('create a new processor and return its object', function() { - var json = scss2Json(path, options); + describe("Constructor", function () { + it("create a new processor and return its object", function () { + var json = scssJson(path, options); assert.ok(ProcessorStub.calledOnce); assert.ok(ProcessorStub.calledWith(path, options));