├── .bithoundrc ├── .eslintignore ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .github ├── CODEOWNERS ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── ---bug-report.md │ └── ---feature-request.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── .travis.yml ├── .yarn └── releases │ └── yarn-1.15.2.js ├── .yarnrc ├── CODE_OF_CONDUCT.md ├── LICENSE ├── babelOptions.js ├── browsers.json ├── changelog.md ├── contributing.md ├── docs ├── articles.md ├── cdn.md ├── csp.md ├── environment-requirements.md ├── examples.md ├── faq.md ├── features.md ├── intro.md ├── jss-api.md ├── jss-plugin-cache.md ├── jss-plugin-camel-case.md ├── jss-plugin-compose.md ├── jss-plugin-default-unit.md ├── jss-plugin-expand.md ├── jss-plugin-extend.md ├── jss-plugin-global.md ├── jss-plugin-isolate.md ├── jss-plugin-nested.md ├── jss-plugin-props-sort.md ├── jss-plugin-rule-value-function.md ├── jss-plugin-rule-value-observable.md ├── jss-plugin-template.md ├── jss-plugin-vendor-prefixer.md ├── jss-preset-default.md ├── jss-syntax.md ├── migrations.md ├── performance.md ├── plugins.md ├── projects.md ├── react-jss-hoc.md ├── react-jss-ts.md ├── react-jss.md ├── setup.md ├── ssr.md └── users.md ├── examples ├── angular │ ├── app.js │ ├── index.html │ └── package.json ├── angular5 │ ├── app │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── main.ts │ ├── index.html │ └── package.json ├── bootstrap │ ├── app.js │ ├── bootstrap-theme.js │ ├── bootstrap.js │ ├── index.html │ └── package.json ├── calendar │ ├── components │ │ ├── calendar │ │ │ ├── index.js │ │ │ └── style.js │ │ ├── canvas │ │ │ ├── index.js │ │ │ └── style.js │ │ ├── conf │ │ │ └── index.js │ │ ├── event │ │ │ ├── content-tpl.js │ │ │ ├── index.js │ │ │ └── style.js │ │ ├── events-manager │ │ │ ├── distribute.js │ │ │ └── index.js │ │ ├── jss.js │ │ ├── timeline │ │ │ ├── index.js │ │ │ ├── marker-tpl.js │ │ │ └── style.js │ │ └── utils │ │ │ └── index.js │ ├── index.html │ ├── index.js │ └── package.json ├── composition │ ├── app.js │ ├── component-a-style.js │ ├── component-b-style.js │ ├── index.html │ └── package.json ├── dynamic-props │ ├── app.js │ ├── index.html │ └── package.json ├── function-values │ ├── .babelrc │ ├── Controls.js │ ├── JssAnimation.js │ ├── ReactAnimation.js │ ├── app.js │ ├── index.html │ ├── index.js │ ├── jssRenderer.js │ ├── package.json │ ├── reactInlineRenderer.js │ ├── reactJssRenderer.js │ └── utils.js ├── inline │ ├── app.js │ ├── index.html │ └── package.json ├── observables │ ├── index.html │ ├── index.js │ └── package.json ├── perdido │ ├── app.js │ ├── index.html │ ├── package.json │ └── styles.js ├── plugins │ ├── jss-plugin-camel-case │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-compose │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-default-unit │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-expand │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-extend │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-global │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-isolate │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-nested │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-props-sort │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-rule-value-function │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-rule-value-observable │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ ├── jss-plugin-template │ │ ├── app.js │ │ ├── index.html │ │ └── package.json │ └── jss-plugin-vendor-prefixer │ │ ├── app.js │ │ ├── index.html │ │ └── package.json ├── react-ssr │ ├── client.js │ ├── package.json │ ├── sandbox.config.json │ ├── server.js │ ├── src │ │ └── Button.js │ ├── ssr.js │ └── static │ │ └── client.js ├── swinging-cat-rx │ ├── index.html │ ├── index.js │ ├── package.json │ └── src │ │ ├── animation.js │ │ ├── ear.js │ │ ├── face.js │ │ ├── globalStyles.js │ │ ├── hand.js │ │ ├── jss.js │ │ ├── leg.js │ │ ├── lowerBody.js │ │ ├── scene.js │ │ ├── tail.js │ │ ├── theme.js │ │ ├── upperBody.js │ │ └── yarn.js └── swinging-cat │ ├── index.html │ ├── index.js │ ├── package.json │ └── src │ ├── ear.js │ ├── face.js │ ├── globalStyles.js │ ├── hand.js │ ├── jss.js │ ├── keyframes.js │ ├── leg.js │ ├── lowerBody.js │ ├── scene.js │ ├── tail.js │ ├── theme.js │ ├── upperBody.js │ └── yarn.js ├── flow-typed ├── css.js └── mocha.js ├── karma.conf.js ├── lerna.json ├── package.json ├── packages ├── css-jss │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── createCss.js │ │ ├── createCss.js.flow │ │ ├── createCss.test.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ ├── index.test.js │ │ └── types.js.flow ├── jss-plugin-cache │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ └── index.test.js ├── jss-plugin-camel-case │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ └── index.test.js ├── jss-plugin-compose │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ └── index.test.js ├── jss-plugin-default-unit │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── defaultUnits.js │ │ ├── defaultUnits.js.flow │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ └── index.test.js ├── jss-plugin-expand │ ├── .size-snapshot.json │ ├── LICENSE │ ├── benchmark │ │ ├── fixtures │ │ │ ├── arrays-with-plugin.json │ │ │ ├── arrays-without-plugin.json │ │ │ ├── bootstrap.json │ │ │ ├── sheet-with-plugin.json │ │ │ └── sheet-without-plugin.json │ │ └── integration │ │ │ ├── arrays.js │ │ │ ├── bootstrap.js │ │ │ └── sheet.js │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ ├── index.test.js │ │ └── props.js ├── jss-plugin-extend │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ └── index.test.js ├── jss-plugin-global │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ └── index.test.js ├── jss-plugin-isolate │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ └── index.test.js ├── jss-plugin-nested │ ├── .size-snapshot.json │ ├── LICENSE │ ├── benchmark │ │ ├── fixtures │ │ │ └── modified-bootstrap.json │ │ └── tests │ │ │ ├── bootstrap.js │ │ │ └── deep-nesting.js │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ └── index.test.js ├── jss-plugin-props-sort │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ └── index.test.js ├── jss-plugin-rule-value-function │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── function-rules.test.js │ │ ├── function-values.test.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ ├── index.test.js │ │ ├── plugin-compose.test.js │ │ ├── plugin-expand.test.js │ │ ├── plugin-global.test.js │ │ └── plugin-nested.test.js ├── jss-plugin-rule-value-observable │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ ├── index.test.js │ │ ├── observable-rules.test.js │ │ └── observable-values.test.js ├── jss-plugin-template │ ├── .size-snapshot.json │ ├── LICENSE │ ├── benchmark │ │ └── tests │ │ │ ├── createSheet.js │ │ │ └── parse.js │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ ├── index.test.js │ │ └── parse.js ├── jss-plugin-vendor-prefixer │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ └── index.test.js ├── jss-preset-default │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ ├── index.d.ts │ │ ├── index.js │ │ └── index.js.flow ├── jss-starter-kit │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ └── src │ │ └── index.js ├── jss │ ├── .size-snapshot.json │ ├── LICENSE │ ├── benchmark │ │ ├── fixtures │ │ │ ├── bootstrap.json │ │ │ ├── conditional.json │ │ │ └── regular.json │ │ └── tests │ │ │ ├── add-rule.js │ │ │ ├── batching.js │ │ │ ├── bootstrap.js │ │ │ ├── cloning.js │ │ │ ├── conditional-regular.js │ │ │ ├── create-instance.js │ │ │ ├── is-object.js │ │ │ ├── linked-sheet.js │ │ │ ├── render-rule.js │ │ │ ├── to-css-value.js │ │ │ └── update.js │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── DomRenderer.js │ │ ├── Jss.js │ │ ├── Jss.js.flow │ │ ├── PluginsRegistry.js │ │ ├── PluginsRegistry.js.flow │ │ ├── RuleList.js │ │ ├── RuleList.js.flow │ │ ├── SheetsManager.js │ │ ├── SheetsManager.js.flow │ │ ├── SheetsRegistry.js │ │ ├── SheetsRegistry.js.flow │ │ ├── StyleSheet.js │ │ ├── StyleSheet.js.flow │ │ ├── flow-types │ │ │ ├── cssom.js │ │ │ ├── dom.js │ │ │ ├── index.js │ │ │ └── jss.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.flow │ │ ├── plugins │ │ │ ├── conditionalRule.js │ │ │ ├── conditionalRule.js.flow │ │ │ ├── fontFaceRule.js │ │ │ ├── fontFaceRule.js.flow │ │ │ ├── index.js │ │ │ ├── index.js.flow │ │ │ ├── keyframeRule.js │ │ │ ├── keyframeRule.js.flow │ │ │ ├── keyframesRule.js │ │ │ ├── keyframesRule.js.flow │ │ │ ├── simpleRule.js │ │ │ ├── simpleRule.js.flow │ │ │ ├── styleRule.js │ │ │ ├── styleRule.js.flow │ │ │ ├── viewportRule.js │ │ │ └── viewportRule.js.flow │ │ ├── sheets.js │ │ └── utils │ │ │ ├── cloneStyle.js │ │ │ ├── cloneStyle.js.flow │ │ │ ├── createGenerateId.js │ │ │ ├── createGenerateId.js.flow │ │ │ ├── createJss.js │ │ │ ├── createJss.js.flow │ │ │ ├── createRule.js │ │ │ ├── createRule.js.flow │ │ │ ├── escape.js │ │ │ ├── escape.js.flow │ │ │ ├── getDynamicStyles.js │ │ │ ├── getDynamicStyles.js.flow │ │ │ ├── getWhitespaceSymbols.js │ │ │ ├── globalThis.js │ │ │ ├── hasCSSTOMSupport.js │ │ │ ├── hasCSSTOMSupport.js.flow │ │ │ ├── moduleId.js │ │ │ ├── moduleId.js.flow │ │ │ ├── toCss.js │ │ │ ├── toCss.js.flow │ │ │ ├── toCssValue.js │ │ │ └── toCssValue.js.flow │ └── tests │ │ ├── functional │ │ ├── houdini.js │ │ ├── priority.js │ │ ├── rules.js │ │ └── sheet.js │ │ ├── integration │ │ ├── houdini.js │ │ ├── plugins.js │ │ ├── rules.js │ │ ├── sheet.js │ │ └── sheetsRegistry.js │ │ ├── jss-tests.ts │ │ ├── types │ │ └── Styles.ts │ │ └── unit │ │ ├── Jss.js │ │ ├── SheetsManager.js │ │ ├── cloneStyle.js │ │ ├── createGenerateId.js │ │ ├── escape.js │ │ ├── getDynamicStyles.js │ │ └── plugins.js └── react-jss │ ├── .size-snapshot.json │ ├── LICENSE │ ├── package.json │ ├── readme.md │ ├── src │ ├── JssContext.js │ ├── JssContext.js.flow │ ├── JssProvider.js │ ├── JssProvider.js.flow │ ├── JssProvider.test.js │ ├── createUseStyles.js │ ├── createUseStyles.js.flow │ ├── createUseStyles.test.js │ ├── flow-types.js │ ├── getDisplayName.js │ ├── getDisplayName.js.flow │ ├── index.d.ts │ ├── index.js │ ├── index.js.flow │ ├── index.test.js │ ├── index.test.tsx │ ├── jss.js │ ├── jss.js.flow │ ├── jsx.js │ ├── jsx.js.flow │ ├── jsx.test.js │ ├── styled-props-filter.test.js │ ├── styled.js │ ├── styled.js.flow │ ├── styled.test.js │ ├── utils │ │ ├── getSheetClasses.js │ │ ├── getSheetClasses.js.flow │ │ ├── getSheetIndex.js │ │ ├── getSheetIndex.js.flow │ │ ├── managers.js │ │ ├── managers.js.flow │ │ ├── memoizeOne.js │ │ ├── memoizeOne.js.flow │ │ ├── mergeClasses.js │ │ ├── mergeClasses.js.flow │ │ ├── mergeClasses.test.js │ │ ├── sheets.js │ │ ├── sheets.js.flow │ │ ├── sheetsMeta.js │ │ └── sheetsMeta.js.flow │ ├── withStyles.js │ ├── withStyles.js.flow │ └── withStyles.test.js │ ├── test-utils │ ├── createCommonBaseTests.js │ └── createCommonDynamicStylesTests.js │ └── tests │ ├── dynamicStyles.js │ ├── styledSystem.js │ ├── types │ ├── createUseStyles.ts │ ├── docs.tsx │ └── withStyles.tsx │ ├── useStylesTheming.js │ └── withStylesTheming.js ├── polyfills.js ├── readme.md ├── rollup.config.js ├── scripts ├── add-git-files.js ├── build.js ├── constants.js ├── create-github-release.js ├── create-readme.js ├── get-package-json.js ├── match-snapshot.js └── update-changelog.js ├── sponsors.md ├── tests ├── setup.js └── utils.js ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.bithoundrc: -------------------------------------------------------------------------------- 1 | { 2 | "ignore": [ 3 | "benchmark/**", 4 | "docs/**", 5 | "dist/**", 6 | "test/**", 7 | "node_modules/**" 8 | ], 9 | "tests": [ 10 | "/tests" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | flow-typed/ 2 | **/node_modules/** 3 | packages/**/dist/ 4 | examples/**/static/ 5 | *.ts 6 | *.tsx 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['jss', 'prettier', 'prettier/react'], 3 | parser: 'babel-eslint', 4 | env: { 5 | mocha: true, 6 | browser: true 7 | }, 8 | globals: { 9 | benchmark: true, 10 | __VERSION__: true, 11 | CSS: true 12 | }, 13 | overrides: [ 14 | { 15 | files: ['docs/*.md', 'docs/**/*.md'], 16 | rules: { 17 | 'no-console': 'off' 18 | } 19 | }, 20 | { 21 | files: ['examples/**/*.js'], 22 | rules: { 23 | 'import/no-unresolved': 'off', 24 | 'react/prop-types': 'off', 25 | 'no-console': 'off', 26 | 'import/extensions': 'off', 27 | 'import/prefer-default-export': 'off', 28 | 'jsx-a11y/label-has-for': 'off', 29 | 'jsx-a11y/label-has-associated-control': 'off' 30 | } 31 | } 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | [include] 4 | 5 | [libs] 6 | 7 | [options] 8 | include_warnings=true -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | package-lock.json binary 2 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @kof 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | open_collective: jss 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/---feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F680 Feature request" 3 | about: "I have a suggestion (and may want to implement it \U0001F642)!" 4 | 5 | --- 6 | 7 | __Is your feature request related to a problem? Please describe.__ 8 | 9 | __Describe the solution you'd like__ 10 | A clear and concise description of what you want to happen. 11 | 12 | __Are you willing to implement it?__ 13 | Yes/No 14 | 15 | __Managing expectations:__ 16 | 17 | Maintainers will not be implementing something they don't need, so if you want a feature, you will have to: 18 | 19 | 1. Explain the problem in a way that makes sense to everyone 20 | 2. Discuss a solution 21 | 3. Implement it 22 | 23 | You can also do the first step only and wait for someone else to work on the implementation. Anything is much better than nothing. 24 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Corresponding Issue(s): 2 | 3 | ## What Would You Like to Add/Fix? 4 | 5 | ## Todo 6 | 7 | - [ ] Add test(s) that verify the modified behavior 8 | - [ ] Add documentation if it changes public API 9 | 10 | ## Expectations on Changes 11 | 12 | 17 | 18 | ## Changelog 19 | 20 | 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log 4 | tmp 5 | *~ 6 | dist 7 | .env 8 | coverage 9 | lerna-debug.log 10 | yarn-error.log 11 | .idea 12 | .vscode 13 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 10 -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | coverage/ 3 | dist/ 4 | tmp/ 5 | *.html 6 | # npm install does it's own formatting, which can conflict with prettier 7 | package.json 8 | !packages/**/package.json -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "bracketSpacing": false, 6 | "printWidth": 100 7 | } 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '10' 4 | branches: 5 | only: 6 | - master 7 | sudo: required 8 | before_install: 9 | - npm i yarn@latest -g 10 | cache: 11 | yarn: true 12 | after_success: 13 | - bash <(curl -s https://codecov.io/bash) 14 | script: 15 | - yarn format:ci 16 | - yarn check:snapshots 17 | - yarn build 18 | - yarn check:all 19 | - yarn test 20 | env: 21 | global: 22 | secure: IaLnA8heZU8OMLiA8REbZeF1F5uXJE5XmX7L0cmtNYtHNDs+p4ufVOOGbrfZW2fDEbDpXryT3lTNsFLPPmHT0sdwH/eNeO+VNvqcJW4kHe6UReVU6fObsdEvGbX4V8V08x7V4rbJjHgERq9e8O0DDp32ykxuu1XbUlb01NEu1Qg= 23 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | lastUpdateCheck 1553377279244 6 | yarn-path ".yarn/releases/yarn-1.15.2.js" 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2014-present Oleg Isonen (Slobodskoi) & contributors 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | -------------------------------------------------------------------------------- /babelOptions.js: -------------------------------------------------------------------------------- 1 | exports.getBabelOptions = ({useESModules}) => ({ 2 | presets: [['@babel/env', {loose: true}], '@babel/react'], 3 | plugins: [ 4 | ['@babel/proposal-class-properties', {loose: true}], 5 | ['@babel/transform-runtime', {useESModules}], 6 | ['dev-expression'] 7 | ] 8 | }) 9 | -------------------------------------------------------------------------------- /docs/articles.md: -------------------------------------------------------------------------------- 1 | # A hand-picked selection of articles 2 | 3 | ## By maintainers 4 | 5 | https://medium.com/dailyjs/what-is-actually-css-in-js-f2f529a2757 6 | 7 | https://medium.com/free-code-camp/the-tradeoffs-of-css-in-js-bee5cf926fdb 8 | 9 | https://medium.com/@oleg008/template-strings-vs-objects-in-cssinjs-4028ecc420b2 10 | 11 | https://medium.com/@oleg008/inline-styles-vs-css-f8c1c926bb63 12 | 13 | ## By community 14 | 15 | https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660 16 | 17 | https://byjoeybaker.com/react-inline-styles 18 | 19 | https://medium.com/@dbow1234/component-style-b2b8be6931d3 20 | -------------------------------------------------------------------------------- /docs/environment-requirements.md: -------------------------------------------------------------------------------- 1 | ## JavaScript Environment Requirements 2 | 3 | We run our tests against a [number of real browsers](../browsers.json) including IE9, but we do NOT include polyfills we rely on in the build. It is up to the user to include polyfills depending on what environment they need to support. Here is a [full list of polyfills](../polyfills.js) you will need if you support ALL browsers JSS does. 4 | 5 | We consider adding a requirement to a new polyfill - a breaking change and it will require a major version incrementation. 6 | 7 | We recommend using [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env), which is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller! 8 | -------------------------------------------------------------------------------- /docs/examples.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | - [Documentation site](https://github.com/cssinjs/cssinjs/) 4 | - [Calendar](https://codesandbox.io/s/github/cssinjs/jss/tree/master/examples/calendar) 5 | - [Perdido Grid System](https://codesandbox.io/s/github/cssinjs/jss/tree/master/examples/perdido) 6 | - [Todo MVC](https://cssinjs.github.io/react-todomvc-jss/) 7 | - [Function values](https://codesandbox.io/s/github/cssinjs/jss/tree/master/examples/function-values) 8 | - [Bootstrap](https://codesandbox.io/s/github/cssinjs/jss/tree/master/examples/bootstrap) 9 | - [Other examples](https://github.com/cssinjs/jss/tree/master/examples) 10 | 11 | ## Let us know if you built something nice! 12 | 13 | We are always happy to add more examples or links. 14 | -------------------------------------------------------------------------------- /docs/jss-plugin-cache.md: -------------------------------------------------------------------------------- 1 | ## Enables caching JSS rules 2 | 3 | This plugin will cache JSS rules by comparing a reference from the object. 4 | 5 | It should be used as a **first** plugin, to bail out before doing any unnecessary work!!! 6 | 7 | ### Polyfills 8 | 9 | 1. This plugin is using a `WeakMap`. If you support browsers which do not support WeakMap, you will have to include a polyfill. 10 | 11 | ### Caveats 12 | 13 | 1. Don't use it if you mutate your `styles`. 14 | 15 | 1. Don't use it if you generate a huge amount of different rules. E.g., if you generate for every request or every user, different styles. The cache memory footprint will grow proportionally to the number of unique styles. 16 | 17 | 1. If your `styles` objects are not static, they won't get cached. It adds a flag to the object to identify it and reuses the virtual rule for it then. 18 | -------------------------------------------------------------------------------- /docs/jss-plugin-camel-case.md: -------------------------------------------------------------------------------- 1 | ## Camel case syntax 2 | 3 | After using this plugin, we can write CSS properties in camel case syntax. 4 | 5 | ```javascript 6 | const styles = { 7 | button: { 8 | color: 'red', 9 | fontSize: '12px' 10 | } 11 | } 12 | ``` 13 | 14 | Compiles to: 15 | 16 | ```css 17 | .button-0 { 18 | color: red; 19 | font-size: 12px; 20 | } 21 | ``` 22 | 23 | ### Demo 24 | 25 | [CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-camel-case?fontsize=14) 26 | -------------------------------------------------------------------------------- /docs/jss-plugin-props-sort.md: -------------------------------------------------------------------------------- 1 | ## Ensures style properties extend each other instead of overriding 2 | 3 | Inspired by React Native. When using this plugin, more specific properties will not be overwritten by less specific. 4 | 5 | ```javascript 6 | const styles = { 7 | container: { 8 | 'border-left': '1px solid red', 9 | border: '3px solid green' 10 | } 11 | } 12 | ``` 13 | 14 | Compiles to: 15 | 16 | ```css 17 | .container-0 { 18 | border: 3px solid green; 19 | border-left: 1px solid red; 20 | } 21 | ``` 22 | 23 | ### Demo 24 | 25 | [CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-props-sort?fontsize=14) 26 | -------------------------------------------------------------------------------- /docs/jss-plugin-template.md: -------------------------------------------------------------------------------- 1 | ## Enables string templates 2 | 3 | Allows you to use string templates to declare CSS rules. It implements a **very naive** but **very fast (~42000 ops/sec)** runtime CSS parser, with certain limitations: 4 | 5 | - Supports only rule body (no selectors) 6 | - Requires semicolon and a new line after the value (except the last line) 7 | - No nested rules support 8 | 9 | ```js 10 | const styles = { 11 | button: ` 12 | border-radius: 3px; 13 | background-color: green; 14 | color: red; 15 | margin: 20px 40px; 16 | padding: 10px; 17 | `, 18 | '@media print': { 19 | button: `color: black` 20 | }, 21 | '@keyframes id': { 22 | from: `opacity: 0`, 23 | to: `opacity: 1` 24 | } 25 | } 26 | ``` 27 | 28 | ### Demo 29 | 30 | [CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-template?fontsize=14) 31 | -------------------------------------------------------------------------------- /docs/jss-plugin-vendor-prefixer.md: -------------------------------------------------------------------------------- 1 | ## Add vendor prefixes in the browser 2 | 3 | This vendor prefixer knows which properties and values are supported in the current runtime and changes only what's required. The best thing is - you don't need to download all of them. Also, it is fast, because all checks are cached. 4 | 5 | ### Example 6 | 7 | ```javascript 8 | const styles = { 9 | container: { 10 | transform: 'translateX(100px)' 11 | } 12 | } 13 | ``` 14 | 15 | Compiles to: 16 | 17 | ```css 18 | .container-0 { 19 | transform: -webkit-translateX(100px); 20 | } 21 | ``` 22 | 23 | ### Demo 24 | 25 | [CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-vendor-prefixer?fontsize=14) 26 | -------------------------------------------------------------------------------- /docs/jss-preset-default.md: -------------------------------------------------------------------------------- 1 | ## Default preset for JSS with selected plugins 2 | 3 | Preset allows a quick setup with default settings and a [default plugins](https://github.com/cssinjs/jss/blob/master/packages/jss-preset-default/package.json#L44) so that you don't need to [setup plugins](https://github.com/cssinjs/jss/blob/master/docs/setup.md#setup-with-custom-plugins) manually. 4 | 5 | ### API 6 | 7 | `preset()` 8 | 9 | It exports a default function which accepts options. Options is a map of plugin name in camel case and plugin options as value. 10 | 11 | It returns a JSS options object, which you can pass to JSS constructor or the `setup`. 12 | 13 | ```javascript 14 | import preset from 'jss-preset-default' 15 | 16 | preset({somePlugin: {}}) 17 | ``` 18 | 19 | ### Setup global JSS instance 20 | 21 | ```javascript 22 | import jss from 'jss' 23 | import preset from 'jss-preset-default' 24 | 25 | jss.setup(preset()) 26 | ``` 27 | 28 | ### Setup custom JSS instance 29 | 30 | ```javascript 31 | import {create} from 'jss' 32 | import preset from 'jss-preset-default' 33 | 34 | const jss = create(preset()) 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/ssr.md: -------------------------------------------------------------------------------- 1 | # Server-Side Rendering 2 | 3 | 1. Render the document. 4 | 5 | The only JSS specific thing you need to know is the [Style Sheets registry](./jss-api.md#style-sheets-registry). It will allow you to get all attached sheets as a CSS string. Rendering of the document depends on the framework you use, here is an [example in react](https://github.com/cssinjs/examples/blob/gh-pages/react-ssr/src/server.js). 6 | 7 | 2. Rehydration. 8 | 9 | Once JS is loaded on the client, components initialized and your JSS styles are regenerated, it's a good time to remove server-side generated style tag to avoid side-effects, [example in react](https://github.com/cssinjs/examples/blob/gh-pages/react-ssr/src/client.js). 10 | 11 | [Here](http://cssinjs.github.io/examples/react-ssr/dist/index.html) is a live demo with react, SSR and React-JSS. 12 | -------------------------------------------------------------------------------- /examples/angular/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import angular from 'angular' 3 | 4 | // Styles 5 | const styles = { 6 | button1: { 7 | padding: '20px', 8 | background: 'blue', 9 | color: '#fff' 10 | }, 11 | button2: { 12 | padding: '10px', 13 | background: 'red' 14 | } 15 | } 16 | 17 | // Application logic. 18 | const sheet = jss.createStyleSheet(styles).attach() 19 | 20 | angular.module('myApp', []).controller('myController', $scope => { 21 | $scope.classes = sheet.classes 22 | }) 23 | -------------------------------------------------------------------------------- /examples/angular/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Angular with jss 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-angular-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "angular": "^1.7.9", 6 | "jss": "^10.0.3" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/angular5/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core' 2 | import {BrowserModule} from '@angular/platform-browser' 3 | import {AppComponent} from './app.component' 4 | 5 | import jss from 'jss' 6 | import preset from 'jss-preset-default' 7 | 8 | jss.setup(preset()) 9 | 10 | @NgModule({ 11 | imports: [BrowserModule], 12 | declarations: [AppComponent], 13 | bootstrap: [AppComponent] 14 | }) 15 | export class AppModule {} 16 | -------------------------------------------------------------------------------- /examples/angular5/app/main.ts: -------------------------------------------------------------------------------- 1 | import 'zone.js' 2 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic' 3 | import {AppModule} from './app.module' 4 | 5 | platformBrowserDynamic() 6 | .bootstrapModule(AppModule) 7 | .catch(err => { 8 | throw new Error(err) 9 | }) 10 | -------------------------------------------------------------------------------- /examples/angular5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSS Angular5 example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Loading... 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/angular5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-angular-example", 3 | "version": "1.0.0", 4 | "license": "ISC", 5 | "dependencies": { 6 | "@angular/common": "5.0.5", 7 | "@angular/compiler": "5.0.5", 8 | "@angular/core": "5.0.5", 9 | "@angular/platform-browser": "5.0.5", 10 | "@angular/platform-browser-dynamic": "5.0.5", 11 | "jss": "9.3.3", 12 | "jss-preset-default": "4.0.1", 13 | "rxjs": "6.5.4", 14 | "rxjs-compat": "6.5.4", 15 | "zone.js": "0.10.2" 16 | }, 17 | "devDependencies": { 18 | "parcel-bundler": "^1.6.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/bootstrap/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import preset from 'jss-preset-default' 3 | import bootstrap from './bootstrap' 4 | import bootstrapTheme from './bootstrap-theme' 5 | 6 | // JSS setup. 7 | jss.setup(preset()) 8 | 9 | // Application. 10 | const styles = { 11 | ...bootstrap, 12 | ...bootstrapTheme, 13 | button: { 14 | composes: 'btn btn-primary btn-lg' 15 | } 16 | } 17 | 18 | const sheet = jss.createStyleSheet(styles).attach() 19 | const classes = sheet.classes 20 | 21 | const div = document.body.appendChild(document.createElement('div')) 22 | div.innerHTML = `` 23 | -------------------------------------------------------------------------------- /examples/bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap jss example 7 | 8 | 9 | 10 | Bootstrap style definintions has been compiled using JSS cli.

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/bootstrap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-bootstrap-example", 3 | "version": "1.0.0", 4 | "license": "ISC", 5 | "dependencies": { 6 | "jss": "^10.0.3", 7 | "jss-preset-default": "^10.0.3" 8 | }, 9 | "devDependencies": { 10 | "parcel-bundler": "^1.6.1" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/calendar/components/calendar/style.js: -------------------------------------------------------------------------------- 1 | import conf from '../conf' 2 | 3 | export default { 4 | calendar: { 5 | display: 'flex', 6 | fontSize: conf.fontSize, 7 | color: '#686868' 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/calendar/components/canvas/style.js: -------------------------------------------------------------------------------- 1 | import conf from '../conf' 2 | 3 | export default { 4 | canvas: { 5 | flex: 1, 6 | position: 'relative', 7 | height: conf.height, 8 | background: '#ececec', 9 | borderLeft: '1px solid #d5d5d5', 10 | boxSizing: 'border-box' 11 | }, 12 | content: { 13 | position: 'absolute', 14 | left: 10, 15 | right: 10, 16 | top: 0, 17 | bottom: 0 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/calendar/components/conf/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configuration shared between all components. 3 | * 4 | * @type {Object} 5 | */ 6 | export default { 7 | fontSize: 16, 8 | height: 720, 9 | timeline: { 10 | start: 540, 11 | end: 1290 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/calendar/components/event/content-tpl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Returns compiled html for event content. 3 | * 4 | * @param {Object} data 5 | * @return {String} 6 | */ 7 | export function compile(data) { 8 | const {classes} = data 9 | return ` 10 |
11 |

${data.title}

12 |
${data.location}
13 |
14 | ` 15 | } 16 | -------------------------------------------------------------------------------- /examples/calendar/components/event/style.js: -------------------------------------------------------------------------------- 1 | export default { 2 | event: { 3 | position: 'absolute', 4 | background: '#fff', 5 | borderLeft: '4px solid #4b6ea8', 6 | boxSizing: 'border-box' 7 | }, 8 | content: { 9 | padding: 7, 10 | overflow: 'hidden', 11 | height: '100%', 12 | border: '1px solid #d5d5d5', 13 | borderLeft: 'none', 14 | boxSizing: 'border-box', 15 | cursor: 'pointer', 16 | '&:hover': { 17 | borderColor: '#4b6ea8' 18 | } 19 | }, 20 | title: { 21 | color: '#4b6ea8', 22 | margin: 0, 23 | fontSize: '1em' 24 | }, 25 | location: { 26 | fontSize: '0.8em' 27 | }, 28 | '@media (max-width: 600px)': { 29 | event: { 30 | borderColor: 'green' 31 | }, 32 | content: { 33 | '&:hover': { 34 | borderColor: 'green' 35 | } 36 | }, 37 | title: { 38 | color: 'green' 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /examples/calendar/components/events-manager/index.js: -------------------------------------------------------------------------------- 1 | import Event from '../event' 2 | import distribute from './distribute' 3 | 4 | /** 5 | * Handles events creation and distribution. 6 | */ 7 | export default class EventsManager { 8 | constructor(canvas) { 9 | this.canvas = canvas 10 | this.events = [] 11 | } 12 | 13 | /** 14 | * Destroy previously rendered events. 15 | * 16 | * @return {EventsManager} 17 | */ 18 | destroy() { 19 | this.events.forEach(event => event.destroy()) 20 | return this 21 | } 22 | 23 | /** 24 | * Render events at the right position and the right size. 25 | * 26 | * @param {Array} events 27 | * @return {EventsManager} 28 | */ 29 | set(events) { 30 | this.events = events.map(options => new Event(options)) 31 | return this 32 | } 33 | 34 | /** 35 | * Render events at the right position and the right size. 36 | * 37 | * @return {EventsManager} 38 | */ 39 | render() { 40 | distribute(this.events, this.canvas).forEach(event => { 41 | event.create() 42 | this.canvas.add(event) 43 | }) 44 | return this 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /examples/calendar/components/jss.js: -------------------------------------------------------------------------------- 1 | // Setup jss plugins. 2 | import {create} from 'jss' 3 | import extend from 'jss-plugin-extend' 4 | import nested from 'jss-plugin-nested' 5 | import camelCase from 'jss-plugin-camel-case' 6 | import defaultUnit from 'jss-plugin-default-unit' 7 | import vendorPrefixer from 'jss-plugin-vendor-prefixer' 8 | 9 | const jss = create() 10 | 11 | jss.use(extend()) 12 | jss.use(nested()) 13 | jss.use(camelCase()) 14 | jss.use(defaultUnit()) 15 | jss.use(vendorPrefixer()) 16 | 17 | export default jss 18 | -------------------------------------------------------------------------------- /examples/calendar/components/timeline/marker-tpl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Returns compiled template. Some template engine should be used in production 3 | * use case. 4 | * 5 | * @param {Object} data 6 | * @return {String} 7 | */ 8 | export function compile(data) { 9 | const {classes} = data 10 | const timeClass = classes[data.suffix ? 'timeWithSuffix' : 'time'] 11 | let html = `${data.time}` 12 | if (data.suffix) { 13 | html += `${data.suffix}` 14 | } 15 | return html 16 | } 17 | -------------------------------------------------------------------------------- /examples/calendar/components/timeline/style.js: -------------------------------------------------------------------------------- 1 | import conf from '../conf' 2 | 3 | export const width = 75 4 | 5 | export const rules = { 6 | timeline: { 7 | position: 'relative', 8 | flexShrink: 0, 9 | width, 10 | height: conf.height, 11 | padding: '0 7px 0 0', 12 | boxSizing: 'border-box', 13 | // Middle of the number should be the start. 14 | marginTop: -conf.fontSize / 2 15 | }, 16 | timeContainer: { 17 | position: 'absolute', 18 | width: '100%', 19 | paddingRight: 10, 20 | textAlign: 'right', 21 | boxSizing: 'border-box', 22 | cursor: 'pointer', 23 | '&:hover span': { 24 | color: '#4b6ea8' 25 | } 26 | }, 27 | time: { 28 | fontSize: 10, 29 | color: '#999' 30 | }, 31 | timeWithSuffix: { 32 | fontSize: 13, 33 | fontWeight: 'bold', 34 | marginRight: 5 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/calendar/components/utils/index.js: -------------------------------------------------------------------------------- 1 | import conf from '../conf' 2 | 3 | /** 4 | * Create DOM node, set attributes. 5 | * 6 | * @param {String} name 7 | * @param {Object} [attrs] 8 | * @return Element 9 | */ 10 | export function createElement(name, attrs) { 11 | const element = document.createElement(name) 12 | 13 | for (const attr in attrs) { 14 | element.setAttribute(attr, attrs[attr]) 15 | } 16 | 17 | return element 18 | } 19 | 20 | const MIN_IN_DAY = 12 * 60 21 | 22 | /** 23 | * Converts minutes to Y offset in px. 24 | * 25 | * @param {Number} min 26 | * @return {Number} 27 | */ 28 | export function minToY(min) { 29 | return (conf.height * min) / MIN_IN_DAY 30 | } 31 | -------------------------------------------------------------------------------- /examples/calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Calendar 5 | 6 | 7 | 8 | This example demonstrates:
9 | - conflict free encapsulation of css within components
10 | - usage of constants for calculating styles
11 | - usage of vendor prefixer, see flex
12 | - usage of @media conditional (resize window to width < 600px)
13 | - usage of nested rules with pseudo selectors for e.g. ':hover'

14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/calendar/index.js: -------------------------------------------------------------------------------- 1 | import conf from './components/conf' 2 | import Calendar from './components/calendar' 3 | 4 | const calendar = new Calendar(conf).create() 5 | document.body.appendChild(calendar.element) 6 | calendar.renderDay([ 7 | { 8 | start: 30, 9 | end: 150 10 | }, 11 | { 12 | start: 540, 13 | end: 600 14 | }, 15 | { 16 | start: 560, 17 | end: 620 18 | }, 19 | { 20 | start: 610, 21 | end: 670 22 | } 23 | ]) 24 | -------------------------------------------------------------------------------- /examples/calendar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-calendar-example", 3 | "version": "1.0.0", 4 | "license": "ISC", 5 | "dependencies": { 6 | "jss": "^10.0.3", 7 | "jss-plugin-camel-case": "^10.0.3", 8 | "jss-plugin-default-unit": "^10.0.3", 9 | "jss-plugin-extend": "^10.0.3", 10 | "jss-plugin-nested": "^10.0.3", 11 | "jss-plugin-vendor-prefixer": "^10.0.3", 12 | "lodash": "4.17.15" 13 | }, 14 | "devDependencies": { 15 | "parcel-bundler": "^1.6.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/composition/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import componentA from './component-a-style' 3 | import componentB from './component-b-style' 4 | 5 | const sheetA = jss.createStyleSheet(componentA).attach() 6 | const sheetB = jss.createStyleSheet(componentB).attach() 7 | 8 | const tpl = document.getElementById('template').innerHTML 9 | const div = document.createElement('div') 10 | div.innerHTML = tpl 11 | .replace('{button-a}', sheetA.classes.button) 12 | .replace('{button-b}', sheetB.classes.button) 13 | document.body.appendChild(div) 14 | -------------------------------------------------------------------------------- /examples/composition/component-a-style.js: -------------------------------------------------------------------------------- 1 | export default { 2 | button: { 3 | background: 'red' 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /examples/composition/component-b-style.js: -------------------------------------------------------------------------------- 1 | export default { 2 | button: { 3 | color: 'green' 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /examples/composition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple jss example 6 | 7 | 8 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /examples/composition/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-composition-example", 3 | "version": "1.0.0", 4 | "license": "ISC", 5 | "dependencies": { 6 | "jss": "^10.0.3" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/dynamic-props/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | 3 | // Styles 4 | const styles = { 5 | box: { 6 | float: 'left', 7 | width: '50px', 8 | height: '50px', 9 | background: 'red', 10 | margin: '10px' 11 | } 12 | } 13 | 14 | // Application logic. 15 | const sheet = jss 16 | .createStyleSheet(styles, { 17 | link: true 18 | }) 19 | .attach() 20 | 21 | const section = document.querySelectorAll('section')[0] 22 | for (let i = 0; i < 100; i++) { 23 | const box = document.createElement('div') 24 | box.className = sheet.classes.box 25 | section.appendChild(box) 26 | } 27 | 28 | function setColor(e) { 29 | sheet.getRule('box').prop('background', e.target.innerHTML) 30 | } 31 | 32 | const toArray = Array.prototype.slice 33 | const buttons = toArray.call(document.querySelectorAll('button')) 34 | buttons.forEach(button => { 35 | button.addEventListener('click', setColor) 36 | }) 37 | -------------------------------------------------------------------------------- /examples/dynamic-props/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dynamic properties in jss 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/dynamic-props/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-dynamic-props-example", 3 | "version": "1.0.0", 4 | "license": "ISC", 5 | "dependencies": { 6 | "jss": "^10.0.3" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/function-values/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "stage-0" 5 | ], 6 | "plugins": [ 7 | [ 8 | "transform-runtime", 9 | { 10 | "polyfill": false, 11 | "regenerator": true 12 | } 13 | ], 14 | "transform-object-rest-spread", 15 | [ 16 | "transform-react-jsx", 17 | { 18 | "pragma": "React.createElement" 19 | } 20 | ] 21 | ], 22 | "parserOpts": {} 23 | } 24 | -------------------------------------------------------------------------------- /examples/function-values/Controls.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default ({onAdd, amount, onChangeRenderer}) => ( 4 |
5 |
6 | 14 |
15 |
16 | 17 | 20 |
21 |
22 | ) 23 | -------------------------------------------------------------------------------- /examples/function-values/JssAnimation.js: -------------------------------------------------------------------------------- 1 | import {Component} from 'react' 2 | import * as jssRenderer from './jssRenderer' 3 | 4 | export default class JssAnimation extends Component { 5 | constructor(props) { 6 | super(props) 7 | this.props.setUpdate(jssRenderer.update) 8 | } 9 | 10 | componentWillMount() { 11 | this.props.setUpdate(jssRenderer.update) 12 | jssRenderer.render(this.props.amount) 13 | } 14 | 15 | componentWillReceiveProps({amount}) { 16 | jssRenderer.render(amount) 17 | } 18 | 19 | componentWillUnmount() { 20 | jssRenderer.destroy() 21 | } 22 | 23 | render() { 24 | return null 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/function-values/ReactAnimation.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react' 2 | import reactJssRenderer from './reactJssRenderer' 3 | import reactInlineRenderer from './reactInlineRenderer' 4 | 5 | function getRenderer({renderer, amount}) { 6 | const createRenderer = renderer === 'inline' ? reactInlineRenderer : reactJssRenderer 7 | return createRenderer(amount) 8 | } 9 | 10 | export default class ReactAnimation extends Component { 11 | constructor(props) { 12 | super(props) 13 | this.props.setUpdate(this.forceUpdate.bind(this)) 14 | this.Renderer = getRenderer(props) 15 | } 16 | 17 | componentWillReceiveProps(nextProps) { 18 | this.Renderer = getRenderer(nextProps) 19 | } 20 | 21 | render() { 22 | return 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/function-values/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Function values in jss 6 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/function-values/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {render} from 'react-dom' 3 | import App from './app' 4 | 5 | render(, document.body.appendChild(document.createElement('div'))) 6 | -------------------------------------------------------------------------------- /examples/function-values/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-dynamic-props-example", 3 | "version": "1.0.0", 4 | "license": "ISC", 5 | "dependencies": { 6 | "jss": "^10.0.3", 7 | "jss-preset-default": "^10.0.3", 8 | "lodash": "^4.17.15", 9 | "react": "^16.12.0", 10 | "react-dom": "^16.12.0", 11 | "react-jss": "^10.0.3", 12 | "stats.js": "^0.17.0" 13 | }, 14 | "devDependencies": { 15 | "parcel-bundler": "^1.6.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/function-values/reactInlineRenderer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import times from 'lodash/times' 3 | import {getRandomColor, getRandomTransform} from './utils' 4 | 5 | export default amount => () => ( 6 |
7 | {times(amount, i => { 8 | const style = { 9 | position: 'absolute', 10 | width: 50, 11 | height: 50, 12 | borderRadius: '50%', 13 | transition: 'transform 500ms', 14 | background: getRandomColor(), 15 | transform: getRandomTransform() 16 | } 17 | return
18 | })} 19 |
20 | ) 21 | -------------------------------------------------------------------------------- /examples/function-values/reactJssRenderer.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react' 2 | import injectSheet from 'react-jss' 3 | import times from 'lodash/times' 4 | import {getRandomColor, getRandomTransform} from './utils' 5 | 6 | export default amount => { 7 | class JssAnimatedObjects extends Component { 8 | shouldComponentUpdate = () => false 9 | 10 | render() { 11 | const {classes} = this.props 12 | return ( 13 |
14 | {times(amount, i => ( 15 |
16 | ))} 17 |
18 | ) 19 | } 20 | } 21 | 22 | const styles = {} 23 | 24 | times(amount, i => { 25 | styles[`object${i}`] = { 26 | position: 'absolute', 27 | width: 50, 28 | height: 50, 29 | borderRadius: '50%', 30 | transition: 'transform 500ms', 31 | background: getRandomColor(), 32 | transform: getRandomTransform 33 | } 34 | }) 35 | 36 | return injectSheet(styles)(JssAnimatedObjects) 37 | } 38 | -------------------------------------------------------------------------------- /examples/function-values/utils.js: -------------------------------------------------------------------------------- 1 | import random from 'lodash/random' 2 | import Stats from 'stats.js' 3 | 4 | export const getRandomColor = () => `#${Math.floor(Math.random() * 0x1000000).toString(16)}` 5 | 6 | export const getRandomTransform = () => { 7 | const x = random(0, window.innerWidth) 8 | const y = random(0, window.innerHeight) 9 | return `translate3d(${x}px, ${y}px, 0)` 10 | } 11 | 12 | const stats = (() => { 13 | const statsInstance = new Stats() 14 | statsInstance.showPanel(0) 15 | statsInstance.dom.style.top = '80px' 16 | statsInstance.dom.style.left = '10px' 17 | document.body.appendChild(statsInstance.dom) 18 | return statsInstance 19 | })() 20 | 21 | export const tick = (() => { 22 | const delay = 100 23 | let lastTime = Date.now() 24 | 25 | return callback => { 26 | const now = Date.now() 27 | stats.begin() 28 | if (now - lastTime > delay) { 29 | callback() 30 | lastTime = now 31 | } 32 | stats.end() 33 | requestAnimationFrame(tick.bind(null, callback)) 34 | } 35 | })() 36 | -------------------------------------------------------------------------------- /examples/inline/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | 3 | // Styles 4 | const styles = { 5 | button1: { 6 | padding: '20px', 7 | background: 'blue' 8 | } 9 | } 10 | 11 | const div = document.body.appendChild(document.createElement('div')) 12 | 13 | // Application logic. 14 | div.innerHTML = ' ' 15 | 16 | const buttons = document.querySelectorAll('button') 17 | 18 | // Apply from stylesheet rule. 19 | const sheet = jss.createStyleSheet(styles) 20 | sheet.getRule('button1').applyTo(buttons[0]) 21 | 22 | // Apply a standalone rule. 23 | const button2 = jss.createRule({ 24 | padding: '20px', 25 | background: 'green' 26 | }) 27 | button2.applyTo(buttons[1]) 28 | -------------------------------------------------------------------------------- /examples/inline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Inline styles in JSS 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/inline/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-inline-example", 3 | "version": "1.0.0", 4 | "license": "ISC", 5 | "dependencies": { 6 | "jss": "^10.0.3" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/observables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Observable values in JSS 6 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/observables/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-observables-example", 3 | "version": "1.0.0", 4 | "license": "ISC", 5 | "dependencies": { 6 | "jss": "^10.0.3", 7 | "jss-preset-default": "^10.0.3", 8 | "rxjs": "^6.5.4" 9 | }, 10 | "devDependencies": { 11 | "parcel-bundler": "^1.6.1" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/perdido/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-observables-example", 3 | "version": "1.0.0", 4 | "license": "ISC", 5 | "dependencies": { 6 | "jss": "^10.0.3", 7 | "jss-preset-default": "^10.0.3", 8 | "perdido": "^2.0.1" 9 | }, 10 | "devDependencies": { 11 | "parcel-bundler": "^1.6.1" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-camel-case/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginCamelCase from 'jss-plugin-camel-case' 3 | 4 | const styles = { 5 | button: { 6 | fontSize: '50px', 7 | zIndex: 1, 8 | lineHeight: 1.2 9 | } 10 | } 11 | 12 | // JSS Setup 13 | jss.use(jssPluginCamelCase()) 14 | const {classes} = jss.createStyleSheet(styles).attach() 15 | 16 | // Application logic. 17 | const div = document.body.appendChild(document.createElement('div')) 18 | div.innerHTML = `` 19 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-camel-case/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-camel-case 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-camel-case/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-camel-case-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-camel-case": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-compose/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginCompose from 'jss-plugin-compose' 3 | 4 | const styles = { 5 | button: { 6 | composes: 'btn btn-primary', 7 | color: 'red' 8 | }, 9 | buttonActive: { 10 | composes: ['btn', 'btn-primary'], 11 | color: 'blue' 12 | }, 13 | buttonActiveDisabled: { 14 | composes: '$buttonActive', 15 | opacity: 0.5 16 | } 17 | } 18 | 19 | // JSS Setup 20 | jss.use(jssPluginCompose()) 21 | const {classes} = jss.createStyleSheet(styles).attach() 22 | 23 | // Application logic. 24 | const div = document.body.appendChild(document.createElement('div')) 25 | div.innerHTML = ` 26 | 27 | 28 | 29 | ` 30 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-compose/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-compose 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-compose/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-compose-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-compose": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-default-unit/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginDefaultUnit from 'jss-plugin-default-unit' 3 | 4 | const styles = { 5 | button: { 6 | 'font-size': 20, 7 | 'z-index': 1, 8 | 'line-height': 2 9 | } 10 | } 11 | 12 | // JSS Setup 13 | jss.use(jssPluginDefaultUnit()) 14 | const {classes} = jss.createStyleSheet(styles).attach() 15 | 16 | // Application logic. 17 | const div = document.body.appendChild(document.createElement('div')) 18 | div.innerHTML = `` 19 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-default-unit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-default-unit 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-default-unit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-default-unit-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-default-unit": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-expand/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginExpand from 'jss-plugin-expand' 3 | 4 | const styles = { 5 | button: { 6 | border: { 7 | color: 'black', 8 | width: 1, 9 | style: 'solid' 10 | } 11 | } 12 | } 13 | 14 | // JSS Setup 15 | jss.use(jssPluginExpand()) 16 | const {classes} = jss.createStyleSheet(styles).attach() 17 | 18 | // Application logic. 19 | const div = document.body.appendChild(document.createElement('div')) 20 | div.innerHTML = `` 21 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-expand/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-expand 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-expand/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-expand-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-expand": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-extend/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginExtend from 'jss-plugin-extend' 3 | 4 | const button0 = { 5 | padding: '20px', 6 | background: 'blue' 7 | } 8 | 9 | const redButton = { 10 | background: 'red' 11 | } 12 | 13 | const styles = { 14 | button0, 15 | button1: { 16 | extend: [button0, redButton], 17 | 'font-size': '20px' 18 | } 19 | } 20 | 21 | // JSS Setup 22 | jss.use(jssPluginExtend()) 23 | const {classes} = jss.createStyleSheet(styles).attach() 24 | 25 | // Application logic. 26 | const div = document.body.appendChild(document.createElement('div')) 27 | div.innerHTML = `\ 28 | \ 29 | \ 30 | ` 31 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-extend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-extend 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-extend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-extend-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-extend": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-global/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginGlobal from 'jss-plugin-global' 3 | 4 | const styles = { 5 | '@global': { 6 | body: { 7 | background: 'green' 8 | }, 9 | button: { 10 | background: 'yellow' 11 | } 12 | } 13 | } 14 | 15 | // JSS Setup 16 | jss.use(jssPluginGlobal()) 17 | jss.createStyleSheet(styles).attach() 18 | 19 | // Application logic. 20 | const div = document.body.appendChild(document.createElement('div')) 21 | div.innerHTML = `` 22 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-global/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-global 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-global/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-global-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-global": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-isolate/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginIsolate from 'jss-plugin-isolate' 3 | 4 | const styles = { 5 | button: { 6 | 'background-color': '#50ee50', 7 | color: '#fff', 8 | 'border-radius': '3px', 9 | padding: '10px 20px', 10 | 'font-family': 'sans-serif' 11 | } 12 | } 13 | 14 | // JSS Setup 15 | jss.use(jssPluginIsolate()) 16 | const {classes} = jss.createStyleSheet(styles).attach() 17 | 18 | // Application logic. 19 | const div = document.body.appendChild(document.createElement('div')) 20 | div.innerHTML = `` 21 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-isolate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-isolate 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-isolate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-isolate-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-isolate": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-nested/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginNested from 'jss-plugin-nested' 3 | 4 | const styles = { 5 | square: { 6 | float: 'left', 7 | width: '100px', 8 | height: '100px', 9 | background: 'red', 10 | '&:hover': { 11 | background: 'yellow' 12 | }, 13 | // Use whatever selector you want. 14 | '& button': { 15 | padding: '20px', 16 | background: 'blue' 17 | } 18 | } 19 | } 20 | 21 | // JSS Setup 22 | jss.use(jssPluginNested()) 23 | const {classes} = jss.createStyleSheet(styles).attach() 24 | 25 | // Application logic. 26 | const div = document.body.appendChild(document.createElement('div')) 27 | div.innerHTML = `
` 28 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-nested/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-nested 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-nested/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-nested-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-nested": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-props-sort/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginPropsSort from 'jss-plugin-props-sort' 3 | 4 | // Styles 5 | const styles = { 6 | button: { 7 | 'border-left': '3px solid red', 8 | border: '3px solid green' 9 | } 10 | } 11 | 12 | // JSS Setup 13 | jss.use(jssPluginPropsSort()) 14 | const {classes} = jss.createStyleSheet(styles).attach() 15 | 16 | // Application logic. 17 | const div = document.body.appendChild(document.createElement('div')) 18 | div.innerHTML = `` 19 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-props-sort/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-props-sort 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-props-sort/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-props-sort-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-props-sort": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-rule-value-function/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginRuleValueFunction from 'jss-plugin-rule-value-function' 3 | 4 | const styles = { 5 | button: { 6 | color: data => data.color 7 | } 8 | } 9 | 10 | // JSS Setup 11 | jss.use(jssPluginRuleValueFunction()) 12 | const sheet = jss.createStyleSheet(styles, {link: true}).attach() 13 | 14 | sheet.update({color: 'red'}) 15 | 16 | // Application logic. 17 | const div = document.body.appendChild(document.createElement('div')) 18 | div.innerHTML = `` 19 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-rule-value-function/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-rule-value-function 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-rule-value-function/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-rule-value-function-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-rule-value-function": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-rule-value-observable/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import {Observable} from 'rxjs' 3 | import jssPluginRuleValueObservable from 'jss-plugin-rule-value-observable' 4 | 5 | const styles = { 6 | button: { 7 | color: new Observable(observer => { 8 | observer.next('red') 9 | }) 10 | } 11 | } 12 | 13 | // JSS Setup 14 | jss.use(jssPluginRuleValueObservable()) 15 | const {classes} = jss.createStyleSheet(styles, {link: true}).attach() 16 | 17 | // Application logic. 18 | const div = document.body.appendChild(document.createElement('div')) 19 | div.innerHTML = `` 20 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-rule-value-observable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-rule-value-observable 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-rule-value-observable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-rule-value-observable-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-rule-value-observable": "10.1.1", 7 | "rxjs": "6.5.4" 8 | }, 9 | "devDependencies": { 10 | "parcel-bundler": "^1.6.1" 11 | } 12 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-template/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginTemplate from 'jss-plugin-template' 3 | 4 | // Styles 5 | const styles = { 6 | '@keyframes rotate': { 7 | from: `transform: rotateZ(0deg)`, 8 | to: `transform: rotateZ(360deg)` 9 | }, 10 | button: ` 11 | border-radius: 3px; 12 | background-color: green; 13 | color: red; 14 | margin: 20px 40px; 15 | padding: 10px; 16 | animation: $rotate 2s linear infinite; 17 | `, 18 | '@media print': { 19 | button: `color: black` 20 | } 21 | } 22 | 23 | // JSS Setup 24 | jss.use(jssPluginTemplate()) 25 | const {classes} = jss.createStyleSheet(styles).attach() 26 | 27 | // Application logic. 28 | const div = document.body.appendChild(document.createElement('div')) 29 | div.innerHTML = `` 30 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-template 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-template-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-template": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-vendor-prefixer/app.js: -------------------------------------------------------------------------------- 1 | import jss from 'jss' 2 | import jssPluginVendorPrefixer from 'jss-plugin-vendor-prefixer' 3 | 4 | const styles = { 5 | button: { 6 | transform: 'translateX(100px)' 7 | } 8 | } 9 | 10 | // JSS Setup 11 | jss.use(jssPluginVendorPrefixer()) 12 | const {classes} = jss.createStyleSheet(styles).attach() 13 | 14 | // Application logic. 15 | const div = document.body.appendChild(document.createElement('div')) 16 | div.innerHTML = `` 17 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-vendor-prefixer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example - jss-plugin-vendor-prefixer 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/plugins/jss-plugin-vendor-prefixer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-plugin-vendor-prefixer-example", 3 | "license": "ISC", 4 | "dependencies": { 5 | "jss": "^10.0.3", 6 | "jss-plugin-vendor-prefixer": "10.1.1" 7 | }, 8 | "devDependencies": { 9 | "parcel-bundler": "^1.6.1" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/react-ssr/client.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {render} from 'react-dom' 3 | import Button from './src/Button' 4 | 5 | render( 15 | ) 16 | } 17 | 18 | export default injectSheet(styles)(Button) 19 | -------------------------------------------------------------------------------- /examples/react-ssr/ssr.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {renderToString} from 'react-dom/server' 3 | import {JssProvider, SheetsRegistry} from 'react-jss' 4 | import Button from './src/Button' 5 | 6 | export default function render() { 7 | const sheets = new SheetsRegistry() 8 | 9 | const app = renderToString( 10 | 11 |