Skip to content

Commit e4ebd67

Browse files
author
Adam Gruber
committed
README: add notes about options and usage
1 parent d138119 commit e4ebd67

File tree

1 file changed

+48
-0
lines changed

1 file changed

+48
-0
lines changed

README.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,50 @@ It will yield the following object:
8686
}
8787
```
8888

89+
## Right on! But I need options.
90+
91+
Everybody loves options and we've got one:
92+
93+
Option Name | Default | Description
94+
:---------- | :------ | :----------
95+
`camelCase` | true | Should SASS variable names be converted to camelCase
96+
97+
### Options Usage
98+
99+
#### Plugin Instance
100+
101+
Currently there is no way to pass plugin options through sass-extract's render or extract api. However, you *can* pass a plugin instance directly inside the plugins array instead of a string. Here's how to do it:
102+
103+
```js
104+
// Import the plugin factory directly
105+
import createSassExtractJsPlugin from 'sass-extract-js/lib/plugin';
106+
107+
// Create a plugin instance, passing in your options
108+
const sassExtractJsPlugin = createSassExtractJsPlugin({ camelCase: false });
109+
110+
// Call the `renderSync` function with the path to your Sass file
111+
// and pass the plugin instance in the plugins array
112+
const rendered = sassExtract.renderSync({
113+
file: './path/to/vars.scss'
114+
}, {
115+
plugins: [sassExtractJsPlugin]
116+
});
117+
118+
```
119+
120+
#### Using `transformVars` directly
121+
122+
If, for some reason, you don't want to use this package as a sass-extract plugin, you can import the `transformVars` function directly and use it. This is the main function that gets called in sass-extract's plugin pipeline. It expects as its input an object with extracted SASS variables, as generated by sass-extract. The function also accepts an options object.
123+
124+
```js
125+
// Import the transformVars method directly
126+
import transformVars from 'sass-extract-js/lib/transformVars';
127+
128+
// Call the function, passing in your options
129+
const trasformed = transformVars(objectWithExtractedStyles, { camelCase: false });
130+
```
131+
132+
89133
## Wait! What if I don't use styled-components?
90134

91135
No problem! I made this so I could use the extracted JS object as a theme but it's not specific to [styled-components][styled-components]. It should work the same with [glamorous][glamorous] too. Really you can use this plugin for any scenario where you need to convert Sass vars to JS.
@@ -94,6 +138,10 @@ No problem! I made this so I could use the extracted JS object as a theme but it
94138

95139
This project is open source. I've tried to make sure it works for a lot of use cases (read: mine) but if I missed yours, feel free to [open an issue][issues]. Better yet, [submit a PR][pr]! Seriously, any feedback and help is welcome.
96140

141+
## License
142+
143+
MIT
144+
97145
[issues]: https://github.com/adamgruber/sass-extract-js/issues
98146
[pr]: https://github.com/adamgruber/sass-extract-js/pulls
99147
[styled-components]: https://www.styled-components.com/

0 commit comments

Comments
 (0)