DomainGroupOSS / sass-to-emotion Public

Notifications You must be signed in to change notification settings
Fork 12
Star 41

CLI that transforms Sass files to Emotion js files + jscodeshift transform that replaces className with css attribute

41 stars 12 forks Branches Tags Activity

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 91 Commits
__snapshots__		__snapshots__
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.nvmrc		.nvmrc
README.md		README.md
index.js		index.js
jscodeshift.js		jscodeshift.js
package.json		package.json
selector-to-variable-identifier.js		selector-to-variable-identifier.js
transform.js		transform.js
transform.test.js		transform.test.js
yarn.lock		yarn.lock

Repository files navigation

sass-to-emotion

There are two parts to this repo, the Sass part and the JavaScript part.

Sass

Give it a glob of .scss files, it will create a bunch of Emotion js files.

yarn global add sass-to-emotion
sass-to-emotion ./src/scss/**/*.scss

JavaScript

The JS part uses jscodeshift. Clone this repo and link to the transform at sass-to-emotion/jscodeshift when using the jscodeshift CLI. For example:

yarn global add jscodeshift
jscodeshift --parser flow -t ../sass-to-emotion/jscodeshift.js ./src/js

For example src/js/components/ads/ad-spot-boilerplate.js will add a import styles from '../../../components/ads/ad-spot-boilerplate.js' and change a BEM like classname from className="baz-whizz__foo-bar" to className={styles.fooBar}.