# cra-json-sass

> a file conversor from json to sass

Latest version **0.2.1** (published 2019-08-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install cra-json-sass
pnpm add cra-json-sass
yarn add cra-json-sass
bun add cra-json-sass
```

Provides the commands `cra-json-sass-build`, `cra-json-sass-watch`.

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2019-08-20 |
| First published | 2019-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 36.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Francisco Gutiérrez sarazá |
| Maintainers | pikilon |
| Keywords | create react app, json, sass, scss, cra, watch, test, selectors, shared |

## Links

- npm: https://www.npmjs.com/package/cra-json-sass
- Repository: https://github.com/pikilon/cra-json-sass
- npm.io page: https://npm.io/package/cra-json-sass

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0
- [chokidar](https://npm.io/package/chokidar.md) ^3.0.2

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.2.1 (latest) — 2019-08-20
- 0.2.0 — 2019-08-20
- 0.1.9 — 2019-08-20
- 0.1.8 — 2019-08-15
- 0.1.3 — 2019-08-05
- 0.1.2 — 2019-08-03
- 0.1.1 — 2019-08-03
- 0.1.0 — 2019-08-02

## README

## Description

> I created this package as a tool for myself and is under development.

Creates `.scss` files with variables from a `.json`

**Why?** you can share variables between `scss` and `js` without altering bundlers (`webpack`) configurations,
I create this to no be forced to eject `Create React App`

This will translate even very nested `arrays` and `objects`;

> It is also useful for [testing](#testing-component) or creating full application selectors maps.

![Code Diagram](https://github.com/pikilon/cra-json-sass/raw/master/cra-json-sass.svg?sanitize=true)

## Instalation

#### npm
```
npm i -D cra-json-sass
```

#### yarn
```
yarn add -D cra-json-sass
```

## Config

You can config the default values by creating a `config-cra-json-sass.json` file in your package root folder:

This are the default values


```json
{
  "folder": "src",
  "fileExtension": ".scss.json"
}
```


## Usage

You have two binaries that will look into [`config.folder`](#config) for files with [`config.fileExtension`](config) and generate json files

* `yarn cra-json-sass-build`: write all the files and stop.
* `yarn cra-json-sass-watch`: write all the files and keep waiting for file changes.

## EXAMPLES

### Source `shared-js-scss.scss.json`

```js
// tests/basicSample.scss.json

{
  "block": "Button",
  "text": "Button__text",
  "icon": "Button__icon",
  "primary": "Button--primary",
  "secondary": "Button--secondary",
  "isActive": "is-active",
  "animationSpeed" : 0.2,
  "backgroundColor": "green",
  "nested": {
    "color": "red",
    "re-nested": {
      "last-value": "orange"
    }
  },
  "array": [
    "blue",
    {
      "background-color": "red",
      "font-size": "1rem"
    }
  ]
}
```
### Generates `shared-js-scss.scss`

```scss
// tests/basicSample.scss

$block: Button;
$text: Button__text;
$icon: Button__icon;
$primary: Button--primary;
$secondary: Button--secondary;
$isActive: is-active;
$animationSpeed: 0.2;
$backgroundColor: green;
$nested: (
  color: red,
  re-nested: (
   last-value: orange
  )
 );
$array: (
  blue,
  (
   background-color: red,
   font-size: 1rem
  )
 );

```

### usage in `sample.js`
```js
import sharedWithScss from `./shared.scss.json` // simple json
import `sample-style.scss` // import the styles, not as a module

sharedWithScss.block.Button // "Button"
sharedWithScss.text // "Button__text"
setTimeOut(
  () => console.log('the same time animation takes'),
  sharedWithScss.animationSpeed * 1000)
```

### usage in `sample-style.scss`

```scss
@import "./shared"; //you don't need any extension

.#{$block} {
  background-color: $backgroundColor;
  transition: all #{$animationSpeed}s;
  color: map-get($nested, color); // red

  &.#{$isActive} { // .Button.is-active
    color: map-get(map-get($nested, re-nested),last-value) // orange
  }
.#{$text} {
  display: flex;
}

```

### Testing component

```js
import selectors from './shared.scss.json'

// ... mount component with enzyme
const component = mount(<SampleComponent>Text</SampleComponent>)

it(
  `Should Have ${selectors.block} and ${selectors.primary}`,
  () => {
    expect(component.hasClass(selectors.block)).toEqual(true)
    expect(component.hasClass(selectors.primary)).toEqual(true)
  }
  );

  const textSelector = `.${selectors.text}`
it(
  `Should Have a inner element ${textSelector}`,
  () => {
    const innerElement = component.find(textSelector)

    expect(innerElement).toHaveLength(1)
  }
  );
```

---
_Source: https://npm.io/package/cra-json-sass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._