-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Closes #11 This replaces the glamor generated classnames in the output with placeholder "glamor-*" classnames. This improves diffs as they are not polluted by the change in classnames. BREAKING CHANGE: Your snapshots will all break and will need to be updated. That's all though 😄 and they'll be much easier to read!
- Loading branch information
Kent C. Dodds
authored
Jul 23, 2017
1 parent
ee8a9c1
commit eafaec0
Showing
9 changed files
with
188 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| const replaceClassNames = (selectors, styles, code) => { | ||
| let index = 0 | ||
| return selectors.reduce((acc, className) => { | ||
| if (className.indexOf('.css-') === 0) { | ||
| const escapedRegex = new RegExp( | ||
| className.replace('.', '').replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), | ||
| 'g', | ||
| ) | ||
| return acc.replace(escapedRegex, `glamor-${index++}`) | ||
| } | ||
| return acc | ||
| }, `${styles}\n\n${code}`) | ||
| } | ||
|
|
||
| module.exports = {replaceClassNames} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import {replaceClassNames} from './replace-class-names' | ||
|
|
||
| test('Replaces a single class', () => { | ||
| const selectors = ['.css-12345'] | ||
| const styles = ` | ||
| .css-12345, | ||
| [data-css-12345] { | ||
| font-size: 1.5em; | ||
| text-align: center; | ||
| color: palevioletred; | ||
| } | ||
| ` | ||
| const code = ` | ||
| <h1 | ||
| className="changed-class css-12345" | ||
| > | ||
| Hello World, this is my first glamor styled component! | ||
| </h1> | ||
| ` | ||
|
|
||
| expect(replaceClassNames(selectors, styles, code)).toMatch(/(glamor-0)/) | ||
| expect(replaceClassNames(selectors, styles, code)).not.toMatch(/(css-12345)/) | ||
| }) | ||
|
|
||
| test('Replaces multiple glamor classes', () => { | ||
| const selectors = ['.css-12345', '.css-67890'] | ||
| const styles = ` | ||
| .css-12345, | ||
| [data-css-12345] { | ||
| font-size: 1.5em; | ||
| text-align: center; | ||
| color: palevioletred; | ||
| } | ||
| .css-67890, | ||
| [data-css-67890] { | ||
| font-size: 1.5em; | ||
| text-align: center; | ||
| color: palevioletred; | ||
| } | ||
| ` | ||
| const code = ` | ||
| <section | ||
| className="some-other-class css-12345" | ||
| > | ||
| <h1 | ||
| className="changed-class css-67890" | ||
| > | ||
| Hello World, this is my first glamor styled component! | ||
| </h1> | ||
| </section> | ||
| ` | ||
|
|
||
| expect(replaceClassNames(selectors, styles, code)).toMatch(/(glamor-0)/) | ||
| expect(replaceClassNames(selectors, styles, code)).toMatch(/(glamor-1)/) | ||
| }) | ||
|
|
||
| test('does not replace non-glamor classes', () => { | ||
| const selectors = ['.p-4em'] | ||
| const styles = ` | ||
| .p-4em, | ||
| [data-p-4em] { | ||
| padding: 4em; | ||
| } | ||
| ` | ||
| const code = ` | ||
| <section | ||
| className="p-4em" | ||
| > | ||
| Hello World | ||
| </section> | ||
| ` | ||
|
|
||
| expect(replaceClassNames(selectors, styles, code)).not.toMatch(/(glamor-0)/) | ||
| expect(replaceClassNames(selectors, styles, code)).toMatch(/(p-4em)/) | ||
| }) | ||
|
|
||
| test('only replaces classes beginning with "css-"', () => { | ||
| const selectors = ['.not-glamor-css-1234'] | ||
| const styles = ` | ||
| .not-glamor-css-1234, | ||
| [data-not-glamor-css-1234] { | ||
| padding: 4em; | ||
| } | ||
| ` | ||
| const code = ` | ||
| <section | ||
| className="not-glamor-css-1234" | ||
| > | ||
| Hello World | ||
| </section> | ||
| ` | ||
|
|
||
| expect(replaceClassNames(selectors, styles, code)).not.toMatch(/(glamor-0)/) | ||
| expect(replaceClassNames(selectors, styles, code)).toMatch( | ||
| /(not-glamor-css-1234)/, | ||
| ) | ||
| }) |
Oops, something went wrong.