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 or creating full application selectors maps.
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
Usage
You have two binaries that will look into config.folder
for files with config.fileExtension
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
shared-js-scss.scss.json
Source // tests/basicSample.scss.json "block": "Button" "text": "Button__text" "icon": "Button__icon" "primary": "Button--primary" "secondary": "Button--secondary" "isActive": "is-active" "animationSpeed" : 02 "backgroundColor": "green" "nested": "color": "red" "re-nested": "last-value": "orange" "array": "blue" "background-color": "red" "font-size": "1rem"
shared-js-scss.scss
Generates // tests/basicSample.scss ;;;;;;;;;;
sample.js
usage in sharedWithScssblockButton // "Button"sharedWithScsstext // "Button__text"
sample-style.scss
usage in ; //you don't need any extension .#{$block}
Testing component
// ... mount component with enzymeconst component = ; const textSelector = `.`;