Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
presets: [
'react',
],
plugins: [
'transform-es2015-modules-commonjs',
'transform-class-properties',
['transform-object-rest-spread', { useBuiltIns: true }],
]
}
5 changes: 5 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
extends: 'jss'
parser: babel-eslint

env:
jest: true
9 changes: 9 additions & 0 deletions .flowconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
[ignore]
.*/node_modules/.*
<PROJECT_ROOT>/coverage/
<PROJECT_ROOT>/examples/

<PROJECT_ROOT>/lib/

[options]
all=true
7 changes: 7 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
npm-debug.log

yarn.lock

node_modules
lib
coverage
1 change: 1 addition & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
yarn.lock
78 changes: 78 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
# Styled JSS

## Usage

### With Styled Creator

Styled Creator allows to share classes between styled primitives

```jsx
import Styled from 'styled-jss'
import injectSheet from 'react-jss'

// Base styles, like a regular jss object.
const styled = Styled({
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be a second separate example, because user will think he needs to do that.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would try to make clear that the API is mostly compatible with styled

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And this feature is on top of it.

root: {
margin: 10
},
baseButton: {
padding: 10
}
})

const NormalButton = styled('button', {
composes: '$baseButton',
border: '1px solid grey'
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets leverage jss-default-unit? border: [1, 'solid', 'grey']

color: 'black'
})

// Composition over styled() same like styled-components
const PrimaryButton = styled(NormalButton, {
color: 'red'
})

// One can use classes AND styled primitives.
const MyComponent = ({classes}) => (
<div className={classes.root}>
<PrimaryButton>
</div>
)

const MyStyledComponent = injectSheet(styled.styles)(MyComponent)
```

### With default styled function

```jsx
import { styled } from 'styled-jss'

const Button = styled('button', {
fontSize: 12,
color: (props) => props.theme.textColor
})

const PrimaryButton = styled(Button, {
color: 'red'
})
```

### With custom JSS setup:

#### For Styled Creator:
```jsx
import {create as createJss} from 'jss'
import {create as createInjectSheet} from 'react-jss'
import vendorPrefixer from 'jss-vendor-prefixer'

import { setStyledCreator, prepareStyled } from 'styled-jss'

const jss = createJss()
jss.use(vendorPrefixer())

const injectSheet = createInjectSheet(jss)

export const styled = prepareStyled(injectSheet)

const Styled = setStyledCreator(styled)
export default Styled
```
18 changes: 18 additions & 0 deletions flow-typed/npm/@lttb/eslint-config-default_vx.x.x.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// flow-typed signature: 247bd0f0fb67c476dd58bf82ba5163ed
// flow-typed version: <<STUB>>/@lttb/eslint-config-default_vgithub:lttb/configs#js/flow_v0.44.2

/**
* This is an autogenerated libdef stub for:
*
* '@lttb/eslint-config-default'
*
* Fill this stub out by replacing all the `any` types.
*
* Once filled out, we encourage you to share your work with the
* community by sending a pull request to:
* https://github.com/flowtype/flow-typed
*/

declare module '@lttb/eslint-config-default' {
declare module.exports: any;
}
108 changes: 108 additions & 0 deletions flow-typed/npm/babel-cli_vx.x.x.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
// flow-typed signature: d0500d72eccbf8f597f96e1bf847cb49
// flow-typed version: <<STUB>>/babel-cli_v^6.23.0/flow_v0.44.2

/**
* This is an autogenerated libdef stub for:
*
* 'babel-cli'
*
* Fill this stub out by replacing all the `any` types.
*
* Once filled out, we encourage you to share your work with the
* community by sending a pull request to:
* https://github.com/flowtype/flow-typed
*/

declare module 'babel-cli' {
declare module.exports: any;
}

/**
* We include stubs for each file inside this npm package in case you need to
* require those files directly. Feel free to delete any files that aren't
* needed.
*/
declare module 'babel-cli/bin/babel-doctor' {
declare module.exports: any;
}

declare module 'babel-cli/bin/babel-external-helpers' {
declare module.exports: any;
}

declare module 'babel-cli/bin/babel-node' {
declare module.exports: any;
}

declare module 'babel-cli/bin/babel' {
declare module.exports: any;
}

declare module 'babel-cli/lib/_babel-node' {
declare module.exports: any;
}

declare module 'babel-cli/lib/babel-external-helpers' {
declare module.exports: any;
}

declare module 'babel-cli/lib/babel-node' {
declare module.exports: any;
}

declare module 'babel-cli/lib/babel/dir' {
declare module.exports: any;
}

declare module 'babel-cli/lib/babel/file' {
declare module.exports: any;
}

declare module 'babel-cli/lib/babel/index' {
declare module.exports: any;
}

declare module 'babel-cli/lib/babel/util' {
declare module.exports: any;
}

// Filename aliases
declare module 'babel-cli/bin/babel-doctor.js' {
declare module.exports: $Exports<'babel-cli/bin/babel-doctor'>;
}
declare module 'babel-cli/bin/babel-external-helpers.js' {
declare module.exports: $Exports<'babel-cli/bin/babel-external-helpers'>;
}
declare module 'babel-cli/bin/babel-node.js' {
declare module.exports: $Exports<'babel-cli/bin/babel-node'>;
}
declare module 'babel-cli/bin/babel.js' {
declare module.exports: $Exports<'babel-cli/bin/babel'>;
}
declare module 'babel-cli/index' {
declare module.exports: $Exports<'babel-cli'>;
}
declare module 'babel-cli/index.js' {
declare module.exports: $Exports<'babel-cli'>;
}
declare module 'babel-cli/lib/_babel-node.js' {
declare module.exports: $Exports<'babel-cli/lib/_babel-node'>;
}
declare module 'babel-cli/lib/babel-external-helpers.js' {
declare module.exports: $Exports<'babel-cli/lib/babel-external-helpers'>;
}
declare module 'babel-cli/lib/babel-node.js' {
declare module.exports: $Exports<'babel-cli/lib/babel-node'>;
}
declare module 'babel-cli/lib/babel/dir.js' {
declare module.exports: $Exports<'babel-cli/lib/babel/dir'>;
}
declare module 'babel-cli/lib/babel/file.js' {
declare module.exports: $Exports<'babel-cli/lib/babel/file'>;
}
declare module 'babel-cli/lib/babel/index.js' {
declare module.exports: $Exports<'babel-cli/lib/babel/index'>;
}
declare module 'babel-cli/lib/babel/util.js' {
declare module.exports: $Exports<'babel-cli/lib/babel/util'>;
}
Loading