-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #227 from styled-components/per-component-classnam…
…e-generation Per-component classnames
- Loading branch information
Showing
19 changed files
with
1,227 additions
and
638 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| // @flow | ||
| import css from './css' | ||
| import type { Interpolation, Target } from '../types' | ||
|
|
||
| const constructWithOptions = (componentConstructor: Function, | ||
| tag: Target, | ||
| options: Object = {}) => { | ||
| /* This is callable directly as a template function */ | ||
| const templateFunction = | ||
| (strings: Array<string>, ...interpolations: Array<Interpolation>) => | ||
| componentConstructor(tag, options, css(strings, ...interpolations)) | ||
|
|
||
| /* If withConfig is called, wrap up a new template function and merge options */ | ||
| templateFunction.withConfig = config => | ||
| constructWithOptions(componentConstructor, tag, { ...options, ...config }) | ||
|
|
||
| return templateFunction | ||
| } | ||
|
|
||
| export default constructWithOptions |
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 |
|---|---|---|
|
|
@@ -61,7 +61,8 @@ describe('injectGlobal', () => { | |
| ` | ||
|
|
||
| expectCSSMatches(` | ||
| .a { | ||
| .sc-a {} | ||
| .b { | ||
| ${rule3} | ||
| } | ||
| html { | ||
|
|
||
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
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,78 @@ | ||
| // @flow | ||
| import React, { Component } from 'react' | ||
| import expect from 'expect' | ||
| import { shallow } from 'enzyme' | ||
|
|
||
| import { resetStyled } from './utils' | ||
|
|
||
| let styled | ||
|
|
||
| describe('expanded api', () => { | ||
| /** | ||
| * Make sure the setup is the same for every test | ||
| */ | ||
| beforeEach(() => { | ||
| styled = resetStyled() | ||
| }) | ||
|
|
||
| describe('displayName', () => { | ||
| it('should be auto-generated if none passed', () => { | ||
| const Comp = styled.div`` | ||
| expect(Comp.displayName).toBe('styled.div') | ||
| }) | ||
|
|
||
| it('should be attached if supplied', () => { | ||
| const Comp = styled.div.withConfig({ displayName: 'Comp' })`` | ||
| expect(Comp.displayName).toBe('Comp') | ||
| }) | ||
| }) | ||
|
|
||
| describe('componentId', () => { | ||
| it('should be generated as "sc" + hash', () => { | ||
| const Comp = styled.div`` | ||
| const Comp2 = styled.div`` | ||
| expect(Comp.styledComponentId).toBe('sc-a') | ||
| expect(shallow(<Comp />).prop('className')).toInclude('sc-a') | ||
| expect(Comp2.styledComponentId).toBe('sc-b') | ||
| expect(shallow(<Comp2 />).prop('className')).toInclude('sc-b') | ||
| }) | ||
|
|
||
| it('should be generated from displayName + hash', () => { | ||
| const Comp = styled.div.withConfig({ displayName: 'Comp' })`` | ||
| const Comp2 = styled.div.withConfig({ displayName: 'Comp2' })`` | ||
| expect(Comp.styledComponentId).toBe('Comp-a') | ||
| expect(shallow(<Comp />).prop('className')).toInclude('Comp-a') | ||
| expect(Comp2.styledComponentId).toBe('Comp2-b') | ||
| expect(shallow(<Comp2 />).prop('className')).toInclude('Comp2-b') | ||
| }) | ||
|
|
||
| it('should be attached if passed in', () => { | ||
| const Comp = styled.div.withConfig({ displayName: 'Comp', componentId: 'LOLOMG' })`` | ||
| const Comp2 = styled.div.withConfig({ displayName: 'Comp2', componentId: 'OMGLOL' })`` | ||
| expect(Comp.styledComponentId).toBe('LOLOMG') | ||
| expect(shallow(<Comp />).prop('className')).toInclude('LOLOMG') | ||
| expect(Comp2.styledComponentId).toBe('OMGLOL') | ||
| expect(shallow(<Comp2 />).prop('className')).toInclude('OMGLOL') | ||
| }) | ||
| }) | ||
|
|
||
| describe('chaining', () => { | ||
| it('should merge the options strings', () => { | ||
| const Comp = styled.div | ||
| .withConfig({ componentId: 'id-1' }) | ||
| .withConfig({ displayName: 'dn-2' }) | ||
| `` | ||
| expect(Comp.displayName).toBe('dn-2') | ||
| expect(shallow(<Comp />).prop('className')).toBe('id-1 a') | ||
| }) | ||
|
|
||
| it('should keep the last value passed in when merging', () => { | ||
| const Comp = styled.div | ||
| .withConfig({ displayName: 'dn-2', componentId: 'id-3' }) | ||
| .withConfig({ displayName: 'dn-5', componentId: 'id-4' }) | ||
| `` | ||
| expect(Comp.displayName).toBe('dn-5') | ||
| expect(shallow(<Comp />).prop('className')).toBe('id-4 a') | ||
| }) | ||
| }) | ||
| }) |
Oops, something went wrong.