├── .editorconfig
├── .eslintrc.js
├── .flowconfig
├── .github
└── workflows
│ ├── assert-flow-message.yml
│ └── test.yml
├── .gitignore
├── .npmrc
├── .prettierrc.json
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── TRADEOFFS.md
├── docs
├── design.md
├── flow.md
└── v3-migration-guide.md
├── lerna.json
├── package.json
├── packages
├── babel-plugin-transform-styletron-display-name
│ ├── README.md
│ ├── package.json
│ └── src
│ │ ├── __tests__
│ │ ├── fixtures
│ │ │ ├── module-renamed
│ │ │ │ ├── input
│ │ │ │ └── output
│ │ │ ├── module-unrelated
│ │ │ │ ├── input
│ │ │ │ └── output
│ │ │ ├── module-withStyle
│ │ │ │ ├── input
│ │ │ │ └── output
│ │ │ ├── module-withStyleDeep
│ │ │ │ ├── input
│ │ │ │ └── output
│ │ │ ├── package-baseui
│ │ │ │ ├── input
│ │ │ │ └── output
│ │ │ ├── package-fusion-plugin-styletron-react
│ │ │ │ ├── input
│ │ │ │ └── output
│ │ │ ├── package-styletron-react
│ │ │ │ ├── input
│ │ │ │ └── output
│ │ │ ├── package-unrelated-ignore
│ │ │ │ ├── config.json
│ │ │ │ ├── input
│ │ │ │ └── output
│ │ │ └── package-unrelated
│ │ │ │ ├── input
│ │ │ │ └── output
│ │ └── test.node.js
│ │ └── index.js
├── devtools-extension
│ ├── devtools_page.html
│ ├── devtools_script.js
│ ├── icons
│ │ ├── 128x128.png
│ │ ├── 16x16.png
│ │ └── 48x48.png
│ ├── manifest.json
│ └── package.json
├── flow-type-tests
│ ├── __tests__
│ │ ├── assert-flow-message.node.js
│ │ ├── fixtures
│ │ │ ├── fixture-component-base.0.110.0.txt
│ │ │ ├── fixture-component-base.0.111.3.txt
│ │ │ ├── fixture-component-base.0.112.0.txt
│ │ │ ├── fixture-component-base.0.113.0.txt
│ │ │ ├── fixture-component-base.0.114.0.txt
│ │ │ ├── fixture-component-base.0.115.0.txt
│ │ │ ├── fixture-component-base.0.116.1.txt
│ │ │ ├── fixture-component-base.0.117.0.txt
│ │ │ ├── fixture-component-base.0.131.0.txt
│ │ │ ├── fixture-custom-styled.0.110.0.txt
│ │ │ ├── fixture-custom-styled.0.111.3.txt
│ │ │ ├── fixture-custom-styled.0.112.0.txt
│ │ │ ├── fixture-custom-styled.0.113.0.txt
│ │ │ ├── fixture-custom-styled.0.114.0.txt
│ │ │ ├── fixture-custom-styled.0.115.0.txt
│ │ │ ├── fixture-custom-styled.0.116.1.txt
│ │ │ ├── fixture-custom-styled.0.117.0.txt
│ │ │ ├── fixture-custom-styled.0.131.0.txt
│ │ │ ├── fixture-exact-props.0.110.0.txt
│ │ │ ├── fixture-exact-props.0.111.3.txt
│ │ │ ├── fixture-exact-props.0.112.0.txt
│ │ │ ├── fixture-exact-props.0.113.0.txt
│ │ │ ├── fixture-exact-props.0.114.0.txt
│ │ │ ├── fixture-exact-props.0.115.0.txt
│ │ │ ├── fixture-exact-props.0.116.1.txt
│ │ │ ├── fixture-exact-props.0.117.0.txt
│ │ │ ├── fixture-exact-props.0.131.0.txt
│ │ │ ├── fixture-exporting.0.110.0.txt
│ │ │ ├── fixture-exporting.0.111.3.txt
│ │ │ ├── fixture-exporting.0.112.0.txt
│ │ │ ├── fixture-exporting.0.113.0.txt
│ │ │ ├── fixture-exporting.0.114.0.txt
│ │ │ ├── fixture-exporting.0.115.0.txt
│ │ │ ├── fixture-exporting.0.116.1.txt
│ │ │ ├── fixture-exporting.0.117.0.txt
│ │ │ ├── fixture-exporting.0.131.0.txt
│ │ │ ├── fixture-importing.0.110.0.txt
│ │ │ ├── fixture-importing.0.111.3.txt
│ │ │ ├── fixture-importing.0.112.0.txt
│ │ │ ├── fixture-importing.0.113.0.txt
│ │ │ ├── fixture-importing.0.114.0.txt
│ │ │ ├── fixture-importing.0.115.0.txt
│ │ │ ├── fixture-importing.0.116.1.txt
│ │ │ ├── fixture-importing.0.117.0.txt
│ │ │ ├── fixture-importing.0.131.0.txt
│ │ │ ├── fixture-inferred-deep-composition-no-usage.0.110.0.txt
│ │ │ ├── fixture-inferred-deep-composition-no-usage.0.111.3.txt
│ │ │ ├── fixture-inferred-deep-composition-no-usage.0.112.0.txt
│ │ │ ├── fixture-inferred-deep-composition-no-usage.0.113.0.txt
│ │ │ ├── fixture-inferred-deep-composition-no-usage.0.114.0.txt
│ │ │ ├── fixture-inferred-deep-composition-no-usage.0.115.0.txt
│ │ │ ├── fixture-inferred-deep-composition-no-usage.0.116.1.txt
│ │ │ ├── fixture-inferred-deep-composition-no-usage.0.117.0.txt
│ │ │ ├── fixture-inferred-deep-composition-no-usage.0.131.0.txt
│ │ │ ├── fixture-inferred-deep-composition.0.110.0.txt
│ │ │ ├── fixture-inferred-deep-composition.0.111.3.txt
│ │ │ ├── fixture-inferred-deep-composition.0.112.0.txt
│ │ │ ├── fixture-inferred-deep-composition.0.113.0.txt
│ │ │ ├── fixture-inferred-deep-composition.0.114.0.txt
│ │ │ ├── fixture-inferred-deep-composition.0.115.0.txt
│ │ │ ├── fixture-inferred-deep-composition.0.116.1.txt
│ │ │ ├── fixture-inferred-deep-composition.0.117.0.txt
│ │ │ ├── fixture-inferred-deep-composition.0.131.0.txt
│ │ │ ├── fixture-inferred-static.0.110.0.txt
│ │ │ ├── fixture-inferred-static.0.111.3.txt
│ │ │ ├── fixture-inferred-static.0.112.0.txt
│ │ │ ├── fixture-inferred-static.0.113.0.txt
│ │ │ ├── fixture-inferred-static.0.114.0.txt
│ │ │ ├── fixture-inferred-static.0.115.0.txt
│ │ │ ├── fixture-inferred-static.0.116.1.txt
│ │ │ ├── fixture-inferred-static.0.117.0.txt
│ │ │ ├── fixture-inferred-static.0.131.0.txt
│ │ │ ├── fixture-inferred-styled.0.110.0.txt
│ │ │ ├── fixture-inferred-styled.0.111.3.txt
│ │ │ ├── fixture-inferred-styled.0.112.0.txt
│ │ │ ├── fixture-inferred-styled.0.113.0.txt
│ │ │ ├── fixture-inferred-styled.0.114.0.txt
│ │ │ ├── fixture-inferred-styled.0.115.0.txt
│ │ │ ├── fixture-inferred-styled.0.116.1.txt
│ │ │ ├── fixture-inferred-styled.0.117.0.txt
│ │ │ ├── fixture-inferred-styled.0.131.0.txt
│ │ │ ├── fixture-mixed-composition.0.110.0.txt
│ │ │ ├── fixture-mixed-composition.0.111.3.txt
│ │ │ ├── fixture-mixed-composition.0.112.0.txt
│ │ │ ├── fixture-mixed-composition.0.113.0.txt
│ │ │ ├── fixture-mixed-composition.0.114.0.txt
│ │ │ ├── fixture-mixed-composition.0.115.0.txt
│ │ │ ├── fixture-mixed-composition.0.116.1.txt
│ │ │ ├── fixture-mixed-composition.0.117.0.txt
│ │ │ ├── fixture-mixed-composition.0.131.0.txt
│ │ │ ├── fixture-null-values.0.110.0.txt
│ │ │ ├── fixture-null-values.0.111.3.txt
│ │ │ ├── fixture-null-values.0.112.0.txt
│ │ │ ├── fixture-null-values.0.113.0.txt
│ │ │ ├── fixture-null-values.0.114.0.txt
│ │ │ ├── fixture-null-values.0.115.0.txt
│ │ │ ├── fixture-null-values.0.116.1.txt
│ │ │ ├── fixture-null-values.0.117.0.txt
│ │ │ ├── fixture-null-values.0.131.0.txt
│ │ │ ├── fixture-styled-from-styled.0.110.0.txt
│ │ │ ├── fixture-styled-from-styled.0.111.3.txt
│ │ │ ├── fixture-styled-from-styled.0.112.0.txt
│ │ │ ├── fixture-styled-from-styled.0.113.0.txt
│ │ │ ├── fixture-styled-from-styled.0.114.0.txt
│ │ │ ├── fixture-styled-from-styled.0.115.0.txt
│ │ │ ├── fixture-styled-from-styled.0.116.1.txt
│ │ │ ├── fixture-styled-from-styled.0.117.0.txt
│ │ │ ├── fixture-styled-from-styled.0.131.0.txt
│ │ │ ├── fixture-with-wrapper-typed.0.110.0.txt
│ │ │ ├── fixture-with-wrapper-typed.0.111.3.txt
│ │ │ ├── fixture-with-wrapper-typed.0.112.0.txt
│ │ │ ├── fixture-with-wrapper-typed.0.113.0.txt
│ │ │ ├── fixture-with-wrapper-typed.0.114.0.txt
│ │ │ ├── fixture-with-wrapper-typed.0.115.0.txt
│ │ │ ├── fixture-with-wrapper-typed.0.116.1.txt
│ │ │ ├── fixture-with-wrapper-typed.0.117.0.txt
│ │ │ ├── fixture-with-wrapper-typed.0.131.0.txt
│ │ │ ├── fixture-with-wrapper.0.110.0.txt
│ │ │ ├── fixture-with-wrapper.0.111.3.txt
│ │ │ ├── fixture-with-wrapper.0.112.0.txt
│ │ │ ├── fixture-with-wrapper.0.113.0.txt
│ │ │ ├── fixture-with-wrapper.0.114.0.txt
│ │ │ ├── fixture-with-wrapper.0.115.0.txt
│ │ │ ├── fixture-with-wrapper.0.116.1.txt
│ │ │ ├── fixture-with-wrapper.0.117.0.txt
│ │ │ ├── fixture-with-wrapper.0.131.0.txt
│ │ │ ├── fixture-wrong-usage.0.110.0.txt
│ │ │ ├── fixture-wrong-usage.0.111.3.txt
│ │ │ ├── fixture-wrong-usage.0.112.0.txt
│ │ │ ├── fixture-wrong-usage.0.113.0.txt
│ │ │ ├── fixture-wrong-usage.0.114.0.txt
│ │ │ ├── fixture-wrong-usage.0.115.0.txt
│ │ │ ├── fixture-wrong-usage.0.116.1.txt
│ │ │ ├── fixture-wrong-usage.0.117.0.txt
│ │ │ ├── fixture-wrong-usage.0.131.0.txt
│ │ │ ├── scenario-opacity-string.0.110.0.txt
│ │ │ ├── scenario-opacity-string.0.111.3.txt
│ │ │ ├── scenario-opacity-string.0.112.0.txt
│ │ │ ├── scenario-opacity-string.0.113.0.txt
│ │ │ ├── scenario-opacity-string.0.114.0.txt
│ │ │ ├── scenario-opacity-string.0.115.0.txt
│ │ │ ├── scenario-opacity-string.0.116.1.txt
│ │ │ ├── scenario-opacity-string.0.117.0.txt
│ │ │ ├── scenario-opacity-string.0.131.0.txt
│ │ │ ├── scenario-unrecognized-property.0.110.0.txt
│ │ │ ├── scenario-unrecognized-property.0.111.3.txt
│ │ │ ├── scenario-unrecognized-property.0.112.0.txt
│ │ │ ├── scenario-unrecognized-property.0.113.0.txt
│ │ │ ├── scenario-unrecognized-property.0.114.0.txt
│ │ │ ├── scenario-unrecognized-property.0.115.0.txt
│ │ │ ├── scenario-unrecognized-property.0.116.1.txt
│ │ │ ├── scenario-unrecognized-property.0.117.0.txt
│ │ │ └── scenario-unrecognized-property.0.131.0.txt
│ │ └── scenarios
│ │ │ ├── opacity-string.txt
│ │ │ └── unrecognized-property.txt
│ ├── component-base.js
│ ├── custom-styled.js
│ ├── exact-props.js
│ ├── exporting.js
│ ├── importing.js
│ ├── inferred-deep-composition-no-usage.js
│ ├── inferred-deep-composition.js
│ ├── inferred-static.js
│ ├── inferred-styled.js
│ ├── mixed-composition.js
│ ├── null-values.js
│ ├── package.json
│ ├── styled-from-styled.js
│ ├── with-wrapper-typed.js
│ ├── with-wrapper.js
│ └── wrong-usage.js
├── playground
│ ├── README.md
│ ├── package.json
│ ├── pages
│ │ ├── _app.js
│ │ ├── _document.js
│ │ └── index.js
│ └── styletron.js
├── styletron-engine-atomic
│ ├── .babelrc
│ ├── README.md
│ ├── TRADEOFFS.md
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── __tests__
│ │ │ └── test.node.ts
│ │ ├── cache.ts
│ │ ├── client
│ │ │ ├── __tests__
│ │ │ │ └── client.browser.ts
│ │ │ └── client.ts
│ │ ├── css.ts
│ │ ├── dev-tool.ts
│ │ ├── hyphenate-style-name.ts
│ │ ├── index.js.flow
│ │ ├── index.ts
│ │ ├── inject-style-prefixed.ts
│ │ ├── sequential-id-generator.ts
│ │ ├── server
│ │ │ ├── __tests__
│ │ │ │ └── tests.node.ts
│ │ │ └── server.ts
│ │ ├── sort-css-media-queries.ts
│ │ ├── validate-keyframes-object.ts
│ │ └── validate-no-mixed-hand.ts
│ └── tsconfig.json
├── styletron-engine-monolithic
│ ├── .babelrc
│ ├── README.md
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── client
│ │ │ ├── __tests__
│ │ │ │ └── client.browser.ts
│ │ │ ├── client.ts
│ │ │ └── sheet.ts
│ │ ├── css.ts
│ │ ├── generate-alphabetic-name.ts
│ │ ├── hash.ts
│ │ ├── hyphenate-style-name.ts
│ │ ├── index.js.flow
│ │ ├── index.ts
│ │ ├── inject-style-prefixed.ts
│ │ ├── server
│ │ │ ├── __tests__
│ │ │ │ └── tests.node.ts
│ │ │ └── server.ts
│ │ ├── validate-keyframes-object.ts
│ │ └── validate-no-mixed-hand.ts
│ └── tsconfig.json
├── styletron-engine-snapshot
│ ├── .babelrc
│ ├── README.md
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── __tests__
│ │ │ └── index.test.ts
│ │ ├── create-render.ts
│ │ ├── index.js.flow
│ │ └── index.ts
│ └── tsconfig.json
├── styletron-react
│ ├── .babelrc
│ ├── .cuprc.js
│ ├── .eslintrc.js
│ ├── README.md
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── __tests__
│ │ │ └── tests.browser.tsx
│ │ ├── dev-tool.ts
│ │ ├── index.js.flow
│ │ ├── index.tsx
│ │ └── types.ts
│ └── tsconfig.json
├── styletron-standard
│ ├── README.md
│ ├── package.json
│ ├── src
│ │ ├── index.js.flow
│ │ ├── index.ts
│ │ └── style-types.ts
│ └── tsconfig.json
└── typescript-type-tests
│ ├── package.json
│ ├── src
│ ├── component-base.tsx
│ ├── component-override.tsx
│ ├── custom-styled.tsx
│ ├── exact-props.tsx
│ ├── exporting.tsx
│ ├── importing.tsx
│ ├── inferred-deep-composition-no-usage.tsx
│ ├── inferred-deep-composition.tsx
│ ├── inferred-static.tsx
│ ├── inferred-styled.tsx
│ ├── mixed-composition.tsx
│ ├── null-values.tsx
│ ├── styled-from-styled.tsx
│ ├── with-wrapper-typed.tsx
│ ├── with-wrapper.tsx
│ └── wrong-usage.ts
│ └── tsconfig.json
├── renovate.json
├── tsconfig.base.json
├── tsconfig.json
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
13 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: "babel-eslint",
3 | parserOptions: {
4 | ecmaVersion: 2017,
5 | jsx: true,
6 | },
7 |
8 | extends: [
9 | require.resolve("eslint-config-cup"),
10 | require.resolve("eslint-config-cup-recommended"),
11 | ],
12 |
13 | plugins: [
14 | "eslint-plugin-flowtype",
15 | "eslint-plugin-react",
16 | "eslint-plugin-prettier",
17 | ],
18 |
19 | rules: {
20 | "flowtype/define-flow-type": 1,
21 | "prettier/prettier": [
22 | "error",
23 | {},
24 | {
25 | usePrettierrc: true,
26 | },
27 | ],
28 | "no-unused-vars": ["error", {argsIgnorePattern: "^_"}],
29 | "react/jsx-uses-react": "error",
30 | "react/jsx-uses-vars": "error",
31 | },
32 | overrides: [
33 | {
34 | "files": [
35 | "**/*.ts",
36 | "**/*.tsx",
37 | ],
38 | "parser": "@typescript-eslint/parser",
39 | "parserOptions": {
40 | "sourceType": "module",
41 | },
42 | "plugins": ["@typescript-eslint"],
43 | "rules": {
44 | // should be replaced with @typescript-eslint/no-unused-vars,
45 | // but there is apparently a bug when importing type namespaces
46 | "no-unused-vars": "off",
47 | "no-dupe-class-members": "off",
48 | "@typescript-eslint/no-dupe-class-members": "error",
49 |
50 | // cup does not support typescript
51 | "cup/no-undef": "off",
52 | // todo: weird rule… should "void 0" be used instead?
53 | "no-undefined": "off",
54 | // does not work correctly for function type annotations
55 | "no-shadow": "off"
56 | }
57 | }
58 | ],
59 | };
60 |
--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 | <PROJECT_ROOT>/node_modules/documentation
3 | <PROJECT_ROOT>/node_modules/babel-eslint/node_modules/resolve/test
4 | <PROJECT_ROOT>/node_modules/resolve/test
5 | [include]
6 |
7 | [libs]
8 |
9 | [lints]
10 |
11 | [options]
12 |
13 | [strict]
14 |
--------------------------------------------------------------------------------
/.github/workflows/assert-flow-message.yml:
--------------------------------------------------------------------------------
1 | name: Assert flow message
2 |
3 | on: [pull_request, push]
4 |
5 | jobs:
6 | test:
7 | runs-on: ubuntu-latest
8 | strategy:
9 | fail-fast: false
10 | matrix:
11 | flow-version: [0.110.0, 0.111.3, 0.112.0, 0.113.0, 0.114.0, 0.115.0, 0.116.1, 0.117.0, 0.131.0]
12 | steps:
13 | - uses: actions/checkout@v2
14 | - uses: actions/setup-node@v1
15 | with:
16 | node-version: 16.x
17 | - run: yarn install
18 | - run: yarn bootstrap
19 | - run: yarn build
20 | - run: yarn add -DW flow-bin@${{ matrix.flow-version }}
21 | - run: yarn lerna run --scope flow-type-tests test
22 | - uses: actions/upload-artifact@v1
23 | if: failure()
24 | with:
25 | name: flow-error-message-fixtures
26 | path: packages/flow-type-tests/__tests__/fixtures
27 |
--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
1 | name: Test
2 |
3 | on: [pull_request, push]
4 |
5 | jobs:
6 | test:
7 | runs-on: ubuntu-latest
8 | strategy:
9 | fail-fast: false
10 | steps:
11 | - uses: actions/checkout@v2
12 | - uses: actions/setup-node@v1
13 | with:
14 | node-version: 16.x
15 | - run: yarn install
16 | - run: yarn lint
17 | - run: yarn bootstrap
18 | - run: yarn build
19 | - run: yarn run flow
20 | - run: yarn tscheck
21 | - run: yarn test
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | npm-debug.log.*
4 | htmldocs/
5 | lerna-debug.log
6 | lib/
7 | dist/
8 | dist-*/
9 | yarn-error.log
10 | .next
11 | .idea
12 | tsconfig.tsbuildinfo
13 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.yarnpkg.com
2 | _auth=
3 |
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "arrowParens": "avoid",
3 | "useTabs": false,
4 | "printWidth": 80,
5 | "tabWidth": 2,
6 | "singleQuote": false,
7 | "trailingComma": "all",
8 | "bracketSpacing": false,
9 | "jsxBracketSameLine": false,
10 | "semi": true
11 | }
12 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - 10
5 | before_install:
6 | - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.19.1
7 | - export PATH=$HOME/.yarn/bin:$PATH
8 | cache:
9 | yarn: true
10 | install: yarn install --network-concurrency 1
11 | script:
12 | - yarn lint
13 | - yarn bootstrap
14 | - yarn build
15 | - yarn tscheck
16 | - yarn run flow
17 | - yarn test
18 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 2.5.8
2 |
3 | * Update TypeScript definitions to reflect stateless functional component usage ([#124](https://github.com/rtsao/styletron/pull/124)) Thanks [@faddee](https://github.com/faddee)!
4 |
5 | ## 2.5.7
6 |
7 | * Added `styletron-preact` package
8 | * Use stateless functional component in `styled` function in `styletron-react`
9 | * Minor docs updates
10 |
11 | ## 2.5.6
12 |
13 | * Update TypeScript definitions ([#120](https://github.com/rtsao/styletron/pull/120)) Thanks [@faddee](https://github.com/faddee)!
14 |
15 | ## 2.5.5
16 |
17 | * Change prop-types package from peer to regular dependency ([#118](https://github.com/rtsao/styletron/pull/118)) Thanks [@faddee](https://github.com/faddee)!
18 |
19 | ## 2.5.4
20 |
21 | * Add prop-types package for React 15.5 compatibility ([#116](https://github.com/rtsao/styletron/pull/116)) Thanks [@jbellsey](https://github.com/jbellsey)!
22 |
23 | ## 2.5.3
24 |
25 | * Added bindings for Inferno ([#90](https://github.com/rtsao/styletron/pull/90)) Thanks [@wagerfield](https://github.com/wagerfield)!
26 |
27 | ## 2.5.2
28 |
29 | * Don't pass `innerRef` in styletron-react ([#80](https://github.com/rtsao/styletron/pull/80)) Thanks [@faddee](https://github.com/faddee)!
30 | * Improvements to TypeScript definition ([#79](https://github.com/rtsao/styletron/pull/79)) Thanks [@faddee](https://github.com/faddee)!
31 |
32 | ## 2.5.1
33 |
34 | * Improvements to TypeScript definition ([#65](https://github.com/rtsao/styletron/pull/65)) Thanks [@faddee](https://github.com/faddee)!
35 | * Fix READMEs on npm (Upstream registry fix when used by Lerna)
36 |
37 | ## 2.5.0
38 |
39 | * Allow styled to pass a className to regular components ([#64](https://github.com/rtsao/styletron/pull/64)) Thanks [@faddee](https://github.com/faddee)!
40 |
41 | ## 2.4.0
42 |
43 | * Make stylesheets optional in StyletronClient constructor ([#59](https://github.com/rtsao/styletron/pull/59)) Thanks [@Gandem](https://github.com/Gandem)!
44 | * Removed leading space from class names generated from styletron-utils ([#57](https://github.com/rtsao/styletron/pull/57)) Thanks [@mmedal](https://github.com/mmedal)!
45 |
46 | ## 2.3.0
47 |
48 | * Performance improvement via `hyphenateStyleName` memoization ([#56](https://github.com/rtsao/styletron/pull/56))
49 | * Added TypeScript definitions ([#52](https://github.com/rtsao/styletron/pull/52)) [@faddee](https://github.com/faddee)
50 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Styletron
2 |
3 | ## Getting started
4 |
5 | 1. Fork & clone the repo, then run `yarn` to install dependencies from npm.
6 |
7 | ```bash
8 | git clone git@github.com:styletron/styletron.git
9 | cd styletron
10 | yarn
11 | ```
12 |
13 | Styletron is using a monorepo setup, and picked [Lerna](https://lerna.js.org) to manage it. If you are not familiar with it, you can learn more about the [basic Lerna commands here](https://lerna.js.org/#commands).
14 |
15 | 2. To install all the dependencies of all the Styletron packages, run the following command:
16 |
17 | ```bash
18 | # it will invoke `lerna bootstrap`, but without having lerna in the global scope
19 | yarn bootstrap
20 | ```
21 |
22 | 3. To run tests in all the packages, run the following command:
23 |
24 | ```bash
25 | # it will invoke `lerna run test`, that will run the test script in all the packeges
26 | yarn test
27 | ```
28 |
29 | 4. Optionally, if you want to test out your changes in a React app, you can use the playground:
30 |
31 | ```bash
32 | yarn playground
33 | ```
34 |
35 | Once your changes are ready, send a PR against the main repository.
36 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Ryan Tsao
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [](https://github.com/styletron/styletron)
2 |
3 | 
4 |
5 | Styletron is an universal toolkit for component-oriented styling. It falls into the CSS in JS category. Styletron works great with React but can be used with other frameworks or plain JS as well.
6 |
7 | **Go to our documentation at [styletron.org](https://www.styletron.org)**!
8 |
9 | ## Usage with React
10 |
11 | ```js
12 | import { styled } from "styletron-react";
13 |
14 | // Create a styled component by passing an element name and a style object
15 | const RedAnchor = styled("a", { color: "red" });
16 | <RedAnchor href="/foo">Hello</RedAnchor>;
17 |
18 | // Or pass a function that takes props and returns a style object
19 | const Panel = styled("div", props => {
20 | return { backgroundColor: props.$alert ? "orange" : "lightblue" };
21 | });
22 | <Panel $alert>Hello</Panel>;
23 |
24 | // Do you prefer hooks?
25 | import { useStyletron } from "styletron-react";
26 | const [css] = useStyletron();
27 | <a className={css({ color: "red" })} href="/foo">
28 | Hello
29 | </a>;
30 | ```
31 |
32 | ## Getting Started
33 |
34 | Check [the documentation](https://www.styletron.org/getting-started/) to setup Styletron with Next.js, Gatsby or plain React/JS apps.
35 |
36 | [_Looking for v3.x docs?_](https://www.styletron.org/v3/) | [_v3.x to v4.x migration guide_](docs/v3-migration-guide.md)
37 |
38 | ## Design principles
39 |
40 | 1. Component-oriented
41 | - Stateless, single-element styled components as base styling primitive
42 | - Prop interfaces for conditional/dynamic styling
43 | 2. Embrace typed JavaScript
44 | - Composition of styles via (typed) JavaScript objects
45 | - No extra tooling (e.g. Webpack loaders, Babel plugins, etc.)
46 | 3. Portability and flexibility
47 | - Portability of styled components across different rendering engines (e.g. atomic CSS)
48 |
49 | See [docs/design.md](docs/design.md) for more details.
50 |
51 | ## Packages
52 |
53 | - [`styletron-engine-atomic`](packages/styletron-engine-atomic)
54 | - [`styletron-react`](packages/styletron-react)
55 | - [`styletron-standard`](packages/styletron-standard)
56 |
--------------------------------------------------------------------------------
/TRADEOFFS.md:
--------------------------------------------------------------------------------
1 | # Tradeoffs
2 |
3 | ## Style objects
4 |
5 | Styletron is fundamentally built around the concept style objects, which are a convenient means of expressing styles in JavaScript. Style objects are typically defined via a plain object literal, whose properties and values map to CSS declarations.
6 |
7 | ```js
8 | // A basic style object
9 | const style = {
10 | backgroundColor: "red",
11 | fontSize: "24px"
12 | };
13 | ```
14 |
15 | ### Style objects are plain JavaScript
16 | Style objects are plain JavaScript values.
17 |
18 | #### ✅ Benefits
19 | - Object types are well supported by type checkers such as Flow. Style composition and parameterization can be type checked!
20 | - Composition of style objects in JS is both incredibly intuitive and highly flexible
21 | - Style colocation along with JS components is easy and natural
22 | - General-purpose optimization tools such as Prepack will likely apply to styling code
23 | - No extra tooling requirements for style isolation
24 |
25 | #### ❌ Drawbacks
26 | - IDE autocomplete of style objects is likely dependent on the use of Flow (unlike static CSS files)
27 | - Styles in JS means reduced opportunity for build-time optimizations compared to more easily statically analyzable
28 | - Browser debugging tools have first-class support for CSS, but not style objects
29 | - Memory and bundle-size overhead
30 |
31 | ### Style objects lack selectors
32 |
33 | Unlike CSS, style objects inherently lack selectors; they are essentially a standalone collection of declarations.
34 |
35 | #### ✅ Benefits
36 |
37 | - Don't have to think about specificity
38 | - Portability, isolation, and encapsulation by default
39 |
40 | #### ❌ Drawbacks
41 |
42 | - Selectors may have utility in some use cases, particularly descendant combinators (i.e. `>` and `>>`)
43 |
--------------------------------------------------------------------------------
/docs/design.md:
--------------------------------------------------------------------------------
1 | # Design
2 |
3 | ## Decoupled architecture
4 |
5 | Styletron is completely un-opinionated about the shape of style objects.
6 |
7 | Styletron is made up of three key concepts:
8 |
9 | 1. Styled components
10 | 2. Drivers
11 | 3. Rendering engines
12 |
13 | ### Styled components
14 |
15 | Components are used to compose style objects, which are then passed to a driver, which yields a corresponding class name.
16 |
17 | ### Drivers
18 |
19 | Drivers are stateless functions take a particular object shape and produce engine method calls. This is the glue that enables portability of styled components across different rendering engines.
20 |
21 | ### Rendering engines
22 |
23 | Rendering engines are stateful instances that have methods that can produce side effects, such as appending styles to a style sheet.
24 |
25 | Engines are responsible for client-side rendering, SSR, and hydration.
26 |
--------------------------------------------------------------------------------
/docs/flow.md:
--------------------------------------------------------------------------------
1 | # Flow
2 |
3 | ## Required annotations for generics when exporting components
4 |
5 | As of Flow 0.85, generics are no longer inferred across module boundaries. Because Styletron relies on generics, exported styled components must have these annotations.
6 |
7 | ```diff
8 | type FooProps = {$foo: string};
9 | - export const Foo = styled("div", ({$foo}: FooProps) => ({color: $foo}));
10 | + export const Foo = styled<FooProps>("div", (props: FooProps) => ({color: $foo}));
11 |
12 | type BarProps = {$bar: string};
13 | - export const Bar = withStyle(Foo, (props: BarProps) => ({background: $bar}));
14 | + export const Bar = withStyle<typeof Foo, BarProps>(Foo, ({$bar}: BarProps) => ({background: $bar}));
15 | ```
16 |
17 | Components defined and used within a single file do not need annotations.
18 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "lerna": "2.8.0",
3 | "npmClient": "yarn",
4 | "useWorkspaces": true,
5 | "packages": ["packages/*"],
6 | "version": "independent"
7 | }
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styletron-monorepo",
3 | "private": true,
4 | "workspaces": [
5 | "packages/*"
6 | ],
7 | "scripts": {
8 | "bootstrap": "lerna bootstrap",
9 | "clean": "lerna clean",
10 | "lint": "eslint --ignore-path .gitignore --ext js,ts,tsx .",
11 | "pretest": "yarn run lint && yarn run tscheck && yarn run flow",
12 | "test": "lerna run test",
13 | "build": "lerna run build",
14 | "flow": "flow --max-warnings=0",
15 | "tscheck": "tsc -b",
16 | "publish": "tscheck && lerna publish --npm-client=npm",
17 | "playground": "lerna run --scope playground dev --stream"
18 | },
19 | "devDependencies": {
20 | "@typescript-eslint/eslint-plugin": "^5.26.0",
21 | "@typescript-eslint/parser": "^5.26.0",
22 | "babel-eslint": "^10.0.3",
23 | "eslint": "^6.3.0",
24 | "eslint-config-cup-recommended": "^2.0.2",
25 | "eslint-plugin-cup": "^2.0.1",
26 | "eslint-plugin-flowtype": "^4.3.0",
27 | "eslint-plugin-prettier": "^3.1.0",
28 | "eslint-plugin-react": "^7.14.3",
29 | "flow-bin": "0.131.0",
30 | "lerna": "^2.11.0",
31 | "prettier": "^2.6.2",
32 | "typescript": "^4.7.2"
33 | },
34 | "license": "MIT"
35 | }
36 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/README.md:
--------------------------------------------------------------------------------
1 | # babel-plugin-transform-styletron-display-name
2 |
3 | **Check our documentation at [styletron.org](https://www.styletron.org)**.
4 |
5 | > Adds displayName to styletron-react components.
6 |
7 | before
8 |
9 | ```js
10 | const Foo = styled("div", {
11 | color: "red"
12 | });
13 | const Bar = styled("div", {
14 | color: "red"
15 | });
16 | ```
17 |
18 | after
19 |
20 | ```js
21 | Foo = styled("div", {
22 | color: "red"
23 | });
24 | Foo.displayName = "Foo";
25 | Bar = styled("div", {
26 | color: "red"
27 | });
28 | Bar.displayName = "Bar";
29 | ```
30 |
31 | ## Install
32 |
33 | Using npm:
34 |
35 | ```sh
36 | npm install --save-dev babel-plugin-transform-styletron-display-name
37 | ```
38 |
39 | or using yarn:
40 |
41 | ```sh
42 | yarn add babel-plugin-transform-styletron-display-name --dev
43 | ```
44 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel-plugin-transform-styletron-display-name",
3 | "version": "1.2.0",
4 | "description": "Babel plugin to add displayName to styletron-react components",
5 | "author": "Chase Starr <chasestarr@gmail.com>",
6 | "repository": "styletron/styletron",
7 | "main": "./src/index.js",
8 | "scripts": {
9 | "test": "tape src/__tests__/test.node.js"
10 | },
11 | "files": [
12 | "src/index.js"
13 | ],
14 | "license": "MIT",
15 | "devDependencies": {
16 | "@babel/core": "^7.18.2",
17 | "tape": "^5.5.3"
18 | },
19 | "peerDependencies": {
20 | "@babel/core": "^7.0.0-0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/module-renamed/input:
--------------------------------------------------------------------------------
1 | import { styled as s } from "styletron-react";
2 | const Foo = s("div", { color: "red" });
3 | const Bar = s("div", { color: "red" });
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/module-renamed/output:
--------------------------------------------------------------------------------
1 | import { styled as s } from "styletron-react";
2 | const Foo = s("div", { color: "red" });Foo.displayName = "Foo";
3 | const Bar = s("div", { color: "red" });Bar.displayName = "Bar";
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/module-unrelated/input:
--------------------------------------------------------------------------------
1 | import { unrelated } from "styletron-react";
2 | const Foo = unrelated();
3 | const Bar = unrelated();
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/module-unrelated/output:
--------------------------------------------------------------------------------
1 | import { unrelated } from "styletron-react";
2 | const Foo = unrelated();
3 | const Bar = unrelated();
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/module-withStyle/input:
--------------------------------------------------------------------------------
1 | import { styled, withStyleDeep } from "styletron-react";
2 | const Baz = styled("div");
3 | const Foo = withStyleDeep(Baz, { background: "green" });
4 | const Bar = withStyleDeep(Baz, { background: "green" });
5 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/module-withStyle/output:
--------------------------------------------------------------------------------
1 | import { styled, withStyleDeep } from "styletron-react";
2 | const Baz = styled("div");Baz.displayName = "Baz";
3 | const Foo = withStyleDeep(Baz, { background: "green" });Foo.displayName = "Foo";
4 | const Bar = withStyleDeep(Baz, { background: "green" });Bar.displayName = "Bar";
5 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/module-withStyleDeep/input:
--------------------------------------------------------------------------------
1 | import { styled, withStyleDeep } from "styletron-react";
2 | const Baz = styled("div");
3 | const Foo = withStyleDeep(Baz, { ":hover": { background: "green" } });
4 | const Bar = withStyleDeep(Baz, { ":hover": { background: "green" } });
5 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/module-withStyleDeep/output:
--------------------------------------------------------------------------------
1 | import { styled, withStyleDeep } from "styletron-react";
2 | const Baz = styled("div");Baz.displayName = "Baz";
3 | const Foo = withStyleDeep(Baz, { ":hover": { background: "green" } });Foo.displayName = "Foo";
4 | const Bar = withStyleDeep(Baz, { ":hover": { background: "green" } });Bar.displayName = "Bar";
5 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-baseui/input:
--------------------------------------------------------------------------------
1 | import { styled } from "baseui";
2 | const Foo = styled("div", { color: "red" });
3 | const Bar = styled("div", { color: "red" });
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-baseui/output:
--------------------------------------------------------------------------------
1 | import { styled } from "baseui";
2 | const Foo = styled("div", { color: "red" });Foo.displayName = "Foo";
3 | const Bar = styled("div", { color: "red" });Bar.displayName = "Bar";
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-fusion-plugin-styletron-react/input:
--------------------------------------------------------------------------------
1 | import { styled } from "fusion-plugin-styletron-react";
2 | const Foo = styled("div", { color: "red" });
3 | const Bar = styled("div", { color: "red" });
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-fusion-plugin-styletron-react/output:
--------------------------------------------------------------------------------
1 | import { styled } from "fusion-plugin-styletron-react";
2 | const Foo = styled("div", { color: "red" });Foo.displayName = "Foo";
3 | const Bar = styled("div", { color: "red" });Bar.displayName = "Bar";
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-styletron-react/input:
--------------------------------------------------------------------------------
1 | import { styled } from "styletron-react";
2 | const Foo = styled("div", { color: "red" });
3 | const Bar = styled("div", { color: "red" });
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-styletron-react/output:
--------------------------------------------------------------------------------
1 | import { styled } from "styletron-react";
2 | const Foo = styled("div", { color: "red" });Foo.displayName = "Foo";
3 | const Bar = styled("div", { color: "red" });Bar.displayName = "Bar";
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-unrelated-ignore/config.json:
--------------------------------------------------------------------------------
1 | {"importSources": "any"}
2 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-unrelated-ignore/input:
--------------------------------------------------------------------------------
1 | import { styled } from "../style-utils.js";
2 | const Foo = styled("div", { color: "red" });
3 | const Bar = styled("div", { color: "red" });
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-unrelated-ignore/output:
--------------------------------------------------------------------------------
1 | import { styled } from "../style-utils.js";
2 | const Foo = styled("div", { color: "red" });Foo.displayName = "Foo";
3 | const Bar = styled("div", { color: "red" });Bar.displayName = "Bar";
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-unrelated/input:
--------------------------------------------------------------------------------
1 | import { styled } from "another-package";
2 | const Foo = s("div", { color: "red" });
3 | const Bar = s("div", { color: "red" });
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/fixtures/package-unrelated/output:
--------------------------------------------------------------------------------
1 | import { styled } from "another-package";
2 | const Foo = s("div", { color: "red" });
3 | const Bar = s("div", { color: "red" });
4 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/__tests__/test.node.js:
--------------------------------------------------------------------------------
1 | /* global require __dirname */
2 |
3 | const fs = require("fs");
4 | const path = require("path");
5 |
6 | const babel = require("@babel/core");
7 | const test = require("tape");
8 |
9 | const plugin = require("../");
10 |
11 | const FIXTURES_PATH = path.resolve(__dirname, "./fixtures");
12 |
13 | function readFixtureFile(fixture, name) {
14 | return fs.readFileSync(path.resolve(FIXTURES_PATH, fixture, name), "utf8");
15 | }
16 |
17 | function readFixtureConfig(fixture) {
18 | try {
19 | const raw = fs.readFileSync(
20 | path.resolve(FIXTURES_PATH, fixture, "config.json"),
21 | "utf8",
22 | );
23 | return JSON.parse(raw);
24 | } catch (error) {
25 | return {};
26 | }
27 | }
28 |
29 | function compare(fixture) {
30 | const input = readFixtureFile(fixture, "input");
31 | const output = readFixtureFile(fixture, "output");
32 | const config = readFixtureConfig(fixture);
33 | const {code} = babel.transformSync(input, {
34 | plugins: [[plugin, config]],
35 | retainLines: true,
36 | });
37 | test(fixture, t => {
38 | t.equal(code.trim(), output.trim());
39 | t.end();
40 | });
41 | }
42 |
43 | const fixtures = fs.readdirSync(FIXTURES_PATH);
44 | fixtures.forEach(compare);
45 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-styletron-display-name/src/index.js:
--------------------------------------------------------------------------------
1 | /* global module */
2 |
3 | module.exports = function (babel, opts) {
4 | const packageWhitelist =
5 | opts.importSources === "any"
6 | ? void 0
7 | : Array.isArray(opts.importSources)
8 | ? opts.importSources
9 | : ["styletron-react", "fusion-plugin-styletron-react", "baseui"];
10 |
11 | return {
12 | name: "transform-styletron-display-name",
13 | visitor: createNamedModuleVisitor(
14 | babel.types,
15 | ["styled", "withStyle", "withStyleDeep"],
16 | packageWhitelist,
17 | (t, state, refPaths) => {
18 | refPaths.forEach(path => {
19 | if (path.parentPath.type === "CallExpression") {
20 | if (path.parentPath.parentPath.type === "VariableDeclarator") {
21 | const name = path.parentPath.parentPath.node.id;
22 |
23 | path.parentPath.parentPath.parentPath.insertAfter(
24 | t.expressionStatement(
25 | t.assignmentExpression(
26 | "=",
27 | t.memberExpression(name, t.identifier("displayName")),
28 | t.stringLiteral(name.name),
29 | ),
30 | ),
31 | );
32 | }
33 | }
34 | });
35 | },
36 | ),
37 | };
38 | };
39 |
40 | function createNamedModuleVisitor(t, moduleNames, packageNames, refsHandler) {
41 | return {
42 | // Handle ES imports
43 | // import {moduleName} from 'packageName';
44 | ImportDeclaration(path, state) {
45 | const sourceName = path.get("source").node.value;
46 |
47 | // If specific package names are provided,
48 | // skip the transform if the import doesn't match
49 | if (packageNames && !packageNames.includes(sourceName)) {
50 | return;
51 | }
52 |
53 | state.importedPackageName = sourceName;
54 | path.get("specifiers").forEach(specifier => {
55 | const localPath = specifier.get("local");
56 | const localName = localPath.node.name;
57 |
58 | if (!localPath.scope.bindings[localName]) {
59 | return;
60 | }
61 |
62 | const refPaths = localPath.scope.bindings[localName].referencePaths;
63 | if (t.isImportSpecifier(specifier)) {
64 | // import {moduleName} from 'packageName';
65 | const specifierName = specifier.get("imported").node.name;
66 | if (moduleNames.includes(specifierName)) {
67 | refsHandler(t, state, refPaths, specifierName);
68 | } else if (t.isImportNamespaceSpecifier(specifier)) {
69 | // import * as pkg from 'packageName';
70 | // TODO(#5): Handle this case, or issue a warning because this may not be 100% robust
71 | }
72 | }
73 | });
74 | },
75 | };
76 | }
77 |
--------------------------------------------------------------------------------
/packages/devtools-extension/devtools_page.html:
--------------------------------------------------------------------------------
1 | <html>
2 | <body>
3 | <script src="devtools_script.js"></script>
4 | </body>
5 | </html>
6 |
--------------------------------------------------------------------------------
/packages/devtools-extension/devtools_script.js:
--------------------------------------------------------------------------------
1 | /* eslint-env browser */
2 | const {panels, inspectedWindow} = window.chrome.devtools;
3 | const elementsPanel = panels.elements;
4 |
5 | elementsPanel.createSidebarPane("Styletron", sidebar => {
6 | elementsPanel.onSelectionChanged.addListener(() => {
7 | inspectedWindow.eval(
8 | "__STYLETRON_DEVTOOLS__.getStyles($0.className)",
9 | (res, err) => {
10 | if (err && err.isError) {
11 | throw new Error(`Styletron devtools: ${err.description}`);
12 | }
13 | if (res) {
14 | sidebar.setObject(res, "Styletron Styles");
15 | } else {
16 | sidebar.setObject(null, "Not a styled element");
17 | }
18 | },
19 | );
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/devtools-extension/icons/128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/styletron/styletron/b76f4e02dd0be20b2b1a2cccb2403e271bd642d3/packages/devtools-extension/icons/128x128.png
--------------------------------------------------------------------------------
/packages/devtools-extension/icons/16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/styletron/styletron/b76f4e02dd0be20b2b1a2cccb2403e271bd642d3/packages/devtools-extension/icons/16x16.png
--------------------------------------------------------------------------------
/packages/devtools-extension/icons/48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/styletron/styletron/b76f4e02dd0be20b2b1a2cccb2403e271bd642d3/packages/devtools-extension/icons/48x48.png
--------------------------------------------------------------------------------
/packages/devtools-extension/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styletron-devtools",
3 | "version": "0.1.0",
4 | "manifest_version": 2,
5 | "description": "Inspect styletron styles",
6 | "icons": {
7 | "16": "./icons/16x16.png",
8 | "48": "./icons/48x48.png",
9 | "128": "./icons/128x128.png"
10 | },
11 | "permissions": [],
12 | "devtools_page": "devtools_page.html"
13 | }
14 |
--------------------------------------------------------------------------------
/packages/devtools-extension/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styletron-devtools",
3 | "private": true,
4 | "version": "0.0.3",
5 | "description": "Chrome devtools extension for inspecting Styletron styles",
6 | "author": "Jhey Tompkins <jhey@jhey.dev>",
7 | "repository": "styletron/styletron",
8 | "license": "MIT"
9 | }
10 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/assert-flow-message.node.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | const fs = require("fs").promises;
4 | const path = require("path");
5 | const {spawn} = require("child_process");
6 | const test = require("tape");
7 |
8 | const SOURCES = path.resolve(__dirname, "..");
9 | const FIXTURES = path.resolve(__dirname, "./fixtures");
10 | const SCENARIOS = path.resolve(__dirname, "./scenarios");
11 | const PROJECT_ROOT = path.resolve(__dirname, "../../../");
12 | const FLOW = path.resolve(PROJECT_ROOT, "node_modules/.bin/flow");
13 |
14 | function flowVersion() {
15 | return new Promise(res => {
16 | const flow = spawn(FLOW, ["version"], {cwd: PROJECT_ROOT});
17 | flow.stdout.on("data", data => {
18 | const v = String(data).split(" ").pop().trim();
19 | res(v);
20 | });
21 | });
22 | }
23 |
24 | function flowCheck(src, name) {
25 | return new Promise(async res => {
26 | const filepath = path.resolve(FIXTURES, `${name}.js`);
27 | await fs.writeFile(filepath, src);
28 |
29 | const flow = spawn(FLOW, ["focus-check", filepath], {cwd: PROJECT_ROOT});
30 | let message = "";
31 | flow.stdout.on("data", data => {
32 | message += String(data);
33 | });
34 |
35 | flow.on("close", async () => {
36 | await fs.unlink(filepath);
37 | res(message);
38 | });
39 | });
40 | }
41 |
42 | async function main() {
43 | const version = await flowVersion();
44 | const scenarios = await fs.readdir(SCENARIOS);
45 | scenarios.forEach(filename => {
46 | const [name] = filename.split(".");
47 | test(`${name}.${version}`, async t => {
48 | const raw = await fs.readFile(path.resolve(SCENARIOS, filename), "utf8");
49 | const message = await flowCheck(raw, name);
50 | const fixture = path.resolve(FIXTURES, `scenario-${name}.${version}.txt`);
51 |
52 | try {
53 | const expected = await fs.readFile(fixture, "utf8");
54 | t.equal(message, expected);
55 | t.end();
56 | } catch (error) {
57 | // eslint-disable-next-line no-console
58 | console.log(`Unable to read fixture ${fixture}. Generating fixture.`);
59 | await fs.writeFile(fixture, message);
60 | t.fail();
61 | t.end();
62 | }
63 | });
64 | });
65 |
66 | const sources = await fs.readdir(SOURCES);
67 | sources.forEach(filename => {
68 | const [name, extension] = filename.split(".");
69 | if (extension !== "js") return;
70 |
71 | test(`${name}.${version}`, async t => {
72 | const raw = await fs.readFile(path.resolve(SOURCES, filename), "utf8");
73 | const unsuppressed = raw.replace(/\/\/ \$FlowFixMe/gm, "");
74 | const message = await flowCheck(unsuppressed, name);
75 | const fixture = path.resolve(FIXTURES, `fixture-${name}.${version}.txt`);
76 |
77 | try {
78 | const expected = await fs.readFile(fixture, "utf8");
79 | t.equal(message, expected);
80 | t.end();
81 | } catch (error) {
82 | // eslint-disable-next-line no-console
83 | console.log(`Unable to read fixture ${fixture}. Generating fixture.`);
84 | await fs.writeFile(fixture, message);
85 | t.fail();
86 | t.end();
87 | }
88 | });
89 | });
90 | }
91 | main();
92 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-custom-styled.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-custom-styled.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-custom-styled.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-custom-styled.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-custom-styled.0.114.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-custom-styled.0.115.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-custom-styled.0.116.1.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-custom-styled.0.117.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-custom-styled.0.131.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-exact-props.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Error -------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
2 |
3 | Cannot create `MyStyledComponent` element because property `invalidProp` is missing in object type [1] but exists in
4 | props [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
7 | 15| <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
9 |
10 | References:
11 | packages/styletron-react/dist-node-cjs/index.js.flow:64:31
12 | 64| ): StyletronComponent<$Diff<ElementConfig<Base>, {className: any}>>,
13 | ^^^^^^^^^^^^^^^^^^^ [1]
14 |
15 |
16 |
17 | Found 1 error
18 |
19 | Only showing the most relevant union/intersection branches.
20 | To see all branches, re-run Flow with --show-all-branches
21 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-exact-props.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Error -------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
2 |
3 | Cannot create `MyStyledComponent` element because property `invalidProp` is missing in object type [1] but exists in
4 | props [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
7 | 15| <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
9 |
10 | References:
11 | packages/styletron-react/dist-node-cjs/index.js.flow:64:31
12 | 64| ): StyletronComponent<$Diff<ElementConfig<Base>, {className: any}>>,
13 | ^^^^^^^^^^^^^^^^^^^ [1]
14 |
15 |
16 |
17 | Found 1 error
18 |
19 | Only showing the most relevant union/intersection branches.
20 | To see all branches, re-run Flow with --show-all-branches
21 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-exact-props.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Error -------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
2 |
3 | Cannot create `MyStyledComponent` element because property `invalidProp` is missing in object type [1] but exists in
4 | props [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
7 | 15| <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
9 |
10 | References:
11 | packages/styletron-react/dist-node-cjs/index.js.flow:64:31
12 | 64| ): StyletronComponent<$Diff<ElementConfig<Base>, {className: any}>>,
13 | ^^^^^^^^^^^^^^^^^^^ [1]
14 |
15 |
16 |
17 | Found 1 error
18 |
19 | Only showing the most relevant union/intersection branches.
20 | To see all branches, re-run Flow with --show-all-branches
21 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-exact-props.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Error -------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
2 |
3 | Cannot create `MyStyledComponent` element because property `invalidProp` is missing in object type [1] but exists in
4 | props [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
7 | 15| <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
9 |
10 | References:
11 | packages/styletron-react/dist-node-cjs/index.js.flow:64:31
12 | 64| ): StyletronComponent<$Diff<ElementConfig<Base>, {className: any}>>,
13 | ^^^^^^^^^^^^^^^^^^^ [1]
14 |
15 |
16 |
17 | Found 1 error
18 |
19 | Only showing the most relevant union/intersection branches.
20 | To see all branches, re-run Flow with --show-all-branches
21 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-exact-props.0.114.0.txt:
--------------------------------------------------------------------------------
1 | Error -------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
2 |
3 | Cannot create `MyStyledComponent` element because property `invalidProp` is missing in object type [1] but exists in
4 | props [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
7 | 15| <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
9 |
10 | References:
11 | packages/styletron-react/dist-node-cjs/index.js.flow:64:31
12 | 64| ): StyletronComponent<$Diff<ElementConfig<Base>, {className: any}>>,
13 | ^^^^^^^^^^^^^^^^^^^ [1]
14 |
15 |
16 |
17 | Found 1 error
18 |
19 | Only showing the most relevant union/intersection branches.
20 | To see all branches, re-run Flow with --show-all-branches
21 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-exact-props.0.115.0.txt:
--------------------------------------------------------------------------------
1 | Error -------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
2 |
3 | Cannot create `MyStyledComponent` element because property `invalidProp` is missing in object type [1] but exists in
4 | props [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
7 | 15| <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
9 |
10 | References:
11 | packages/styletron-react/dist-node-cjs/index.js.flow:64:31
12 | 64| ): StyletronComponent<$Diff<ElementConfig<Base>, {className: any}>>,
13 | ^^^^^^^^^^^^^^^^^^^ [1]
14 |
15 |
16 |
17 | Found 1 error
18 |
19 | Only showing the most relevant union/intersection branches.
20 | To see all branches, re-run Flow with --show-all-branches
21 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-exact-props.0.116.1.txt:
--------------------------------------------------------------------------------
1 | Error -------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
2 |
3 | Cannot create `MyStyledComponent` element because property `invalidProp` is missing in object type [1] but exists in
4 | props [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
7 | 15| <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
9 |
10 | References:
11 | packages/styletron-react/dist-node-cjs/index.js.flow:64:31
12 | 64| ): StyletronComponent<$Diff<ElementConfig<Base>, {className: any}>>,
13 | ^^^^^^^^^^^^^^^^^^^ [1]
14 |
15 |
16 |
17 | Found 1 error
18 |
19 | Only showing the most relevant union/intersection branches.
20 | To see all branches, re-run Flow with --show-all-branches
21 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-exact-props.0.117.0.txt:
--------------------------------------------------------------------------------
1 | Error -------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
2 |
3 | Cannot create `MyStyledComponent` element because property `invalidProp` is missing in object type [1] but exists in
4 | props [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
7 | 15| <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
9 |
10 | References:
11 | packages/styletron-react/dist-node-cjs/index.js.flow:64:31
12 | 64| ): StyletronComponent<$Diff<ElementConfig<Base>, {className: any}>>,
13 | ^^^^^^^^^^^^^^^^^^^ [1]
14 |
15 |
16 |
17 | Found 1 error
18 |
19 | Only showing the most relevant union/intersection branches.
20 | To see all branches, re-run Flow with --show-all-branches
21 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-exact-props.0.131.0.txt:
--------------------------------------------------------------------------------
1 | Error -------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:2
2 |
3 | Cannot create `MyStyledComponent` element because property `invalidProp` is missing in object type [1] but exists in
4 | props [2]. [incompatible-use]
5 |
6 | packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:2
7 | 15| <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
8 | ^^^^^^^^^^^^^^^^^
9 |
10 | References:
11 | packages/styletron-react/dist-node-cjs/index.js.flow:64:31
12 | 64| ): StyletronComponent<$Diff<ElementConfig<Base>, {className: any}>>,
13 | ^^^^^^^^^^^^^^^^^^^ [1]
14 | packages/flow-type-tests/__tests__/fixtures/exact-props.js:15:1
15 | 15| <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
16 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
17 |
18 |
19 |
20 | Found 1 error
21 |
22 | Only showing the most relevant union/intersection branches.
23 | To see all branches, re-run Flow with --show-all-branches
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-importing.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/importing.js:4:34
2 |
3 | Cannot resolve module `./exporting.js`.
4 |
5 | 4| import {Foo, Bar, Baz, Qux} from "./exporting.js";
6 | ^^^^^^^^^^^^^^^^
7 |
8 |
9 |
10 | Found 1 error
11 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-importing.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/importing.js:4:34
2 |
3 | Cannot resolve module `./exporting.js`.
4 |
5 | 4| import {Foo, Bar, Baz, Qux} from "./exporting.js";
6 | ^^^^^^^^^^^^^^^^
7 |
8 |
9 |
10 | Found 1 error
11 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-importing.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/importing.js:4:34
2 |
3 | Cannot resolve module `./exporting.js`.
4 |
5 | 4| import {Foo, Bar, Baz, Qux} from "./exporting.js";
6 | ^^^^^^^^^^^^^^^^
7 |
8 |
9 |
10 | Found 1 error
11 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-importing.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/importing.js:4:34
2 |
3 | Cannot resolve module `./exporting.js`.
4 |
5 | 4| import {Foo, Bar, Baz, Qux} from "./exporting.js";
6 | ^^^^^^^^^^^^^^^^
7 |
8 |
9 |
10 | Found 1 error
11 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-importing.0.114.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/importing.js:4:34
2 |
3 | Cannot resolve module `./exporting.js`.
4 |
5 | 4| import {Foo, Bar, Baz, Qux} from "./exporting.js";
6 | ^^^^^^^^^^^^^^^^
7 |
8 |
9 |
10 | Found 1 error
11 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-importing.0.115.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/importing.js:4:34
2 |
3 | Cannot resolve module `./exporting.js`.
4 |
5 | 4| import {Foo, Bar, Baz, Qux} from "./exporting.js";
6 | ^^^^^^^^^^^^^^^^
7 |
8 |
9 |
10 | Found 1 error
11 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-importing.0.116.1.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/importing.js:4:34
2 |
3 | Cannot resolve module `./exporting.js`.
4 |
5 | 4| import {Foo, Bar, Baz, Qux} from "./exporting.js";
6 | ^^^^^^^^^^^^^^^^
7 |
8 |
9 |
10 | Found 1 error
11 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-importing.0.117.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/importing.js:4:34
2 |
3 | Cannot resolve module `./exporting.js`.
4 |
5 | 4| import {Foo, Bar, Baz, Qux} from "./exporting.js";
6 | ^^^^^^^^^^^^^^^^
7 |
8 |
9 |
10 | Found 1 error
11 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-importing.0.131.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------------- packages/flow-type-tests/__tests__/fixtures/importing.js:4:34
2 |
3 | Cannot resolve module `./exporting.js`. [cannot-resolve-module]
4 |
5 | 4| import {Foo, Bar, Baz, Qux} from "./exporting.js";
6 | ^^^^^^^^^^^^^^^^
7 |
8 |
9 |
10 | Found 1 error
11 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-static.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
2 |
3 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
6 | 23| <Bar />; // Missing bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:37
11 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
12 | ^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
16 |
17 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
20 | 26| <Bar bar="notbar" />; // Wrong bar
21 | ^^^^^^^^^^^^^^^^^^^^
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:10
25 | 26| <Bar bar="notbar" />; // Wrong bar
26 | ^^^^^^^^ [1]
27 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:43
28 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
29 | ^^^^^ [2]
30 |
31 |
32 |
33 | Found 2 errors
34 |
35 | Only showing the most relevant union/intersection branches.
36 | To see all branches, re-run Flow with --show-all-branches
37 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-static.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
2 |
3 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
6 | 23| <Bar />; // Missing bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:37
11 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
12 | ^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
16 |
17 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
20 | 26| <Bar bar="notbar" />; // Wrong bar
21 | ^^^^^^^^^^^^^^^^^^^^
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:10
25 | 26| <Bar bar="notbar" />; // Wrong bar
26 | ^^^^^^^^ [1]
27 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:43
28 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
29 | ^^^^^ [2]
30 |
31 |
32 |
33 | Found 2 errors
34 |
35 | Only showing the most relevant union/intersection branches.
36 | To see all branches, re-run Flow with --show-all-branches
37 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-static.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
2 |
3 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
6 | 23| <Bar />; // Missing bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:37
11 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
12 | ^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
16 |
17 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
20 | 26| <Bar bar="notbar" />; // Wrong bar
21 | ^^^^^^^^^^^^^^^^^^^^
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:10
25 | 26| <Bar bar="notbar" />; // Wrong bar
26 | ^^^^^^^^ [1]
27 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:43
28 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
29 | ^^^^^ [2]
30 |
31 |
32 |
33 | Found 2 errors
34 |
35 | Only showing the most relevant union/intersection branches.
36 | To see all branches, re-run Flow with --show-all-branches
37 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-static.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
2 |
3 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
6 | 23| <Bar />; // Missing bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:37
11 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
12 | ^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
16 |
17 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
20 | 26| <Bar bar="notbar" />; // Wrong bar
21 | ^^^^^^^^^^^^^^^^^^^^
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:10
25 | 26| <Bar bar="notbar" />; // Wrong bar
26 | ^^^^^^^^ [1]
27 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:43
28 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
29 | ^^^^^ [2]
30 |
31 |
32 |
33 | Found 2 errors
34 |
35 | Only showing the most relevant union/intersection branches.
36 | To see all branches, re-run Flow with --show-all-branches
37 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-static.0.114.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
2 |
3 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
6 | 23| <Bar />; // Missing bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:37
11 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
12 | ^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
16 |
17 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
20 | 26| <Bar bar="notbar" />; // Wrong bar
21 | ^^^^^^^^^^^^^^^^^^^^
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:10
25 | 26| <Bar bar="notbar" />; // Wrong bar
26 | ^^^^^^^^ [1]
27 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:43
28 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
29 | ^^^^^ [2]
30 |
31 |
32 |
33 | Found 2 errors
34 |
35 | Only showing the most relevant union/intersection branches.
36 | To see all branches, re-run Flow with --show-all-branches
37 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-static.0.115.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
2 |
3 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
6 | 23| <Bar />; // Missing bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:37
11 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
12 | ^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
16 |
17 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
20 | 26| <Bar bar="notbar" />; // Wrong bar
21 | ^^^^^^^^^^^^^^^^^^^^
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:10
25 | 26| <Bar bar="notbar" />; // Wrong bar
26 | ^^^^^^^^ [1]
27 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:43
28 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
29 | ^^^^^ [2]
30 |
31 |
32 |
33 | Found 2 errors
34 |
35 | Only showing the most relevant union/intersection branches.
36 | To see all branches, re-run Flow with --show-all-branches
37 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-static.0.116.1.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
2 |
3 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
6 | 23| <Bar />; // Missing bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:37
11 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
12 | ^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
16 |
17 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
20 | 26| <Bar bar="notbar" />; // Wrong bar
21 | ^^^^^^^^^^^^^^^^^^^^
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:10
25 | 26| <Bar bar="notbar" />; // Wrong bar
26 | ^^^^^^^^ [1]
27 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:43
28 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
29 | ^^^^^ [2]
30 |
31 |
32 |
33 | Found 2 errors
34 |
35 | Only showing the most relevant union/intersection branches.
36 | To see all branches, re-run Flow with --show-all-branches
37 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-static.0.117.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
2 |
3 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
6 | 23| <Bar />; // Missing bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:37
11 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
12 | ^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
16 |
17 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:1
20 | 26| <Bar bar="notbar" />; // Wrong bar
21 | ^^^^^^^^^^^^^^^^^^^^
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:10
25 | 26| <Bar bar="notbar" />; // Wrong bar
26 | ^^^^^^^^ [1]
27 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:43
28 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
29 | ^^^^^ [2]
30 |
31 |
32 |
33 | Found 2 errors
34 |
35 | Only showing the most relevant union/intersection branches.
36 | To see all branches, re-run Flow with --show-all-branches
37 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-static.0.131.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:2
2 |
3 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
4 | [incompatible-use]
5 |
6 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:2
7 | 23| <Bar />; // Missing bar
8 | ^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:23:1
12 | 23| <Bar />; // Missing bar
13 | ^^^^^^^ [1]
14 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:37
15 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
16 | ^^^^^^^^^^^^ [2]
17 |
18 |
19 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:2
20 |
21 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
22 | [incompatible-use]
23 |
24 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:2
25 | 26| <Bar bar="notbar" />; // Wrong bar
26 | ^^^
27 |
28 | References:
29 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:26:10
30 | 26| <Bar bar="notbar" />; // Wrong bar
31 | ^^^^^^^^ [1]
32 | packages/flow-type-tests/__tests__/fixtures/inferred-static.js:20:43
33 | 20| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
34 | ^^^^^ [2]
35 |
36 |
37 |
38 | Found 2 errors
39 |
40 | Only showing the most relevant union/intersection branches.
41 | To see all branches, re-run Flow with --show-all-branches
42 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-styled.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:13:1
2 |
3 | Cannot create `Bar` element because property `foo` is missing in props [1] but exists in props [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:13:1
6 | 13| <Bar />; // Missing foo and bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:1
11 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
12 | ^^^^^^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:15:1
16 |
17 | Cannot create `Bar` element because property `foo` is missing in props [1] but exists in props [2].
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:15:1
20 | 15| <Bar bar="bar" />; // Missing foo
21 | ^^^^^^^^^^^^^^^^^ [1]
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:1
25 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
26 | ^^^^^^^^^^^^^^^^^ [2]
27 |
28 |
29 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:17:1
30 |
31 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
32 |
33 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:17:1
34 | 17| <Bar foo="foo" />; // Missing bar
35 | ^^^^^^^^^^^^^^^^^ [1]
36 |
37 | References:
38 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:10:37
39 | 10| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
40 | ^^^^^^^^^^^^ [2]
41 |
42 |
43 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:1
44 |
45 | Cannot create `Bar` element because number [1] is incompatible with string [2] in property `foo`.
46 |
47 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:1
48 | 19| <Bar foo={12345} bar="bar" />; // Wrong foo. Note: inferred type is string instead of "foo" literal
49 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50 |
51 | References:
52 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:11
53 | 19| <Bar foo={12345} bar="bar" />; // Wrong foo. Note: inferred type is string instead of "foo" literal
54 | ^^^^^ [1]
55 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:10
56 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
57 | ^^^^^ [2]
58 |
59 |
60 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:1
61 |
62 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
63 |
64 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:1
65 | 21| <Bar foo="a string" bar="notbar" />; // Wrong bar
66 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
67 |
68 | References:
69 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:25
70 | 21| <Bar foo="a string" bar="notbar" />; // Wrong bar
71 | ^^^^^^^^ [1]
72 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:10:43
73 | 10| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
74 | ^^^^^ [2]
75 |
76 |
77 |
78 | Found 5 errors
79 |
80 | Only showing the most relevant union/intersection branches.
81 | To see all branches, re-run Flow with --show-all-branches
82 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-styled.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:13:1
2 |
3 | Cannot create `Bar` element because property `foo` is missing in props [1] but exists in props [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:13:1
6 | 13| <Bar />; // Missing foo and bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:1
11 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
12 | ^^^^^^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:15:1
16 |
17 | Cannot create `Bar` element because property `foo` is missing in props [1] but exists in props [2].
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:15:1
20 | 15| <Bar bar="bar" />; // Missing foo
21 | ^^^^^^^^^^^^^^^^^ [1]
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:1
25 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
26 | ^^^^^^^^^^^^^^^^^ [2]
27 |
28 |
29 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:17:1
30 |
31 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
32 |
33 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:17:1
34 | 17| <Bar foo="foo" />; // Missing bar
35 | ^^^^^^^^^^^^^^^^^ [1]
36 |
37 | References:
38 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:10:37
39 | 10| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
40 | ^^^^^^^^^^^^ [2]
41 |
42 |
43 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:1
44 |
45 | Cannot create `Bar` element because number [1] is incompatible with string [2] in property `foo`.
46 |
47 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:1
48 | 19| <Bar foo={12345} bar="bar" />; // Wrong foo. Note: inferred type is string instead of "foo" literal
49 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50 |
51 | References:
52 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:11
53 | 19| <Bar foo={12345} bar="bar" />; // Wrong foo. Note: inferred type is string instead of "foo" literal
54 | ^^^^^ [1]
55 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:10
56 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
57 | ^^^^^ [2]
58 |
59 |
60 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:1
61 |
62 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
63 |
64 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:1
65 | 21| <Bar foo="a string" bar="notbar" />; // Wrong bar
66 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
67 |
68 | References:
69 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:25
70 | 21| <Bar foo="a string" bar="notbar" />; // Wrong bar
71 | ^^^^^^^^ [1]
72 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:10:43
73 | 10| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
74 | ^^^^^ [2]
75 |
76 |
77 |
78 | Found 5 errors
79 |
80 | Only showing the most relevant union/intersection branches.
81 | To see all branches, re-run Flow with --show-all-branches
82 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-styled.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:13:1
2 |
3 | Cannot create `Bar` element because property `foo` is missing in props [1] but exists in props [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:13:1
6 | 13| <Bar />; // Missing foo and bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:1
11 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
12 | ^^^^^^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:15:1
16 |
17 | Cannot create `Bar` element because property `foo` is missing in props [1] but exists in props [2].
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:15:1
20 | 15| <Bar bar="bar" />; // Missing foo
21 | ^^^^^^^^^^^^^^^^^ [1]
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:1
25 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
26 | ^^^^^^^^^^^^^^^^^ [2]
27 |
28 |
29 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:17:1
30 |
31 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
32 |
33 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:17:1
34 | 17| <Bar foo="foo" />; // Missing bar
35 | ^^^^^^^^^^^^^^^^^ [1]
36 |
37 | References:
38 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:10:37
39 | 10| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
40 | ^^^^^^^^^^^^ [2]
41 |
42 |
43 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:1
44 |
45 | Cannot create `Bar` element because number [1] is incompatible with string [2] in property `foo`.
46 |
47 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:1
48 | 19| <Bar foo={12345} bar="bar" />; // Wrong foo. Note: inferred type is string instead of "foo" literal
49 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50 |
51 | References:
52 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:11
53 | 19| <Bar foo={12345} bar="bar" />; // Wrong foo. Note: inferred type is string instead of "foo" literal
54 | ^^^^^ [1]
55 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:10
56 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
57 | ^^^^^ [2]
58 |
59 |
60 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:1
61 |
62 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
63 |
64 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:1
65 | 21| <Bar foo="a string" bar="notbar" />; // Wrong bar
66 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
67 |
68 | References:
69 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:25
70 | 21| <Bar foo="a string" bar="notbar" />; // Wrong bar
71 | ^^^^^^^^ [1]
72 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:10:43
73 | 10| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
74 | ^^^^^ [2]
75 |
76 |
77 |
78 | Found 5 errors
79 |
80 | Only showing the most relevant union/intersection branches.
81 | To see all branches, re-run Flow with --show-all-branches
82 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-inferred-styled.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:13:1
2 |
3 | Cannot create `Bar` element because property `foo` is missing in props [1] but exists in props [2].
4 |
5 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:13:1
6 | 13| <Bar />; // Missing foo and bar
7 | ^^^^^^^ [1]
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:1
11 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
12 | ^^^^^^^^^^^^^^^^^ [2]
13 |
14 |
15 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:15:1
16 |
17 | Cannot create `Bar` element because property `foo` is missing in props [1] but exists in props [2].
18 |
19 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:15:1
20 | 15| <Bar bar="bar" />; // Missing foo
21 | ^^^^^^^^^^^^^^^^^ [1]
22 |
23 | References:
24 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:1
25 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
26 | ^^^^^^^^^^^^^^^^^ [2]
27 |
28 |
29 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:17:1
30 |
31 | Cannot create `Bar` element because property `bar` is missing in props [1] but exists in object type [2].
32 |
33 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:17:1
34 | 17| <Bar foo="foo" />; // Missing bar
35 | ^^^^^^^^^^^^^^^^^ [1]
36 |
37 | References:
38 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:10:37
39 | 10| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
40 | ^^^^^^^^^^^^ [2]
41 |
42 |
43 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:1
44 |
45 | Cannot create `Bar` element because number [1] is incompatible with string [2] in property `foo`.
46 |
47 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:1
48 | 19| <Bar foo={12345} bar="bar" />; // Wrong foo. Note: inferred type is string instead of "foo" literal
49 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50 |
51 | References:
52 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:19:11
53 | 19| <Bar foo={12345} bar="bar" />; // Wrong foo. Note: inferred type is string instead of "foo" literal
54 | ^^^^^ [1]
55 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:8:10
56 | 8| <Foo foo="foo" />; // Foo usage is necessary for inference
57 | ^^^^^ [2]
58 |
59 |
60 | Error ---------------------------------------------- packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:1
61 |
62 | Cannot create `Bar` element because string [1] is incompatible with string literal `bar` [2] in property `bar`.
63 |
64 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:1
65 | 21| <Bar foo="a string" bar="notbar" />; // Wrong bar
66 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
67 |
68 | References:
69 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:21:25
70 | 21| <Bar foo="a string" bar="notbar" />; // Wrong bar
71 | ^^^^^^^^ [1]
72 | packages/flow-type-tests/__tests__/fixtures/inferred-styled.js:10:43
73 | 10| const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
74 | ^^^^^ [2]
75 |
76 |
77 |
78 | Found 5 errors
79 |
80 | Only showing the most relevant union/intersection branches.
81 | To see all branches, re-run Flow with --show-all-branches
82 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-null-values.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-null-values.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-null-values.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-null-values.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-null-values.0.114.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-null-values.0.115.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-null-values.0.116.1.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-null-values.0.117.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-null-values.0.131.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-styled-from-styled.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-styled-from-styled.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-styled-from-styled.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-styled-from-styled.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-styled-from-styled.0.114.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-styled-from-styled.0.115.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-styled-from-styled.0.116.1.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-styled-from-styled.0.117.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-styled-from-styled.0.131.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-with-wrapper.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-with-wrapper.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-with-wrapper.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-with-wrapper.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-with-wrapper.0.114.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-with-wrapper.0.115.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-with-wrapper.0.116.1.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-with-wrapper.0.117.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-with-wrapper.0.131.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-wrong-usage.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-wrong-usage.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-wrong-usage.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-wrong-usage.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-wrong-usage.0.114.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-wrong-usage.0.115.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-wrong-usage.0.116.1.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-wrong-usage.0.117.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/fixture-wrong-usage.0.131.0.txt:
--------------------------------------------------------------------------------
1 | Found 0 errors
2 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-opacity-string.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Error ----------------------------------------------- packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
2 |
3 | Cannot call `styled` because a call signature declaring the expected parameter / return type is missing in object
4 | literal [1] but exists in function type [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
7 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:33
12 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
14 | packages/styletron-react/dist-node-cjs/index.js.flow:60:19
15 | 60| <Props>(string, (Props) => StyleObject): StyletronComponent<Props>,
16 | ^^^^^^^^^^^^^^^^^^^^^^ [2]
17 |
18 |
19 |
20 | Found 1 error
21 |
22 | Only showing the most relevant union/intersection branches.
23 | To see all branches, re-run Flow with --show-all-branches
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-opacity-string.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Error ----------------------------------------------- packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
2 |
3 | Cannot call `styled` because a call signature declaring the expected parameter / return type is missing in object
4 | literal [1] but exists in function type [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
7 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:33
12 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
14 | packages/styletron-react/dist-node-cjs/index.js.flow:60:19
15 | 60| <Props>(string, (Props) => StyleObject): StyletronComponent<Props>,
16 | ^^^^^^^^^^^^^^^^^^^^^^ [2]
17 |
18 |
19 |
20 | Found 1 error
21 |
22 | Only showing the most relevant union/intersection branches.
23 | To see all branches, re-run Flow with --show-all-branches
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-opacity-string.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Error ----------------------------------------------- packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
2 |
3 | Cannot call `styled` because a call signature declaring the expected parameter / return type is missing in object
4 | literal [1] but exists in function type [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
7 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:33
12 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
14 | packages/styletron-react/dist-node-cjs/index.js.flow:60:19
15 | 60| <Props>(string, (Props) => StyleObject): StyletronComponent<Props>,
16 | ^^^^^^^^^^^^^^^^^^^^^^ [2]
17 |
18 |
19 |
20 | Found 1 error
21 |
22 | Only showing the most relevant union/intersection branches.
23 | To see all branches, re-run Flow with --show-all-branches
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-opacity-string.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Error ----------------------------------------------- packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
2 |
3 | Cannot call `styled` because a call signature declaring the expected parameter / return type is missing in object
4 | literal [1] but exists in function type [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
7 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:33
12 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
14 | packages/styletron-react/dist-node-cjs/index.js.flow:60:19
15 | 60| <Props>(string, (Props) => StyleObject): StyletronComponent<Props>,
16 | ^^^^^^^^^^^^^^^^^^^^^^ [2]
17 |
18 |
19 |
20 | Found 1 error
21 |
22 | Only showing the most relevant union/intersection branches.
23 | To see all branches, re-run Flow with --show-all-branches
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-opacity-string.0.114.0.txt:
--------------------------------------------------------------------------------
1 | Error ----------------------------------------------- packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
2 |
3 | Cannot call `styled` because a call signature declaring the expected parameter / return type is missing in object
4 | literal [1] but exists in function type [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
7 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:33
12 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
14 | packages/styletron-react/dist-node-cjs/index.js.flow:60:19
15 | 60| <Props>(string, (Props) => StyleObject): StyletronComponent<Props>,
16 | ^^^^^^^^^^^^^^^^^^^^^^ [2]
17 |
18 |
19 |
20 | Found 1 error
21 |
22 | Only showing the most relevant union/intersection branches.
23 | To see all branches, re-run Flow with --show-all-branches
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-opacity-string.0.115.0.txt:
--------------------------------------------------------------------------------
1 | Error ----------------------------------------------- packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
2 |
3 | Cannot call `styled` because a call signature declaring the expected parameter / return type is missing in object
4 | literal [1] but exists in function type [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
7 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:33
12 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
14 | packages/styletron-react/dist-node-cjs/index.js.flow:60:19
15 | 60| <Props>(string, (Props) => StyleObject): StyletronComponent<Props>,
16 | ^^^^^^^^^^^^^^^^^^^^^^ [2]
17 |
18 |
19 |
20 | Found 1 error
21 |
22 | Only showing the most relevant union/intersection branches.
23 | To see all branches, re-run Flow with --show-all-branches
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-opacity-string.0.116.1.txt:
--------------------------------------------------------------------------------
1 | Error ----------------------------------------------- packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
2 |
3 | Cannot call `styled` because a call signature declaring the expected parameter / return type is missing in object
4 | literal [1] but exists in function type [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
7 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:33
12 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
14 | packages/styletron-react/dist-node-cjs/index.js.flow:60:19
15 | 60| <Props>(string, (Props) => StyleObject): StyletronComponent<Props>,
16 | ^^^^^^^^^^^^^^^^^^^^^^ [2]
17 |
18 |
19 |
20 | Found 1 error
21 |
22 | Only showing the most relevant union/intersection branches.
23 | To see all branches, re-run Flow with --show-all-branches
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-opacity-string.0.117.0.txt:
--------------------------------------------------------------------------------
1 | Error ----------------------------------------------- packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
2 |
3 | Cannot call `styled` because a call signature declaring the expected parameter / return type is missing in object
4 | literal [1] but exists in function type [2].
5 |
6 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
7 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
8 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:33
12 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
14 | packages/styletron-react/dist-node-cjs/index.js.flow:60:19
15 | 60| <Props>(string, (Props) => StyleObject): StyletronComponent<Props>,
16 | ^^^^^^^^^^^^^^^^^^^^^^ [2]
17 |
18 |
19 |
20 | Found 1 error
21 |
22 | Only showing the most relevant union/intersection branches.
23 | To see all branches, re-run Flow with --show-all-branches
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-opacity-string.0.131.0.txt:
--------------------------------------------------------------------------------
1 | Error ----------------------------------------------- packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
2 |
3 | Cannot call `styled` because a call signature declaring the expected parameter / return type is missing in object
4 | literal [1] but exists in function type [2]. [incompatible-call]
5 |
6 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:18
7 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
8 | ^^^^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/opacity-string.js:5:33
12 | 5| export const A = styled('span', {':hover': {opacity: '0.7'}});
13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
14 | packages/styletron-react/dist-node-cjs/index.js.flow:60:19
15 | 60| <Props>(string, (Props) => StyleObject): StyletronComponent<Props>,
16 | ^^^^^^^^^^^^^^^^^^^^^^ [2]
17 |
18 |
19 |
20 | Found 1 error
21 |
22 | Only showing the most relevant union/intersection branches.
23 | To see all branches, re-run Flow with --show-all-branches
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-unrecognized-property.0.110.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------- packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
2 |
3 | Cannot call `styled` because string [1] is incompatible with `$Shape` of `StyleObject` [2] in property `invalid`.
4 |
5 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
6 | 4| const Foo = styled("div", {invalid: 'property'});
7 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:37
11 | 4| const Foo = styled("div", {invalid: 'property'});
12 | ^^^^^^^^^^ [1]
13 | packages/styletron-standard/dist-node-cjs/index.js.flow:51:13
14 | 51| [string]: StyleObject, // Unrecognized properties are assumed to be media queries or pseudo selectors w/ nested style object. See: https://github.com/styletron/styletron-standard
15 | ^^^^^^^^^^^ [2]
16 |
17 |
18 |
19 | Found 1 error
20 |
21 | Only showing the most relevant union/intersection branches.
22 | To see all branches, re-run Flow with --show-all-branches
23 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-unrecognized-property.0.111.3.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------- packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
2 |
3 | Cannot call `styled` because string [1] is incompatible with `$Shape` of `StyleObject` [2] in property `invalid`.
4 |
5 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
6 | 4| const Foo = styled("div", {invalid: 'property'});
7 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:37
11 | 4| const Foo = styled("div", {invalid: 'property'});
12 | ^^^^^^^^^^ [1]
13 | packages/styletron-standard/dist-node-cjs/index.js.flow:51:13
14 | 51| [string]: StyleObject, // Unrecognized properties are assumed to be media queries or pseudo selectors w/ nested style object. See: https://github.com/styletron/styletron-standard
15 | ^^^^^^^^^^^ [2]
16 |
17 |
18 |
19 | Found 1 error
20 |
21 | Only showing the most relevant union/intersection branches.
22 | To see all branches, re-run Flow with --show-all-branches
23 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-unrecognized-property.0.112.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------- packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
2 |
3 | Cannot call `styled` because string [1] is incompatible with `$Shape` of `StyleObject` [2] in property `invalid`.
4 |
5 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
6 | 4| const Foo = styled("div", {invalid: 'property'});
7 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:37
11 | 4| const Foo = styled("div", {invalid: 'property'});
12 | ^^^^^^^^^^ [1]
13 | packages/styletron-standard/dist-node-cjs/index.js.flow:51:13
14 | 51| [string]: StyleObject, // Unrecognized properties are assumed to be media queries or pseudo selectors w/ nested style object. See: https://github.com/styletron/styletron-standard
15 | ^^^^^^^^^^^ [2]
16 |
17 |
18 |
19 | Found 1 error
20 |
21 | Only showing the most relevant union/intersection branches.
22 | To see all branches, re-run Flow with --show-all-branches
23 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-unrecognized-property.0.113.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------- packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
2 |
3 | Cannot call `styled` because string [1] is incompatible with `$Shape` of `StyleObject` [2] in property `invalid`.
4 |
5 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
6 | 4| const Foo = styled("div", {invalid: 'property'});
7 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:37
11 | 4| const Foo = styled("div", {invalid: 'property'});
12 | ^^^^^^^^^^ [1]
13 | packages/styletron-standard/dist-node-cjs/index.js.flow:51:13
14 | 51| [string]: StyleObject, // Unrecognized properties are assumed to be media queries or pseudo selectors w/ nested style object. See: https://github.com/styletron/styletron-standard
15 | ^^^^^^^^^^^ [2]
16 |
17 |
18 |
19 | Found 1 error
20 |
21 | Only showing the most relevant union/intersection branches.
22 | To see all branches, re-run Flow with --show-all-branches
23 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-unrecognized-property.0.114.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------- packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
2 |
3 | Cannot call `styled` because string [1] is incompatible with `$Shape` of `StyleObject` [2] in property `invalid`.
4 |
5 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
6 | 4| const Foo = styled("div", {invalid: 'property'});
7 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:37
11 | 4| const Foo = styled("div", {invalid: 'property'});
12 | ^^^^^^^^^^ [1]
13 | packages/styletron-standard/dist-node-cjs/index.js.flow:51:13
14 | 51| [string]: StyleObject, // Unrecognized properties are assumed to be media queries or pseudo selectors w/ nested style object. See: https://github.com/styletron/styletron-standard
15 | ^^^^^^^^^^^ [2]
16 |
17 |
18 |
19 | Found 1 error
20 |
21 | Only showing the most relevant union/intersection branches.
22 | To see all branches, re-run Flow with --show-all-branches
23 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-unrecognized-property.0.115.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------- packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
2 |
3 | Cannot call `styled` because string [1] is incompatible with `$Shape` of `StyleObject` [2] in property `invalid`.
4 |
5 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
6 | 4| const Foo = styled("div", {invalid: 'property'});
7 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:37
11 | 4| const Foo = styled("div", {invalid: 'property'});
12 | ^^^^^^^^^^ [1]
13 | packages/styletron-standard/dist-node-cjs/index.js.flow:51:13
14 | 51| [string]: StyleObject, // Unrecognized properties are assumed to be media queries or pseudo selectors w/ nested style object. See: https://github.com/styletron/styletron-standard
15 | ^^^^^^^^^^^ [2]
16 |
17 |
18 |
19 | Found 1 error
20 |
21 | Only showing the most relevant union/intersection branches.
22 | To see all branches, re-run Flow with --show-all-branches
23 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-unrecognized-property.0.116.1.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------- packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
2 |
3 | Cannot call `styled` because string [1] is incompatible with `$Shape` of `StyleObject` [2] in property `invalid`.
4 |
5 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
6 | 4| const Foo = styled("div", {invalid: 'property'});
7 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:37
11 | 4| const Foo = styled("div", {invalid: 'property'});
12 | ^^^^^^^^^^ [1]
13 | packages/styletron-standard/dist-node-cjs/index.js.flow:51:13
14 | 51| [string]: StyleObject, // Unrecognized properties are assumed to be media queries or pseudo selectors w/ nested style object. See: https://github.com/styletron/styletron-standard
15 | ^^^^^^^^^^^ [2]
16 |
17 |
18 |
19 | Found 1 error
20 |
21 | Only showing the most relevant union/intersection branches.
22 | To see all branches, re-run Flow with --show-all-branches
23 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-unrecognized-property.0.117.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------- packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
2 |
3 | Cannot call `styled` because string [1] is incompatible with `$Shape` of `StyleObject` [2] in property `invalid`.
4 |
5 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
6 | 4| const Foo = styled("div", {invalid: 'property'});
7 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 |
9 | References:
10 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:37
11 | 4| const Foo = styled("div", {invalid: 'property'});
12 | ^^^^^^^^^^ [1]
13 | packages/styletron-standard/dist-node-cjs/index.js.flow:51:13
14 | 51| [string]: StyleObject, // Unrecognized properties are assumed to be media queries or pseudo selectors w/ nested style object. See: https://github.com/styletron/styletron-standard
15 | ^^^^^^^^^^^ [2]
16 |
17 |
18 |
19 | Found 1 error
20 |
21 | Only showing the most relevant union/intersection branches.
22 | To see all branches, re-run Flow with --show-all-branches
23 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/fixtures/scenario-unrecognized-property.0.131.0.txt:
--------------------------------------------------------------------------------
1 | Error ---------------------------------------- packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
2 |
3 | Cannot call `styled` because string [1] is incompatible with `$Shape` of object type [2] in property `invalid`.
4 | [incompatible-call]
5 |
6 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:13
7 | 4| const Foo = styled("div", {invalid: 'property'});
8 | ^^^^^^
9 |
10 | References:
11 | packages/flow-type-tests/__tests__/fixtures/unrecognized-property.js:4:37
12 | 4| const Foo = styled("div", {invalid: 'property'});
13 | ^^^^^^^^^^ [1]
14 | packages/styletron-standard/dist-node-cjs/index.js.flow:49:34
15 | v
16 | 49| export type StyleObject = $Shape<{
17 | 50| ...Properties,
18 | 51| [string]: StyleObject, // Unrecognized properties are assumed to be media queries or pseudo selectors w/ nested style object. See: https://github.com/styletron/styletron-standard
19 | 52| }>;
20 | ^ [2]
21 |
22 |
23 |
24 | Found 1 error
25 |
26 | Only showing the most relevant union/intersection branches.
27 | To see all branches, re-run Flow with --show-all-branches
28 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/scenarios/opacity-string.txt:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import {styled} from 'styletron-react';
4 |
5 | export const A = styled('span', {':hover': {opacity: '0.7'}});
--------------------------------------------------------------------------------
/packages/flow-type-tests/__tests__/scenarios/unrecognized-property.txt:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import {styled} from "styletron-react";
4 | const Foo = styled("div", {invalid: 'property'});
5 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/component-base.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled, withStyle} from "styletron-react";
5 |
6 | class Foo extends React.Component<{foo: "foo"}> {}
7 |
8 | const Bar = styled(Foo, (_props: {bar: "bar"}) => ({
9 | color: "red",
10 | }));
11 |
12 | // $FlowFixMe
13 | <Bar bar="bar" />; // Missing foo
14 | // $FlowFixMe
15 | <Bar foo="notfoo" bar="bar" />; // Wrong foo
16 | // $FlowFixMe
17 | <Bar foo="foo" />; // Missing bar
18 | // $FlowFixMe
19 | <Bar foo="foo" bar="notbar" />; // Wrong bar
20 |
21 | <Bar foo="foo" bar="bar" />;
22 |
23 | const Baz = withStyle(Bar, (_props: {baz: "baz"}) => ({color: "red"}));
24 |
25 | // $FlowFixMe
26 | <Baz bar="bar" baz="baz" />; // Missing foo
27 | // $FlowFixMe
28 | <Baz foo="notfoo" bar="bar" baz="baz" />; // Wrong foo
29 | // $FlowFixMe
30 | <Baz foo="foo" baz="baz" />; // Missing bar
31 | // $FlowFixMe
32 | <Baz foo="foo" bar="notbar" baz="baz" />; // Wrong bar
33 | // $FlowFixMe
34 | <Baz foo="foo" bar="bar" />; // Missing baz
35 | // $FlowFixMe
36 | <Baz foo="foo" bar="bar" baz="notbaz" />; // Wrong baz
37 |
38 | <Baz foo="foo" bar="bar" baz="baz" />;
39 |
40 | const Qux = withStyle(Baz, (_props: {qux: "qux"}) => ({color: "red"}));
41 |
42 | // $FlowFixMe
43 | <Qux bar="bar" baz="baz" qux="qux" />; // Missing foo
44 | // $FlowFixMe
45 | <Qux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
46 | // $FlowFixMe
47 | <Qux foo="foo" baz="baz" qux="qux" />; // Missing bar
48 | // $FlowFixMe
49 | <Qux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
50 | // $FlowFixMe
51 | <Qux foo="foo" bar="bar" qux="qux" />; // Missing baz
52 | // $FlowFixMe
53 | <Qux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
54 | // $FlowFixMe
55 | <Qux foo="foo" bar="bar" baz="baz" />; // Missing qux
56 | // $FlowFixMe
57 | <Qux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
58 |
59 | <Qux foo="foo" bar="bar" baz="baz" qux="qux" />;
60 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/custom-styled.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {createStyled} from "styletron-react";
5 | import {driver, getInitialStyle} from "styletron-standard";
6 |
7 | const styled = createStyled({
8 | driver,
9 | getInitialStyle,
10 | wrapper: StyledComponent => props =>
11 | (
12 | <div>
13 | <StyledComponent {...props} />
14 | </div>
15 | ),
16 | });
17 |
18 | const Foo = styled("div", (_props: {foo: "foo"}) => ({color: "red"}));
19 |
20 | <Foo foo="foo" />;
21 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/exact-props.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled} from "styletron-react";
5 |
6 | const MyComponent: React.ComponentType<{|foo: 42|}> = _props => {
7 | return null;
8 | };
9 |
10 | const MyStyledComponent = styled(MyComponent, {color: "red"});
11 |
12 | <MyStyledComponent foo={42} />;
13 |
14 | // $FlowFixMe
15 | <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
16 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/exporting.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled, withStyle} from "styletron-react";
5 |
6 | /*
7 | All exports must have annotated generics
8 | */
9 |
10 | export const Foo = styled<{foo: "foo"}>("div", (_props: {foo: "foo"}) => ({
11 | color: "red",
12 | }));
13 |
14 | // $FlowFixMe
15 | <Foo />; // Missing foo
16 |
17 | // $FlowFixMe
18 | <Foo foo="notfoo" />; // Wrong foo
19 |
20 | <Foo foo="foo" />;
21 |
22 | export const Bar = withStyle<typeof Foo, {bar: "bar"}>(
23 | Foo,
24 | (_props: {bar: "bar"}) => ({color: "red"}),
25 | );
26 |
27 | // $FlowFixMe
28 | <Bar bar="bar" />; // Missing foo
29 | // $FlowFixMe
30 | <Bar foo="notfoo" bar="bar" />; // Wrong foo
31 | // $FlowFixMe
32 | <Bar foo="foo" />; // Missing bar
33 | // $FlowFixMe
34 | <Bar foo="foo" bar="notbar" />; // Wrong bar
35 |
36 | <Bar foo="foo" bar="bar" />;
37 |
38 | export const Baz = withStyle<typeof Bar, {baz: "baz"}>(
39 | Bar,
40 | (_props: {baz: "baz"}) => ({color: "red"}),
41 | );
42 |
43 | // $FlowFixMe
44 | <Baz bar="bar" baz="baz" />; // Missing foo
45 | // $FlowFixMe
46 | <Baz foo="notfoo" bar="bar" baz="baz" />; // Wrong foo
47 | // $FlowFixMe
48 | <Baz foo="foo" baz="baz" />; // Missing bar
49 | // $FlowFixMe
50 | <Baz foo="foo" bar="notbar" baz="baz" />; // Wrong bar
51 | // $FlowFixMe
52 | <Baz foo="foo" bar="bar" />; // Missing baz
53 | // $FlowFixMe
54 | <Baz foo="foo" bar="bar" baz="notbaz" />; // Wrong baz
55 |
56 | <Baz foo="foo" bar="bar" baz="baz" />;
57 |
58 | export const Qux = withStyle<typeof Baz, {qux: "qux"}>(
59 | Baz,
60 | (_props: {qux: "qux"}) => ({color: "red"}),
61 | );
62 |
63 | // $FlowFixMe
64 | <Qux bar="bar" baz="baz" qux="qux" />; // Missing foo
65 | // $FlowFixMe
66 | <Qux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
67 | // $FlowFixMe
68 | <Qux foo="foo" baz="baz" qux="qux" />; // Missing bar
69 | // $FlowFixMe
70 | <Qux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
71 | // $FlowFixMe
72 | <Qux foo="foo" bar="bar" qux="qux" />; // Missing baz
73 | // $FlowFixMe
74 | <Qux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
75 | // $FlowFixMe
76 | <Qux foo="foo" bar="bar" baz="baz" />; // Missing qux
77 | // $FlowFixMe
78 | <Qux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
79 |
80 | <Qux foo="foo" bar="bar" baz="baz" qux="qux" />;
81 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/importing.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {Foo, Bar, Baz, Qux} from "./exporting.js";
5 |
6 | // $FlowFixMe
7 | <Foo />; // Missing foo
8 |
9 | // $FlowFixMe
10 | <Foo foo="notfoo" />; // Wrong foo
11 |
12 | <Foo foo="foo" />;
13 |
14 | // $FlowFixMe
15 | <Bar bar="bar" />; // Missing foo
16 | // $FlowFixMe
17 | <Bar foo="notfoo" bar="bar" />; // Wrong foo
18 | // $FlowFixMe
19 | <Bar foo="foo" />; // Missing bar
20 | // $FlowFixMe
21 | <Bar foo="foo" bar="notbar" />; // Wrong bar
22 |
23 | <Bar foo="foo" bar="bar" />;
24 |
25 | // $FlowFixMe
26 | <Baz bar="bar" baz="baz" />; // Missing foo
27 | // $FlowFixMe
28 | <Baz foo="notfoo" bar="bar" baz="baz" />; // Wrong foo
29 | // $FlowFixMe
30 | <Baz foo="foo" baz="baz" />; // Missing bar
31 | // $FlowFixMe
32 | <Baz foo="foo" bar="notbar" baz="baz" />; // Wrong bar
33 | // $FlowFixMe
34 | <Baz foo="foo" bar="bar" />; // Missing baz
35 | // $FlowFixMe
36 | <Baz foo="foo" bar="bar" baz="notbaz" />; // Wrong baz
37 |
38 | <Baz foo="foo" bar="bar" baz="baz" />;
39 |
40 | // $FlowFixMe
41 | <Qux bar="bar" baz="baz" qux="qux" />; // Missing foo
42 | // $FlowFixMe
43 | <Qux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
44 | // $FlowFixMe
45 | <Qux foo="foo" baz="baz" qux="qux" />; // Missing bar
46 | // $FlowFixMe
47 | <Qux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
48 | // $FlowFixMe
49 | <Qux foo="foo" bar="bar" qux="qux" />; // Missing baz
50 | // $FlowFixMe
51 | <Qux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
52 | // $FlowFixMe
53 | <Qux foo="foo" bar="bar" baz="baz" />; // Missing qux
54 | // $FlowFixMe
55 | <Qux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
56 |
57 | <Qux foo="foo" bar="bar" baz="baz" qux="qux" />;
58 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/inferred-deep-composition-no-usage.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled, withStyle} from "styletron-react";
5 |
6 | // Note: explicit generic annotation is here because this is not inferred correctly
7 | const Foo = styled<{foo: "foo"}>("div", (_props: {foo: "foo"}) => ({
8 | color: "red",
9 | }));
10 | const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
11 | const Baz = withStyle(Bar, (_props: {baz: "baz"}) => ({color: "red"}));
12 | const Qux = withStyle(Baz, (_props: {qux: "qux"}) => ({color: "red"}));
13 |
14 | // $FlowFixMe
15 | <Qux bar="bar" baz="baz" qux="qux" />; // Missing foo
16 | // $FlowFixMe
17 | <Qux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
18 | // $FlowFixMe
19 | <Qux foo="foo" baz="baz" qux="qux" />; // Missing bar
20 | // $FlowFixMe
21 | <Qux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
22 | // $FlowFixMe
23 | <Qux foo="foo" bar="bar" qux="qux" />; // Missing baz
24 | // $FlowFixMe
25 | <Qux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
26 | // $FlowFixMe
27 | <Qux foo="foo" bar="bar" baz="baz" />; // Missing qux
28 | // $FlowFixMe
29 | <Qux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
30 |
31 | <Qux foo="foo" bar="bar" baz="baz" qux="qux" />;
32 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/inferred-deep-composition.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled, withStyle, withWrapper} from "styletron-react";
5 |
6 | // Note: explicit generic annotation is here because this is not inferred correctly
7 | const Foo = styled<{foo: "foo"}>("div", (_props: {foo: "foo"}) => ({
8 | color: "red",
9 | }));
10 |
11 | // $FlowFixMe
12 | <Foo />; // Missing foo
13 |
14 | // $FlowFixMe
15 | <Foo foo="notfoo" />; // Wrong foo
16 |
17 | <Foo foo="foo" />;
18 |
19 | const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
20 |
21 | // $FlowFixMe
22 | <Bar bar="bar" />; // Missing foo
23 | // $FlowFixMe
24 | <Bar foo="notfoo" bar="bar" />; // Wrong foo
25 | // $FlowFixMe
26 | <Bar foo="foo" />; // Missing bar
27 | // $FlowFixMe
28 | <Bar foo="foo" bar="notbar" />; // Wrong bar
29 |
30 | <Bar foo="foo" bar="bar" />;
31 |
32 | const Baz = withStyle(Bar, (_props: {baz: "baz"}) => ({color: "red"}));
33 |
34 | // $FlowFixMe
35 | <Baz bar="bar" baz="baz" />; // Missing foo
36 | // $FlowFixMe
37 | <Baz foo="notfoo" bar="bar" baz="baz" />; // Wrong foo
38 | // $FlowFixMe
39 | <Baz foo="foo" baz="baz" />; // Missing bar
40 | // $FlowFixMe
41 | <Baz foo="foo" bar="notbar" baz="baz" />; // Wrong bar
42 | // $FlowFixMe
43 | <Baz foo="foo" bar="bar" />; // Missing baz
44 | // $FlowFixMe
45 | <Baz foo="foo" bar="bar" baz="notbaz" />; // Wrong baz
46 |
47 | <Baz foo="foo" bar="bar" baz="baz" />;
48 |
49 | const Qux = withStyle(Baz, (_props: {qux: "qux"}) => ({color: "red"}));
50 |
51 | // $FlowFixMe
52 | <Qux bar="bar" baz="baz" qux="qux" />; // Missing foo
53 | // $FlowFixMe
54 | <Qux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
55 | // $FlowFixMe
56 | <Qux foo="foo" baz="baz" qux="qux" />; // Missing bar
57 | // $FlowFixMe
58 | <Qux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
59 | // $FlowFixMe
60 | <Qux foo="foo" bar="bar" qux="qux" />; // Missing baz
61 | // $FlowFixMe
62 | <Qux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
63 | // $FlowFixMe
64 | <Qux foo="foo" bar="bar" baz="baz" />; // Missing qux
65 | // $FlowFixMe
66 | <Qux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
67 |
68 | <Qux foo="foo" bar="bar" baz="baz" qux="qux" />;
69 |
70 | const WrappedQux = withWrapper(Qux, StyledComponent => props => (
71 | <div>
72 | <StyledComponent {...props} />
73 | </div>
74 | ));
75 |
76 | // $FlowFixMe
77 | <WrappedQux bar="bar" baz="baz" qux="qux" />; // Missing foo
78 | // $FlowFixMe
79 | <WrappedQux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
80 | // $FlowFixMe
81 | <WrappedQux foo="foo" baz="baz" qux="qux" />; // Missing bar
82 | // $FlowFixMe
83 | <WrappedQux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
84 | // $FlowFixMe
85 | <WrappedQux foo="foo" bar="bar" qux="qux" />; // Missing baz
86 | // $FlowFixMe
87 | <WrappedQux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
88 | // $FlowFixMe
89 | <WrappedQux foo="foo" bar="bar" baz="baz" />; // Missing qux
90 | // $FlowFixMe
91 | <WrappedQux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
92 |
93 | <WrappedQux foo="foo" bar="bar" baz="baz" qux="qux" />;
94 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/inferred-static.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled, withStyle} from "styletron-react";
5 |
6 | const Foo = styled("div", {
7 | color: "red",
8 | gridTemplateColumns: "repeat(2, 1fr)",
9 | gridGap: "24px",
10 | "@media (min-width: 930px)": {
11 | gridTemplateColumns: "repeat(3, 1fr)",
12 | },
13 | "@media (min-width: 1120px)": {
14 | gridTemplateColumns: "repeat(4, 1fr)",
15 | },
16 | });
17 |
18 | <Foo />; // Foo usage is necessary for inference
19 |
20 | const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
21 |
22 | // $FlowFixMe
23 | <Bar />; // Missing bar
24 |
25 | // $FlowFixMe
26 | <Bar bar="notbar" />; // Wrong bar
27 |
28 | <Bar bar="bar" />;
29 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/inferred-styled.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled, withStyle} from "styletron-react";
5 |
6 | const Foo = styled("div", (_props: {foo: "foo"}) => ({color: "red"}));
7 |
8 | <Foo foo="foo" />; // Foo usage is necessary for inference
9 |
10 | const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
11 |
12 | // $FlowFixMe
13 | <Bar />; // Missing foo and bar
14 | // $FlowFixMe
15 | <Bar bar="bar" />; // Missing foo
16 | // $FlowFixMe
17 | <Bar foo="foo" />; // Missing bar
18 | // $FlowFixMe
19 | <Bar foo={12345} bar="bar" />; // Wrong foo. Note: inferred type is string instead of "foo" literal
20 | // $FlowFixMe
21 | <Bar foo="a string" bar="notbar" />; // Wrong bar
22 |
23 | <Bar foo="foo" bar="bar" />;
24 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/null-values.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled} from "styletron-react";
5 |
6 | const Foo = styled("div", {
7 | // Using null values was previously supported, albeit erroneously
8 | // So we should continue to support null values in Flow for the time being
9 | zIndex: null,
10 | });
11 |
12 | const Bar = styled("div", {
13 | // zIndex is an optional property, so undefined is allowed as a value by Flow
14 | // Using undefined as a value is also convenient when optionally setting a value
15 | zIndex: void 0,
16 | });
17 |
18 | <Foo />;
19 | <Bar />;
20 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "flow-type-tests",
3 | "private": true,
4 | "version": "1.0.30",
5 | "license": "MIT",
6 | "scripts": {
7 | "test": "tape __tests__/assert-flow-message.node.js"
8 | },
9 | "dependencies": {
10 | "styletron-react": "^6.1.1",
11 | "styletron-standard": "^3.1.0"
12 | },
13 | "devDependencies": {
14 | "tape": "^4.9.2"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/styled-from-styled.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled} from "styletron-react";
5 |
6 | const Foo = styled("div", (_props: {foo: "foo"}) => ({
7 | color: "red",
8 | }));
9 |
10 | // TODO: this should cause a flow error
11 | const Bar = styled(Foo, (_props: {bar: "bar"}) => ({
12 | color: "red",
13 | }));
14 |
15 | <Bar foo="foo" bar="bar" />;
16 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/with-wrapper-typed.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled, withStyle, withWrapper} from "styletron-react";
5 |
6 | const Foo = styled("div", (props: {foo: "foo"}) => ({
7 | color: props.foo,
8 | }));
9 | const Bar = withWrapper(
10 | Foo,
11 | StyledComponent => (props: {foo: "foo", bar: "bar"}) =>
12 | (
13 | <div>
14 | <StyledComponent {...props} />
15 | </div>
16 | ),
17 | );
18 |
19 | // $FlowFixMe
20 | <Bar />; // missing foo and bar
21 |
22 | // $FlowFixMe
23 | <Bar foo="foo" />; // missing bar
24 |
25 | // $FlowFixMe
26 | <Bar bar="bar" />; // missing foo
27 |
28 | <Bar foo="foo" bar="bar" />;
29 |
30 | const Baz = withStyle(Bar, (props: {foo: "foo", bar: "bar", baz: "baz"}) => ({
31 | color: props.baz,
32 | }));
33 |
34 | // $FlowFixMe
35 | <Baz bar="bar" baz="baz" />; // Missing foo
36 | // $FlowFixMe
37 | <Baz foo="notfoo" bar="bar" baz="baz" />; // Wrong foo
38 | // $FlowFixMe
39 | <Baz foo="foo" baz="baz" />; // Missing bar
40 | // $FlowFixMe
41 | <Baz foo="foo" bar="notbar" baz="baz" />; // Wrong bar
42 | // $FlowFixMe
43 | <Baz foo="foo" bar="bar" />; // Missing baz
44 | // $FlowFixMe
45 | <Baz foo="foo" bar="bar" baz="notbaz" />; // Wrong baz
46 |
47 | <Baz foo="foo" bar="bar" baz="baz" />;
48 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/with-wrapper.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from "react";
4 | import {styled, withWrapper} from "styletron-react";
5 |
6 | const Foo = styled("div", {color: "red"});
7 | const Bar = withWrapper(Foo, StyledComponent => props => (
8 | <div>
9 | <StyledComponent {...props} />
10 | </div>
11 | ));
12 |
13 | <Bar />;
14 |
--------------------------------------------------------------------------------
/packages/flow-type-tests/wrong-usage.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | /* eslint-disable no-unused-vars */
4 |
5 | import * as React from "react";
6 | import {withStyle} from "styletron-react";
7 |
8 | class Foo extends React.Component<{foo: "foo"}> {}
9 |
10 | /*
11 | This causes a Flow error that can't be supressed. But it should cause an error.
12 | */
13 |
14 | // const Bar = withStyle(Foo, (props: {bar: "bar"}) => ({
15 | // color: "red",
16 | // }));
17 |
--------------------------------------------------------------------------------
/packages/playground/README.md:
--------------------------------------------------------------------------------
1 | # Playground
2 |
3 | Run it with:
4 |
5 | ```bash
6 | yarn dev
7 | ```
8 |
--------------------------------------------------------------------------------
/packages/playground/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "playground",
3 | "version": "1.0.1",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next",
7 | "start": "next start"
8 | },
9 | "dependencies": {
10 | "next": "latest",
11 | "react": "^16.8.0",
12 | "react-dom": "^16.8.0"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/playground/pages/_app.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import App from "next/app";
3 | import {Provider as StyletronProvider} from "styletron-react";
4 | import {styletron, debug} from "../styletron";
5 |
6 | export default class MyApp extends App {
7 | render() {
8 | const {Component, pageProps} = this.props;
9 | return (
10 | <StyletronProvider value={styletron} debug={debug} debugAfterHydration>
11 | <Component {...pageProps} />
12 | </StyletronProvider>
13 | );
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/playground/pages/_document.js:
--------------------------------------------------------------------------------
1 | import Document, {Head, Main, NextScript} from "next/document";
2 | import {Provider as StyletronProvider} from "styletron-react";
3 | import {styletron} from "../styletron";
4 |
5 | class MyDocument extends Document {
6 | static getInitialProps({renderPage}) {
7 | const page = renderPage(App => props => (
8 | <StyletronProvider value={styletron}>
9 | <App {...props} />
10 | </StyletronProvider>
11 | ));
12 | const stylesheets = styletron.getStylesheets() || [];
13 | return {...page, stylesheets};
14 | }
15 |
16 | render() {
17 | return (
18 | <html>
19 | <Head>
20 | {this.props.stylesheets.map((sheet, i) => (
21 | <style
22 | className="_styletron_hydrate_"
23 | dangerouslySetInnerHTML={{__html: sheet.css}}
24 | media={sheet.attrs.media}
25 | data-hydrate={sheet.attrs["data-hydrate"]}
26 | key={i}
27 | />
28 | ))}
29 | </Head>
30 | <body>
31 | <Main />
32 | <NextScript />
33 | </body>
34 | </html>
35 | );
36 | }
37 | }
38 |
39 | export default MyDocument;
40 |
--------------------------------------------------------------------------------
/packages/playground/pages/index.js:
--------------------------------------------------------------------------------
1 | import {styled} from "styletron-react";
2 |
3 | const Title = styled("h1", {
4 | color: "red",
5 | fontSize: "82px",
6 | });
7 |
8 | const SubTitle = styled("h2", ({$size}) => ({
9 | color: "blue",
10 | fontSize: `${$size}px`,
11 | }));
12 |
13 | export default () => {
14 | return (
15 | <div>
16 | <Title>Title</Title>
17 | <SubTitle $size={50}>Subtitle</SubTitle>
18 | </div>
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/packages/playground/styletron.js:
--------------------------------------------------------------------------------
1 | /* eslint-env browser,node */
2 |
3 | import {Client, Server} from "styletron-engine-atomic";
4 | import {DebugEngine} from "styletron-react";
5 |
6 | const getHydrateClass = () =>
7 | document.getElementsByClassName("_styletron_hydrate_");
8 |
9 | export const styletron =
10 | typeof window === "undefined"
11 | ? new Server()
12 | : new Client({
13 | hydrate: getHydrateClass(),
14 | });
15 |
16 | export const debug =
17 | process.env.NODE_ENV === "production" ? void 0 : new DebugEngine();
18 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "test": {
4 | "presets": [
5 | ["@babel/preset-env", {"targets": {"node": "current"}}],
6 | "@babel/preset-typescript"
7 | ]
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/README.md:
--------------------------------------------------------------------------------
1 | # styletron-engine-atomic
2 |
3 | [![npm version][npm-badge]][npm-href]
4 |
5 | Atomic implementation of the [`styletron-standard`](../styletron-standard) engine interface.
6 |
7 | ## Installation
8 |
9 | ```
10 | yarn add styletron-engine-atomic
11 | ```
12 |
13 | ## [API](https://www.styletron.org/api/#styletron-engine-atomic)
14 |
15 | [npm-badge]: https://badge.fury.io/js/styletron-engine-atomic.svg
16 | [npm-href]: https://www.npmjs.com/package/styletron-engine-atomic
17 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/TRADEOFFS.md:
--------------------------------------------------------------------------------
1 | # Tradeoffs
2 |
3 | ## Atomic CSS
4 |
5 | ### Benefits
6 |
7 | * Lightweight CSS for inlining critical styles in SSR
8 | * Efficient runtime performance, caching, and hydration
9 |
10 | ### Drawbacks
11 |
12 | * Footguns
13 | * Overlapping media queries on same element
14 | * Mixing shorthand and longform properties on same element
15 |
16 | ## Rendering CSS with `CSSStyleSheet.insertRule()`
17 |
18 | ### Benefits
19 |
20 | * Performance
21 |
22 | ### Drawbacks
23 |
24 | * CSSOM bugs in Chrome DevTools
25 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/jest.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | module.exports = {
4 | projects: [
5 | {
6 | displayName: "node",
7 | testEnvironment: "node",
8 | testPathIgnorePatterns: [
9 | "/node_modules/",
10 | "dist-*",
11 | "lib",
12 | ".browser.ts",
13 | "lib",
14 | ],
15 | globals: {
16 | __NODE__: true,
17 | __BROWSER__: false,
18 | __DEV__: true,
19 | },
20 | },
21 | {
22 | displayName: "browser",
23 | testEnvironment: "jsdom",
24 | testPathIgnorePatterns: [
25 | "/node_modules/",
26 | "dist-*",
27 | "lib",
28 | ".node.ts",
29 | "lib",
30 | ],
31 | globals: {
32 | __NODE__: false,
33 | __BROWSER__: true,
34 | __DEV__: true,
35 | },
36 | },
37 | ],
38 | };
39 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styletron-engine-atomic",
3 | "version": "1.6.2",
4 | "description": "Universal, high-performance JavaScript styles",
5 | "author": "Ryan Tsao <ryan.j.tsao@gmail.com>",
6 | "repository": "styletron/styletron",
7 | "sideEffects": false,
8 | "files": [
9 | "dist-browser-cjs",
10 | "dist-browser-esm",
11 | "dist-node-cjs",
12 | "dist-node-esm",
13 | "src",
14 | "!**/__tests__",
15 | "lib"
16 | ],
17 | "main": "./dist-node-cjs/index.js",
18 | "module": "./dist-node-esm/index.js",
19 | "types": "./lib/index.d.ts",
20 | "browser": {
21 | "./dist-node-cjs/index.js": "./dist-browser-cjs/index.js",
22 | "./dist-node-esm/index.js": "./dist-browser-esm/index.js"
23 | },
24 | "scripts": {
25 | "build": "cup build --skip-flow && cp ./src/index.js.flow ./dist-node-cjs/",
26 | "test": "jest",
27 | "prepublish": "npm run build"
28 | },
29 | "dependencies": {
30 | "inline-style-prefixer": "^5.1.0",
31 | "styletron-standard": "^3.1.0"
32 | },
33 | "devDependencies": {
34 | "@babel/plugin-transform-flow-strip-types": "^7.17.12",
35 | "@babel/preset-env": "^7.18.2",
36 | "@babel/preset-typescript": "^7.17.12",
37 | "@types/jest": "^27.5.1",
38 | "create-universal-package": "^4.3.0",
39 | "jest": "^27.5.1"
40 | },
41 | "license": "MIT"
42 | }
43 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/src/cache.ts:
--------------------------------------------------------------------------------
1 | import SequentialIDGenerator from "./sequential-id-generator";
2 | import sortMq from "./sort-css-media-queries";
3 |
4 | type OnNewCacheFn<T> = (
5 | key: string,
6 | cache: Cache<T>,
7 | value?: string | null,
8 | ) => any;
9 | type OnNewValueFn<T> = (cache: Cache<T>, id: string, value: T) => any;
10 |
11 | export class MultiCache<T> {
12 | caches: {
13 | [x: string]: Cache<T>;
14 | };
15 | idGenerator: SequentialIDGenerator;
16 | onNewCache: OnNewCacheFn<T>;
17 | onNewValue: OnNewValueFn<T>;
18 | sortedCacheKeys: string[];
19 |
20 | constructor(
21 | idGenerator: SequentialIDGenerator,
22 | onNewCache: OnNewCacheFn<T>,
23 | onNewValue: OnNewValueFn<T>,
24 | ) {
25 | this.idGenerator = idGenerator;
26 | this.onNewCache = onNewCache;
27 | this.onNewValue = onNewValue;
28 | this.sortedCacheKeys = [];
29 | this.caches = {};
30 | }
31 |
32 | getCache(key: string): Cache<T> {
33 | if (!this.caches[key]) {
34 | const cache = new Cache(this.idGenerator, this.onNewValue);
35 | cache.key = key;
36 | this.sortedCacheKeys.push(key);
37 | this.sortedCacheKeys.sort(sortMq);
38 | const keyIndex = this.sortedCacheKeys.indexOf(key);
39 | const insertBeforeMedia =
40 | keyIndex < this.sortedCacheKeys.length - 1
41 | ? this.sortedCacheKeys[keyIndex + 1]
42 | : void 0;
43 | this.caches[key] = cache;
44 | this.onNewCache(key, cache, insertBeforeMedia);
45 | }
46 | return this.caches[key];
47 | }
48 |
49 | getSortedCacheKeys() {
50 | return this.sortedCacheKeys;
51 | }
52 | }
53 |
54 | export class Cache<T> {
55 | cache: {
56 | [x: string]: string;
57 | };
58 | idGenerator: SequentialIDGenerator;
59 | key: string;
60 | onNewValue: (cache: Cache<T>, id: string, value: any) => any;
61 |
62 | constructor(
63 | idGenerator: SequentialIDGenerator,
64 | onNewValue: (cache: Cache<T>, id: string, value: any) => any,
65 | ) {
66 | this.cache = {};
67 | this.idGenerator = idGenerator;
68 | this.onNewValue = onNewValue;
69 | }
70 |
71 | addValue(key: string, value: T) {
72 | const cached = this.cache[key];
73 | if (cached) {
74 | return cached;
75 | }
76 | const id = this.idGenerator.next();
77 | this.cache[key] = id;
78 | this.onNewValue(this, id, value);
79 | return id;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/src/css.ts:
--------------------------------------------------------------------------------
1 | declare var __DEV__: boolean;
2 |
3 | import hyphenate from "./hyphenate-style-name";
4 | import validateKeyframesObject from "./validate-keyframes-object";
5 |
6 | export function atomicSelector(id: string, pseudo: string): string {
7 | let selector = `.${id}`;
8 | if (pseudo) {
9 | selector += pseudo;
10 | }
11 | return selector;
12 | }
13 |
14 | export function keyframesToBlock(keyframes: {[x: string]: any}): string {
15 | if (__DEV__) {
16 | validateKeyframesObject(keyframes);
17 | }
18 | if (__DEV__ && typeof Object.getPrototypeOf(keyframes) !== "undefined") {
19 | if (Object.getPrototypeOf(keyframes) !== Object.getPrototypeOf({})) {
20 | // eslint-disable-next-line no-console
21 | console.warn(
22 | "Only plain objects should be used as animation values. Unexpectedly recieved:",
23 | keyframes,
24 | );
25 | }
26 | }
27 | let result = "";
28 | for (const animationState in keyframes) {
29 | result += `${animationState}{${declarationsToBlock(
30 | keyframes[animationState],
31 | )}}`;
32 | }
33 | return result;
34 | }
35 |
36 | export function declarationsToBlock(style: any): string {
37 | let css = "";
38 | for (const prop in style) {
39 | const val = style[prop];
40 | if (typeof val === "string" || typeof val === "number") {
41 | css += `${hyphenate(prop)}:${val};`;
42 | }
43 | }
44 | // trim trailing semicolon
45 | return css.slice(0, -1);
46 | }
47 |
48 | export function keyframesBlockToRule(id: string, block: string): string {
49 | return `@keyframes ${id}{${block}}`;
50 | }
51 |
52 | export function fontFaceBlockToRule(id: string, block: string): string {
53 | return `@font-face{font-family:${id};${block}}`;
54 | }
55 |
56 | export function styleBlockToRule(selector: string, block: string): string {
57 | return `${selector}{${block}}`;
58 | }
59 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/src/dev-tool.ts:
--------------------------------------------------------------------------------
1 | /* eslint-env browser */
2 | export const insertRuleIntoDevtools = (selector, block) => {
3 | // start after the . combinator and cut at the first : if there is one to cut out the pseudo classes
4 | const key = selector.substring(
5 | 1,
6 | selector.indexOf(":") !== -1 ? selector.indexOf(":") : selector.length,
7 | );
8 | const styles = {};
9 | // split the declaration to catch vendor prefixing
10 | for (const decl of block.split(";")) {
11 | if (decl.trim() !== "" && !window.__STYLETRON_DEVTOOLS__.atomicMap[key])
12 | styles[decl.substring(0, decl.indexOf(":"))] = decl.substring(
13 | decl.indexOf(":") + 1,
14 | decl.length,
15 | );
16 | }
17 |
18 | window.__STYLETRON_DEVTOOLS__.atomicMap[key] = styles;
19 | };
20 |
21 | export const hydrateDevtoolsRule = cssString => {
22 | const id = cssString.substring(0, 3);
23 | const block = cssString.substring(4, cssString.length - 1);
24 | insertRuleIntoDevtools(id, block);
25 | };
26 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/src/hyphenate-style-name.ts:
--------------------------------------------------------------------------------
1 | const uppercasePattern = /[A-Z]/g;
2 | const msPattern = /^ms-/;
3 | const cache = {};
4 |
5 | export default function hyphenateStyleName(prop: string): string {
6 | return prop in cache
7 | ? cache[prop]
8 | : (cache[prop] = prop
9 | .replace(uppercasePattern, "-amp;")
10 | .toLowerCase()
11 | .replace(msPattern, "-ms-"));
12 | }
13 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/src/index.js.flow:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import type {
4 | StandardEngine,
5 | KeyframesObject,
6 | FontFaceObject,
7 | StyleObject,
8 | } from "styletron-standard";
9 |
10 | declare class SequentialIDGenerator {
11 | prefix: string;
12 | count: number;
13 | offset: number;
14 | msb: number;
15 | power: number;
16 |
17 | constructor(prefix?: string): void;
18 | next(): string;
19 |
20 | increment():number;
21 | }
22 |
23 |
24 | declare class MultiCache<T> {
25 | caches: {[string]: Cache<T>};
26 | idGenerator: SequentialIDGenerator;
27 | onNewCache: (string, Cache<T>, ?string) => any;
28 | onNewValue: (cache: Cache<T>, id: string, value: T) => any;
29 | sortedCacheKeys: string[];
30 |
31 | constructor(
32 | idGenerator: SequentialIDGenerator,
33 | onNewCache: Function,
34 | onNewValue: Function,
35 | ): void ;
36 |
37 | getCache(key: string): Cache<T>;
38 |
39 | getSortedCacheKeys(): string[];
40 | }
41 |
42 | declare class Cache<T> {
43 | cache: {[string]: string};
44 | idGenerator: SequentialIDGenerator;
45 | key: string;
46 | onNewValue: (cache: Cache<T>, id: string, value: any) => any;
47 |
48 | constructor(
49 | idGenerator: SequentialIDGenerator,
50 | onNewValue: (cache: Cache<T>, id: string, value: any) => any,
51 | ): void;
52 |
53 | addValue(key: string, value: T):string;
54 | }
55 |
56 | type hydrateT =
57 | | HTMLCollection<HTMLStyleElement>
58 | | Array<HTMLStyleElement>
59 | | NodeList<HTMLStyleElement>;
60 |
61 | type optionsT = {
62 | hydrate?: hydrateT,
63 | container?: Element,
64 | prefix?: string,
65 | };
66 |
67 | declare export class Client implements StandardEngine {
68 | container: Element;
69 | styleElements: {[string]: HTMLStyleElement};
70 | fontFaceSheet: HTMLStyleElement;
71 | keyframesSheet: HTMLStyleElement;
72 |
73 | styleCache: MultiCache<{pseudo: string, block: string}>;
74 | keyframesCache: Cache<KeyframesObject>;
75 | fontFaceCache: Cache<FontFaceObject>;
76 |
77 | constructor(opts?: optionsT): void;
78 |
79 | renderStyle(style: StyleObject): string;
80 |
81 | renderFontFace(fontFace: FontFaceObject): string;
82 |
83 | renderKeyframes(keyframes: KeyframesObject): string;
84 | }
85 |
86 |
87 | export type attrsT = {
88 | "data-hydrate"?: "keyframes" | "font-face",
89 | media?: string,
90 | class?: string,
91 | };
92 |
93 | export type ServerSheetT = {|
94 | css: string,
95 | attrs: attrsT,
96 | |};
97 |
98 | type ServerOptionsT = {
99 | prefix?: string,
100 | };
101 |
102 | declare export class Server implements StandardEngine {
103 | styleCache: MultiCache<{pseudo: string, block: string}>;
104 | keyframesCache: Cache<KeyframesObject>;
105 | fontFaceCache: Cache<FontFaceObject>;
106 | styleRules: {[string]: string};
107 | keyframesRules: string;
108 | fontFaceRules: string;
109 |
110 | constructor(opts?: ServerOptionsT ): void;
111 |
112 | renderStyle(style: StyleObject): string;
113 |
114 | renderFontFace(fontFace: FontFaceObject): string;
115 |
116 | renderKeyframes(keyframes: KeyframesObject): string;
117 |
118 | getStylesheets(): Array<ServerSheetT>;
119 |
120 | getStylesheetsHtml(className?: string): string;
121 |
122 | getCss(): string;
123 | }
124 |
125 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/src/index.ts:
--------------------------------------------------------------------------------
1 | declare global {
2 | interface Window {
3 | __STYLETRON_DEVTOOLS__: any;
4 | }
5 | }
6 |
7 | export {default as Client} from "./client/client";
8 | export {default as Server} from "./server/server";
9 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/src/sequential-id-generator.ts:
--------------------------------------------------------------------------------
1 | export default class SequentialIDGenerator {
2 | prefix: string;
3 | count: number;
4 | offset: number;
5 | msb: number;
6 | power: number;
7 |
8 | constructor(prefix: string = "") {
9 | // ensure start with "ae" so "ad" is never produced
10 | this.prefix = prefix;
11 | this.count = 0;
12 | this.offset = 374;
13 | this.msb = 1295;
14 | this.power = 2;
15 | }
16 |
17 | next() {
18 | const id = this.increment().toString(36);
19 | return this.prefix ? `${this.prefix}${id}` : id;
20 | }
21 |
22 | increment() {
23 | const id = this.count + this.offset;
24 | if (id === this.msb) {
25 | this.offset += (this.msb + 1) * 9;
26 | this.msb = Math.pow(36, ++this.power) - 1;
27 | }
28 | this.count++;
29 | return id;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/src/validate-keyframes-object.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | const validAnimationState =
4 | /^(from|to|\+?(\d*\.)?\d+%)(\s*,\s*(from|to|\+?(\d*\.)?\d+%))*$/;
5 |
6 | export default function validateKeyframesObject(keyframes: any) {
7 | let valid = true;
8 | for (const animationState in keyframes) {
9 | const value = keyframes[animationState];
10 | if (!validAnimationState.test(animationState)) {
11 | valid = false;
12 | console.warn(
13 | `Warning: property "${animationState}" in keyframes object ${JSON.stringify(
14 | keyframes,
15 | )} is not a valid. Must be "from", "to", or a percentage.`,
16 | );
17 | }
18 | if (typeof value !== "object") {
19 | valid = false;
20 | console.warn(
21 | `Warning: value for "${animationState}" property in keyframes object ${JSON.stringify(
22 | keyframes,
23 | )} must be an object. Instead it was a ${typeof value}.`,
24 | );
25 | }
26 | if (!valid) {
27 | console.warn(
28 | `Warning: object used as value for "animationName" style is invalid:`,
29 | keyframes,
30 | );
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/styletron-engine-atomic/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "./lib",
5 | "rootDir": "./src"
6 | },
7 | "include": [
8 | "./src/**/*"
9 | ],
10 | "references": [
11 | {
12 | "path": "../styletron-standard"
13 | }
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "test": {
4 | "presets": [
5 | ["@babel/preset-env", {"targets": {"node": "current"}}],
6 | "@babel/preset-typescript"
7 | ]
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/README.md:
--------------------------------------------------------------------------------
1 | # styletron-engine-monolithic
2 |
3 | [![npm version][npm-badge]][npm-href] [![dependencies status][deps-badge]][deps-href]
4 |
5 | Monolithic implementation of the [`styletron-standard`](../styletron-standard) engine interface.
6 |
7 | ## Installation
8 |
9 | ```
10 | yarn add styletron-engine-monolithic
11 | ```
12 |
13 | ## [API](https://www.styletron.org/api/#styletron-engine-monolithic)
14 |
15 | [deps-badge]: https://david-dm.org/rtsao/styletron-engine-monolithic.svg
16 | [deps-href]: https://david-dm.org/rtsao/styletron-engine-monolithic
17 | [npm-badge]: https://badge.fury.io/js/styletron-engine-monolithic.svg
18 | [npm-href]: https://www.npmjs.com/package/styletron-engine-monolithic
19 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/jest.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | module.exports = {
4 | projects: [
5 | {
6 | displayName: "node",
7 | testEnvironment: "node",
8 | testPathIgnorePatterns: [
9 | "/node_modules/",
10 | "dist-*",
11 | "lib",
12 | ".browser.ts",
13 | "lib",
14 | ],
15 | globals: {
16 | __NODE__: true,
17 | __BROWSER__: false,
18 | __DEV__: true,
19 | },
20 | },
21 | {
22 | displayName: "browser",
23 | testEnvironment: "jsdom",
24 | testPathIgnorePatterns: [
25 | "/node_modules/",
26 | "dist-*",
27 | "lib",
28 | ".node.ts",
29 | "lib",
30 | ],
31 | globals: {
32 | __NODE__: false,
33 | __BROWSER__: true,
34 | __DEV__: true,
35 | },
36 | },
37 | ],
38 | };
39 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styletron-engine-monolithic",
3 | "version": "1.0.0",
4 | "description": "Universal, high-performance JavaScript styles",
5 | "author": "Vojtech Miksu <vojtech@miksu.cz>",
6 | "repository": "styletron/styletron",
7 | "sideEffects": false,
8 | "files": [
9 | "dist-browser-cjs",
10 | "dist-browser-esm",
11 | "dist-node-cjs",
12 | "dist-node-esm",
13 | "src",
14 | "!**/__tests__",
15 | "lib"
16 | ],
17 | "main": "./dist-node-cjs/index.js",
18 | "module": "./dist-node-esm/index.js",
19 | "types": "./lib/index.d.ts",
20 | "browser": {
21 | "./dist-node-cjs/index.js": "./dist-browser-cjs/index.js",
22 | "./dist-node-esm/index.js": "./dist-browser-esm/index.js"
23 | },
24 | "scripts": {
25 | "build": "cup build --skip-flow && cp ./src/index.js.flow ./dist-node-cjs/",
26 | "test": "jest",
27 | "prepublish": "npm run build"
28 | },
29 | "dependencies": {
30 | "inline-style-prefixer": "^5.1.0",
31 | "styletron-standard": "^3.1.0"
32 | },
33 | "devDependencies": {
34 | "@babel/plugin-transform-flow-strip-types": "^7.17.12",
35 | "@babel/preset-env": "^7.18.2",
36 | "@babel/preset-typescript": "^7.17.12",
37 | "@types/jest": "^27.5.1",
38 | "create-universal-package": "^4.3.0",
39 | "jest": "^27.5.1"
40 | },
41 | "license": "MIT"
42 | }
43 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/src/css.ts:
--------------------------------------------------------------------------------
1 | declare var __DEV__: boolean;
2 |
3 | import hyphenate from "./hyphenate-style-name";
4 | import validateKeyframesObject from "./validate-keyframes-object";
5 | import generateAlphabeticName from "./generate-alphabetic-name";
6 | import {hash} from "./hash";
7 |
8 | import type {
9 | StyleObject,
10 | FontFaceObject,
11 | KeyframesObject,
12 | } from "styletron-standard";
13 |
14 | export function hashCssObject(
15 | cssObject: StyleObject | FontFaceObject | KeyframesObject,
16 | ): string {
17 | return generateAlphabeticName(hash(JSON.stringify(cssObject)));
18 | }
19 |
20 | export function keyframesToBlock(keyframes: {[x: string]: any}): string {
21 | if (__DEV__) {
22 | validateKeyframesObject(keyframes);
23 | }
24 | if (__DEV__ && typeof Object.getPrototypeOf(keyframes) !== "undefined") {
25 | if (Object.getPrototypeOf(keyframes) !== Object.getPrototypeOf({})) {
26 | // eslint-disable-next-line no-console
27 | console.warn(
28 | "Only plain objects should be used as animation values. Unexpectedly recieved:",
29 | keyframes,
30 | );
31 | }
32 | }
33 | let result = "";
34 | for (const animationState in keyframes) {
35 | result += `${animationState}{${declarationsToBlock(
36 | keyframes[animationState],
37 | )}}`;
38 | }
39 | return result;
40 | }
41 |
42 | export function declarationsToBlock(style: any): string {
43 | let css = "";
44 | for (const prop in style) {
45 | const val = style[prop];
46 | if (typeof val === "string" || typeof val === "number") {
47 | css += `${hyphenate(prop)}:${val};`;
48 | }
49 | }
50 | // trim trailing semicolon
51 | return css.slice(0, -1);
52 | }
53 |
54 | export function keyframesBlockToRule(id: string, block: string): string {
55 | return `@keyframes ${id}{${block}}`;
56 | }
57 |
58 | export function fontFaceBlockToRule(id: string, block: string): string {
59 | return `@font-face{font-family:${id};${block}}`;
60 | }
61 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/src/generate-alphabetic-name.ts:
--------------------------------------------------------------------------------
1 | // vendored in from styled-components
2 |
3 | const AD_REPLACER_R = /(a)(d)/gi;
4 |
5 | /* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
6 | * counterparts */
7 | const charsLength = 52;
8 |
9 | /* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
10 | const getAlphabeticChar = (code: number): string =>
11 | String.fromCharCode(code + (code > 25 ? 39 : 97));
12 |
13 | /* input a number, usually a hash and convert it to base-52 */
14 | export default function generateAlphabeticName(code: number): string {
15 | let name = "";
16 | let x;
17 |
18 | /* get a char and divide by alphabet-length */
19 | for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {
20 | name = getAlphabeticChar(x % charsLength) + name;
21 | }
22 |
23 | return (getAlphabeticChar(x % charsLength) + name).replace(
24 | AD_REPLACER_R,
25 | "$1-$2",
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/src/hash.ts:
--------------------------------------------------------------------------------
1 | // vendored in from styled-components
2 |
3 | export const SEED = 5381 | 0;
4 |
5 | // When we have separate strings it's useful to run a progressive
6 | // version of djb2 where we pretend that we're still looping over
7 | // the same string
8 | export const phash = (h: number, x: string): number => {
9 | h |= 0;
10 | for (let i = 0, l = x.length | 0; i < l; i++) {
11 | h = (h << 5) + h + x.charCodeAt(i);
12 | }
13 |
14 | return h;
15 | };
16 |
17 | // This is a djb2 hashing function
18 | export const hash = (x: string): number => {
19 | return phash(SEED, x) >>> 0;
20 | };
21 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/src/hyphenate-style-name.ts:
--------------------------------------------------------------------------------
1 | const uppercasePattern = /[A-Z]/g;
2 | const msPattern = /^ms-/;
3 | const cache = {};
4 |
5 | export default function hyphenateStyleName(prop: string): string {
6 | return prop in cache
7 | ? cache[prop]
8 | : (cache[prop] = prop
9 | .replace(uppercasePattern, "-amp;")
10 | .toLowerCase()
11 | .replace(msPattern, "-ms-"));
12 | }
13 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/src/index.js.flow:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import type {
4 | StandardEngine,
5 | KeyframesObject,
6 | FontFaceObject,
7 | StyleObject,
8 | } from "styletron-standard";
9 |
10 |
11 | type Options = {
12 | nonce?: string,
13 | container: Element,
14 | speedy?: boolean,
15 | };
16 |
17 |
18 | declare class StyleSheet {
19 | isSpeedy: boolean;
20 | ctr: number;
21 | tags: HTMLStyleElement[];
22 | container: Element;
23 | nonce: string | void;
24 | before: Element | null;
25 | constructor(options: Options): void;
26 | flush(): void;
27 | }
28 |
29 | type hydrateT =
30 | | HTMLCollection<HTMLStyleElement>
31 | | Array<HTMLStyleElement>
32 | | NodeList<HTMLStyleElement>;
33 |
34 | type optionsT = {
35 | hydrate?: hydrateT,
36 | container?: Element,
37 | prefix?: string,
38 | strict?: boolean,
39 | speedy?: boolean,
40 | };
41 |
42 | type cacheT = {
43 | [key: string]: true,
44 | };
45 |
46 | declare export class Client implements StandardEngine {
47 | container: Element;
48 | opts: optionsT;
49 | styleSheet: StyleSheet;
50 | cache: cacheT;
51 |
52 | constructor(opts?: optionsT): void;
53 |
54 | renderStyle(styles: StyleObject): string;
55 |
56 | renderFontFace(fontFace: FontFaceObject): string;
57 |
58 | renderKeyframes(keyframes: KeyframesObject): string;
59 | }
60 |
61 |
62 | type ServerSheetT = {|
63 | css: string,
64 | attrs: {[string]: string},
65 | |};
66 |
67 | export type ServerOptionsT = {
68 | prefix?: string,
69 | strict?: boolean,
70 | };
71 |
72 | export type SeverCacheT = {
73 | [key: string]: string,
74 | };
75 |
76 | declare export class Server implements StandardEngine {
77 | cache: SeverCacheT;
78 | opts: ServerOptionsT;
79 |
80 | constructor(opts?: ServerOptionsT): void;
81 |
82 | renderStyle(styles: StyleObject): string ;
83 |
84 | renderFontFace(fontFace: FontFaceObject): string;
85 | renderKeyframes(keyframes: KeyframesObject): string;
86 | getStylesheets(): Array<ServerSheetT>;
87 | getStylesheetsHtml(className?: string): string;
88 |
89 | getCss():string;
90 | }
91 |
92 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/src/index.ts:
--------------------------------------------------------------------------------
1 | export {default as Client} from "./client/client";
2 | export {default as Server} from "./server/server";
3 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/src/server/server.ts:
--------------------------------------------------------------------------------
1 | import type {StandardEngine} from "styletron-standard";
2 | import injectStylePrefixed from "../inject-style-prefixed";
3 |
4 | import type {
5 | StyleObject,
6 | FontFaceObject,
7 | KeyframesObject,
8 | } from "styletron-standard";
9 |
10 | import {
11 | keyframesToBlock,
12 | keyframesBlockToRule,
13 | fontFaceBlockToRule,
14 | declarationsToBlock,
15 | hashCssObject,
16 | } from "../css";
17 |
18 | export type sheetT = {
19 | css: string;
20 | attrs: {
21 | [x: string]: string;
22 | };
23 | };
24 |
25 | export type optionsT = {
26 | prefix?: string;
27 | strict?: boolean;
28 | };
29 |
30 | export type cacheT = {
31 | [key: string]: string;
32 | };
33 |
34 | class StyletronServer implements StandardEngine {
35 | cache: cacheT;
36 | opts: optionsT;
37 |
38 | constructor(opts: optionsT = {}) {
39 | this.opts = opts || {};
40 | this.cache = {};
41 | }
42 |
43 | renderStyle(styles: StyleObject): string {
44 | const className = hashCssObject(styles);
45 | if (!this.cache[className]) {
46 | this.cache[className] = injectStylePrefixed(
47 | styles,
48 | className,
49 | this.opts.prefix || "",
50 | Boolean(this.opts.strict),
51 | ).join("");
52 | }
53 | return `${this.opts.prefix || ""}css-${className}`;
54 | }
55 |
56 | renderFontFace(fontFace: FontFaceObject): string {
57 | const fontName = hashCssObject(fontFace);
58 | if (!this.cache[fontName]) {
59 | this.cache[fontName] = fontFaceBlockToRule(
60 | `${this.opts.prefix || ""}font-${fontName}`,
61 | declarationsToBlock(fontFace),
62 | );
63 | }
64 | return `${this.opts.prefix || ""}font-${fontName}`;
65 | }
66 |
67 | renderKeyframes(keyframes: KeyframesObject): string {
68 | const animationName = hashCssObject(keyframes);
69 | if (!this.cache[animationName]) {
70 | this.cache[animationName] = keyframesBlockToRule(
71 | `${this.opts.prefix || ""}animation-${animationName}`,
72 | keyframesToBlock(keyframes),
73 | );
74 | }
75 | return `${this.opts.prefix || ""}animation-${animationName}`;
76 | }
77 |
78 | getStylesheets(): Array<sheetT> {
79 | const hashedNames = [...Object.keys(this.cache)];
80 | return [
81 | {
82 | css: this.getCss(),
83 | attrs: {"data-hydrate": hashedNames.join(" ")},
84 | },
85 | ];
86 | }
87 |
88 | getStylesheetsHtml(className: string = "_styletron_hydrate_") {
89 | return generateHtmlString(this.getStylesheets(), className);
90 | }
91 |
92 | getCss() {
93 | return [...Object.values(this.cache)].join("");
94 | }
95 | }
96 |
97 | export function generateHtmlString(sheets: Array<sheetT>, className: string) {
98 | let html = "";
99 | for (let i = 0; i < sheets.length; i++) {
100 | const sheet = sheets[i];
101 | const {class: originalClassName, ...rest} = sheet.attrs;
102 | const attrs = {
103 | class: originalClassName
104 | ? `${className} ${originalClassName}`
105 | : className,
106 | ...rest,
107 | };
108 | html += `<style${attrsToString(attrs)}>${sheet.css}</style>`;
109 | }
110 | return html;
111 | }
112 |
113 | function attrsToString(attrs) {
114 | let result = "";
115 | for (const attr in attrs) {
116 | const value = attrs[attr];
117 | if (value === true) {
118 | result += " " + attr;
119 | } else if (value !== false) {
120 | result += ` ${attr}="${value}"`;
121 | }
122 | }
123 | return result;
124 | }
125 |
126 | export default StyletronServer;
127 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/src/validate-keyframes-object.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | const validAnimationState =
4 | /^(from|to|\+?(\d*\.)?\d+%)(\s*,\s*(from|to|\+?(\d*\.)?\d+%))*$/;
5 |
6 | export default function validateKeyframesObject(keyframes: any) {
7 | let valid = true;
8 | for (const animationState in keyframes) {
9 | const value = keyframes[animationState];
10 | if (!validAnimationState.test(animationState)) {
11 | valid = false;
12 | console.warn(
13 | `Warning: property "${animationState}" in keyframes object ${JSON.stringify(
14 | keyframes,
15 | )} is not a valid. Must be "from", "to", or a percentage.`,
16 | );
17 | }
18 | if (typeof value !== "object") {
19 | valid = false;
20 | console.warn(
21 | `Warning: value for "${animationState}" property in keyframes object ${JSON.stringify(
22 | keyframes,
23 | )} must be an object. Instead it was a ${typeof value}.`,
24 | );
25 | }
26 | if (!valid) {
27 | console.warn(
28 | `Warning: object used as value for "animationName" style is invalid:`,
29 | keyframes,
30 | );
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/styletron-engine-monolithic/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "./lib",
5 | "rootDir": "./src"
6 | },
7 | "include": [
8 | "./src/**/*"
9 | ],
10 | "references": [
11 | {
12 | "path": "../styletron-standard"
13 | }
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/packages/styletron-engine-snapshot/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "test": {
4 | "presets": [
5 | ["@babel/preset-env", {"targets": {"node": "current"}}],
6 | "@babel/preset-typescript"
7 | ]
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/styletron-engine-snapshot/README.md:
--------------------------------------------------------------------------------
1 | # styletron-engine-snapshot
2 |
3 | [![npm version][npm-badge]][npm-href] [![dependencies status][deps-badge]][deps-href]
4 |
5 | Implementation of the [`styletron-standard`](../styletron-standard) engine interface useful when testing with [jest snapshots](https://jestjs.io/docs/en/snapshot-testing).
6 |
7 | **SHOULD NOT BE USED IN PRODUCTION**
8 |
9 | ## Installation
10 |
11 | ```sh
12 | yarn add --dev styletron-engine-snapshot
13 | ```
14 |
15 | ## Reasoning
16 |
17 | Snapshots generated with `styletron-engine-atomic` have 2 main issues
18 |
19 | 1. non-debuggable classNames in snapshots (`"ae af "`)
20 |
21 | 2. className generation is dependent on internal engine state. If you create a new component,
22 | it might break an unrelated snapshot since that component rendering shifts the
23 | generation for the old snapshot.
24 |
25 | The package provides a *deterministic* engine that simply returns a `JSON.stringify`-ed version of the style object (with alpha-sorted keys).
26 | A snapshot should not fail **UNLESS** a style applied to the component changes (which you want).
27 | It also makes it easier to detect what exactly changed in the css in the snapshot since we actually now render all of the css values (we are essentially almost rendering the styles inline).
28 |
29 | ### Downsides of This Package/Approach
30 |
31 | 1. The engine generates invalid css class names (as they are essentially JSON)
32 | 2. Styles are **NOT ACTUALLY APPLIED**, so if you have existing tests that check/rely on computed styles, they no longer work.
33 |
34 | ### Future Improvements
35 |
36 | There is a path forward that can fix the downsides mentioned above.
37 | We can modify the engine into creating valid class names + style declarations **PER STYLE**, similar to what https://acss.io/ does.
38 | That would make it so that snapshots still diff nicely, while actually applying styles as well.
39 |
40 |
41 |
--------------------------------------------------------------------------------
/packages/styletron-engine-snapshot/jest.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | module.exports = {
4 | projects: [
5 | {
6 | displayName: "node",
7 | testEnvironment: "node",
8 | testPathIgnorePatterns: [
9 | "/node_modules/",
10 | "dist-*",
11 | "lib",
12 | ".browser.ts",
13 | "lib",
14 | ],
15 | globals: {
16 | __NODE__: true,
17 | __BROWSER__: false,
18 | __DEV__: true,
19 | },
20 | },
21 | {
22 | displayName: "browser",
23 | testEnvironment: "jsdom",
24 | testPathIgnorePatterns: [
25 | "/node_modules/",
26 | "dist-*",
27 | "lib",
28 | ".node.ts",
29 | "lib",
30 | ],
31 | globals: {
32 | __NODE__: false,
33 | __BROWSER__: true,
34 | __DEV__: true,
35 | },
36 | },
37 | ],
38 | };
39 |
--------------------------------------------------------------------------------
/packages/styletron-engine-snapshot/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styletron-engine-snapshot",
3 | "version": "1.0.2",
4 | "description": "Universal, high-performance JavaScript styles",
5 | "author": "Mo Kouli <mohamad.kouli@gmail.com>",
6 | "repository": "styletron/styletron",
7 | "sideEffects": false,
8 | "files": [
9 | "dist-browser-cjs",
10 | "dist-browser-esm",
11 | "dist-node-cjs",
12 | "dist-node-esm",
13 | "src",
14 | "!**/__tests__",
15 | "lib"
16 | ],
17 | "main": "./dist-node-cjs/index.js",
18 | "module": "./dist-node-esm/index.js",
19 | "types": "./lib/index.d.ts",
20 | "browser": {
21 | "./dist-node-cjs/index.js": "./dist-browser-cjs/index.js",
22 | "./dist-node-esm/index.js": "./dist-browser-esm/index.js"
23 | },
24 | "scripts": {
25 | "build": "cup build --skip-flow && cp ./src/index.js.flow ./dist-node-cjs/",
26 | "test": "jest",
27 | "prepublish": "npm run build"
28 | },
29 | "dependencies": {
30 | "json-stable-stringify": "^1.0.1",
31 | "prettier": "^2.6.2"
32 | },
33 | "peerDependencies": {
34 | "styletron-standard": "^3.0.1"
35 | },
36 | "devDependencies": {
37 | "@babel/preset-typescript": "^7.17.12",
38 | "@types/jest": "^27.5.1",
39 | "create-universal-package": "^4.3.0",
40 | "jest": "^27.5.1",
41 | "styletron-standard": "^3.1.0"
42 | },
43 | "license": "MIT"
44 | }
45 |
--------------------------------------------------------------------------------
/packages/styletron-engine-snapshot/src/__tests__/index.test.ts:
--------------------------------------------------------------------------------
1 | import {Client, Server, StyletronSnapshotEngine} from "../index";
2 |
3 | test("index", () => {
4 | expect(Client === Server && Client === StyletronSnapshotEngine).toBe(true);
5 | });
6 |
7 | test("StyletronSnapshotEngine rendering", () => {
8 | const instance = new StyletronSnapshotEngine();
9 |
10 | expect(instance.renderStyle({color: "purple"})).toBe(
11 | "style={ color: 'purple' }\n",
12 | );
13 |
14 | // @see: https://github.com/styletron/styletron/pull/342/files#r335055216
15 | expect(
16 | instance.renderStyle({
17 | ":after": {
18 | content: `"Hello World"`,
19 | },
20 | }),
21 | ).toBe("style={\n ':after': {\n content: '\"Hello World\"',\n },\n}\n");
22 |
23 | expect(
24 | instance.renderStyle({
25 | "@media (min-width: 800px)": {color: "purple"},
26 | }),
27 | ).toBe(
28 | "style={\n '@media (min-width: 800px)': {\n color: 'purple',\n },\n}\n",
29 | );
30 |
31 | expect(
32 | instance.renderFontFace({
33 | src: "local('Roboto')",
34 | }),
35 | ).toBe("fontFace={ src: \"local('Roboto')\" }\n");
36 |
37 | expect(
38 | instance.renderKeyframes({
39 | from: {
40 | color: "purple",
41 | },
42 | "50%": {
43 | color: "yellow",
44 | },
45 | to: {
46 | color: "orange",
47 | },
48 | }),
49 | ).toBe(
50 | "keyFrames={\n '50%': { color: 'yellow' },\n from: { color: 'purple' },\n to: { color: 'orange' },\n}\n",
51 | );
52 | });
53 |
--------------------------------------------------------------------------------
/packages/styletron-engine-snapshot/src/create-render.ts:
--------------------------------------------------------------------------------
1 | import {
2 | type StyleObject,
3 | type FontFaceObject,
4 | type KeyframesObject,
5 | } from "styletron-standard";
6 |
7 | import stringify from "json-stable-stringify";
8 |
9 | /**
10 | @see: https://prettier.io/docs/en/browser.html
11 | */
12 | import prettier from "prettier/standalone";
13 | import babelParser from "prettier/parser-babel";
14 |
15 | /*
16 | This adds a "deterministic" engine that simply returns a `JSON.stringify`-ed
17 | version of the style object (with aplha-sorted keys).
18 | */
19 | export default function createRender(kind: string) {
20 | return function render(
21 | obj: StyleObject | FontFaceObject | KeyframesObject | undefined | null,
22 | ): string {
23 | if (!obj) {
24 | return "";
25 | }
26 |
27 | const prettySortedJSON = prettier.format(stringify(obj), {
28 | /**
29 | even though we are using the json5 parser, it is actually packaged inside the
30 | babel parser in source
31 | @see: https://github.com/prettier/prettier/blob/a093bb3f7b9f59d8cbaf7e20f97f6fafceaef21b/src/common/internal-plugins.js#L28
32 | */
33 | parser: "json5",
34 | plugins: [babelParser],
35 |
36 | // don't add a semicolon at the end of the declaration
37 | semi: false,
38 |
39 | // default/prefer use of `'` for strings when needed
40 | singleQuote: true,
41 |
42 | // force newline insertions more often
43 | printWidth: 40,
44 | });
45 |
46 | return `${kind}=${prettySortedJSON}`;
47 | };
48 | }
49 |
--------------------------------------------------------------------------------
/packages/styletron-engine-snapshot/src/index.js.flow:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import type {
4 | StandardEngine,
5 | KeyframesObject,
6 | FontFaceObject,
7 | StyleObject,
8 | } from "styletron-standard";
9 |
10 | declare export class StyletronSnapshotEngine implements StandardEngine {
11 | renderStyle(styles: StyleObject): string;
12 |
13 | renderKeyframes(keyframes: KeyframesObject) : string;
14 |
15 | renderFontFace(fontFace: FontFaceObject): string;
16 | }
17 |
18 | declare export var Client: typeof StyletronSnapshotEngine;
19 | declare export var Server :typeof StyletronSnapshotEngine;
20 |
21 | declare export default StyletronSnapshotEngine;
22 |
--------------------------------------------------------------------------------
/packages/styletron-engine-snapshot/src/index.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | StandardEngine,
3 | KeyframesObject,
4 | FontFaceObject,
5 | StyleObject,
6 | } from "styletron-standard";
7 |
8 | import createRender from "./create-render";
9 |
10 | const engine = {
11 | renderStyle: createRender("style"),
12 | renderKeyframes: createRender("keyFrames"),
13 | renderFontFace: createRender("fontFace"),
14 | };
15 |
16 | export class StyletronSnapshotEngine implements StandardEngine {
17 | renderStyle(styles: StyleObject) {
18 | return engine.renderStyle(styles);
19 | }
20 |
21 | renderKeyframes(keyframes: KeyframesObject) {
22 | return engine.renderKeyframes(keyframes);
23 | }
24 |
25 | renderFontFace(fontFace: FontFaceObject) {
26 | return engine.renderFontFace(fontFace);
27 | }
28 | }
29 |
30 | export const Client = StyletronSnapshotEngine;
31 | export const Server = StyletronSnapshotEngine;
32 |
33 | export default StyletronSnapshotEngine;
34 |
--------------------------------------------------------------------------------
/packages/styletron-engine-snapshot/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "./lib",
5 | "rootDir": "./src"
6 | },
7 | "include": [
8 | "./src/**/*"
9 | ],
10 | "references": [
11 | {
12 | "path": "../styletron-standard"
13 | }
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/packages/styletron-react/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-react", "@babel/preset-typescript"],
3 | "env": {
4 | "test": {
5 | "plugins": ["@babel/plugin-proposal-class-properties"],
6 | "presets": [
7 | ["@babel/preset-env", {"targets": {"node": "current"}}],
8 | "@babel/preset-react",
9 | "@babel/preset-typescript"
10 | ]
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/styletron-react/.cuprc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | babel: {
3 | presets: [require.resolve('@babel/preset-react')],
4 | },
5 | };
6 |
--------------------------------------------------------------------------------
/packages/styletron-react/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "plugins": [
3 | "react"
4 | ],
5 |
6 | "rules": {
7 | "react/jsx-uses-react": "error",
8 | "react/jsx-uses-vars": "error",
9 | }
10 |
11 | };
12 |
--------------------------------------------------------------------------------
/packages/styletron-react/README.md:
--------------------------------------------------------------------------------
1 | # styletron-react
2 |
3 | [![npm version][npm-badge]][npm-href] [![dependencies status][deps-badge]][deps-href]
4 |
5 | React bindings for Styletron.
6 |
7 | ## Installation
8 |
9 | ```
10 | yarn add styletron-react
11 | ```
12 |
13 | ## [Documentation](https://www.styletron.org/react/)
14 |
15 | ## [API](https://www.styletron.org/api-reference#styletron-react)
16 |
17 | [deps-badge]: https://david-dm.org/rtsao/styletron-react.svg
18 | [deps-href]: https://david-dm.org/rtsao/styletron-react
19 | [npm-badge]: https://badge.fury.io/js/styletron-react.svg
20 | [npm-href]: https://www.npmjs.com/package/styletron-react
21 |
--------------------------------------------------------------------------------
/packages/styletron-react/jest.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | module.exports = {
4 | projects: [
5 | {
6 | displayName: "node",
7 | testEnvironment: "node",
8 | testPathIgnorePatterns: [
9 | "/node_modules/",
10 | "dist-*",
11 | "lib",
12 | ".browser.ts",
13 | "lib",
14 | ],
15 | globals: {
16 | __NODE__: true,
17 | __BROWSER__: false,
18 | __DEV__: true,
19 | },
20 | },
21 | {
22 | displayName: "browser",
23 | testEnvironment: "jsdom",
24 | testPathIgnorePatterns: [
25 | "/node_modules/",
26 | "dist-*",
27 | "lib",
28 | ".node.ts",
29 | "lib",
30 | ],
31 | globals: {
32 | __NODE__: false,
33 | __BROWSER__: true,
34 | __DEV__: true,
35 | },
36 | },
37 | ],
38 | };
39 |
--------------------------------------------------------------------------------
/packages/styletron-react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styletron-react",
3 | "version": "6.1.1",
4 | "description": "React bindings for Styletron",
5 | "author": "Ryan Tsao <ryan.j.tsao@gmail.com>",
6 | "repository": "styletron/styletron",
7 | "sideEffects": false,
8 | "files": [
9 | "dist-browser-cjs",
10 | "dist-browser-esm",
11 | "dist-node-cjs",
12 | "dist-node-esm",
13 | "src",
14 | "!**/__tests__",
15 | "lib"
16 | ],
17 | "main": "./dist-node-cjs/index.js",
18 | "module": "./dist-node-esm/index.js",
19 | "types": "./lib/index.d.ts",
20 | "browser": {
21 | "./dist-node-cjs/index.js": "./dist-browser-cjs/index.js",
22 | "./dist-node-esm/index.js": "./dist-browser-esm/index.js"
23 | },
24 | "scripts": {
25 | "build": "cup build --skip-flow && cp ./src/index.js.flow ./dist-node-cjs/",
26 | "test": "jest",
27 | "prepublish": "npm run build"
28 | },
29 | "dependencies": {
30 | "prop-types": "^15.6.0",
31 | "styletron-standard": "^3.1.0"
32 | },
33 | "peerDependencies": {
34 | "react": ">=16.8.0"
35 | },
36 | "devDependencies": {
37 | "@babel/plugin-proposal-class-properties": "^7.17.12",
38 | "@babel/preset-react": "^7.17.12",
39 | "@types/jest": "^27.5.1",
40 | "@types/react": "^16.8.23",
41 | "@types/webpack-env": "^1.17.0",
42 | "create-universal-package": "^4.3.0",
43 | "enzyme": "^3.11.0",
44 | "enzyme-adapter-react-16": "^1.15.6",
45 | "eslint-plugin-react": "^7.6.1",
46 | "jest": "^27.5.1",
47 | "react": "^16.8.6",
48 | "react-dom": "^16.8.6"
49 | },
50 | "license": "MIT"
51 | }
52 |
--------------------------------------------------------------------------------
/packages/styletron-react/src/dev-tool.ts:
--------------------------------------------------------------------------------
1 | /* eslint-env browser */
2 | /* global module */
3 |
4 | export function addDebugMetadata(instance, stackIndex) {
5 | // @ts-expect-error todo: stacktrace does not exist on error (non standard browser?)
6 | const {stack, stacktrace, message} = new Error("stacktrace source");
7 | instance.debug = {
8 | stackInfo: {stack, stacktrace, message},
9 | stackIndex: stackIndex,
10 | };
11 | }
12 |
13 | // DEVTOOLS SETUP
14 | type StyletronStyles = {
15 | classes?: any;
16 | styles?: any;
17 | extends?: any;
18 | };
19 |
20 | export const setupDevtoolsExtension = () => {
21 | const atomicMap = {};
22 | const extensionsMap = new Map();
23 | const stylesMap = new Map();
24 | const getStyles: (className: string) => StyletronStyles = className => {
25 | const styles: StyletronStyles = {};
26 | if (typeof className !== "string") {
27 | return styles;
28 | }
29 | if (stylesMap.has(className)) {
30 | styles.styles = stylesMap.get(className);
31 | const classList = className.split(" ");
32 | if (classList.length) {
33 | const classes = {};
34 | classList.forEach(singleClassName => {
35 | classes[singleClassName] = atomicMap[singleClassName];
36 | });
37 | styles.classes = classes;
38 | }
39 | if (extensionsMap.has(className)) {
40 | const extension = extensionsMap.get(className);
41 | styles.extends = extension;
42 | }
43 | return styles;
44 | }
45 | };
46 | window.__STYLETRON_DEVTOOLS__ = {
47 | atomicMap,
48 | extensionsMap,
49 | stylesMap,
50 | getStyles,
51 | };
52 | };
53 |
54 | // todo: export debug engine interface
55 | export class BrowserDebugEngine {
56 | private worker: any;
57 | private counter: number;
58 | constructor(worker?) {
59 | if (!worker) {
60 | const workerBlob = new Blob(
61 | [
62 | `importScripts("https://unpkg.com/css-to-js-sourcemap-worker@2.0.5/worker.js")`,
63 | ],
64 | {type: "application/javascript"},
65 | );
66 | worker = new Worker(URL.createObjectURL(workerBlob));
67 | worker.postMessage({
68 | id: "init_wasm",
69 | url: "https://unpkg.com/css-to-js-sourcemap-worker@2.0.5/mappings.wasm",
70 | });
71 | worker.postMessage({
72 | id: "set_render_interval",
73 | interval: 120,
74 | });
75 | if (module.hot) {
76 | module.hot.addStatusHandler(status => {
77 | if (status === "dispose") {
78 | worker.postMessage({id: "invalidate"});
79 | }
80 | });
81 | }
82 | }
83 | this.worker = worker;
84 | this.counter = 0;
85 | this.worker.onmessage = msg => {
86 | const {id, css} = msg.data;
87 | if (id === "render_css" && css) {
88 | const style = document.createElement("style");
89 | style.appendChild(document.createTextNode(css));
90 | document.head.appendChild(style);
91 | }
92 | };
93 | }
94 |
95 | debug({stackIndex, stackInfo}) {
96 | const className = `__debug-${this.counter++}`;
97 | this.worker.postMessage({
98 | id: "add_mapped_class",
99 | className,
100 | stackInfo,
101 | stackIndex,
102 | });
103 | return className;
104 | }
105 | }
106 |
107 | // todo: export debug engine interface
108 | export class NoopDebugEngine {
109 | debug(): undefined {
110 | return;
111 | }
112 | }
113 |
114 | declare var __BROWSER__: boolean;
115 | export const DebugEngine = __BROWSER__ ? BrowserDebugEngine : NoopDebugEngine;
116 |
--------------------------------------------------------------------------------
/packages/styletron-react/src/types.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import type {ComponentType} from "react";
3 | import type {StyleObject} from "styletron-standard";
4 |
5 | export type AssignmentCommutativeReducerContainer = {
6 | assignmentCommutative: true;
7 | reducer: (a: StyleObject) => StyleObject;
8 | style: StyleObject;
9 | factory: (a: StyleObject) => AssignmentCommutativeReducerContainer;
10 | };
11 |
12 | export type NonAssignmentCommutativeReducerContainer = {
13 | assignmentCommutative: false;
14 | reducer: (b: StyleObject, a: any) => StyleObject;
15 | };
16 |
17 | export type ReducerContainer =
18 | | AssignmentCommutativeReducerContainer
19 | | NonAssignmentCommutativeReducerContainer;
20 |
21 | // TODO: more precise types
22 | export type Styletron = {
23 | reducers: Array<ReducerContainer>;
24 | base: any;
25 | driver: any;
26 | name?: string;
27 | wrapper: any;
28 | getInitialStyle: any;
29 | ext?: {
30 | name?: string | null;
31 | base: any;
32 | getInitialStyle: any;
33 | with: any;
34 | };
35 | debug?: {
36 | stackIndex: number;
37 | stackInfo: {
38 | stack: any;
39 | stacktrace: any;
40 | message: any;
41 | };
42 | };
43 | };
44 |
45 | export type StyletronProps<Props = {}> = Partial<{
46 | $style: StyleObject | ((props: Props) => StyleObject);
47 | $as: ComponentType<any> | keyof JSX.IntrinsicElements;
48 | className: string;
49 | /** @deprecated */
50 | $ref: Props extends {ref?: infer T} ? T : React.Ref<any>;
51 | ref: Props extends {ref?: infer T} ? T : React.Ref<any>;
52 | }>;
53 |
54 | type BaseProps<P extends {}> = P & {
55 | $style?: StyleObject | ((props: P) => StyleObject);
56 | className?: string;
57 | };
58 |
59 | type AddStyletronRef<P extends {ref: any}> = P extends {ref: infer R}
60 | ? P & {
61 | /** @deprecated */
62 | $ref?: R;
63 | }
64 | : P;
65 |
66 | type OverrideProps<D extends React.ElementType, P extends {}> = BaseProps<P> &
67 | Omit<AddStyletronRef<React.ComponentProps<D>>, keyof BaseProps<P>>;
68 |
69 | export interface StyletronComponent<D extends React.ElementType, P extends {}> {
70 | <C extends React.ElementType = D>(
71 | props: {
72 | $as?: C;
73 | } & OverrideProps<C, P>,
74 | ): JSX.Element;
75 | __STYLETRON__: any;
76 | displayName?: string;
77 | }
78 |
79 | export type StyledFn = {
80 | <T extends React.ElementType, Props extends {}>(
81 | component: T,
82 | style: StyleObject | ((props: Props) => StyleObject),
83 | ): StyletronComponent<T, Props>;
84 | };
85 |
86 | export type WithStyleFn = {
87 | <Base extends StyletronComponent<any, any>, Props = {}>(
88 | component: Base,
89 | style: StyleObject | ((props: Props) => StyleObject),
90 | ): Base extends StyletronComponent<infer D, infer P>
91 | ? StyletronComponent<D, P & Props>
92 | : never;
93 | };
94 |
95 | export type WithTransformFn = <
96 | Base extends StyletronComponent<any, any>,
97 | Props,
98 | >(
99 | component: Base,
100 | style: (style: StyleObject, props: Props) => StyleObject,
101 | ) => Base extends StyletronComponent<infer D, infer P>
102 | ? StyletronComponent<D, P & Props>
103 | : never;
104 |
105 | export type WithWrapperFn = <Base extends StyletronComponent<any, any>, Props>(
106 | component: Base,
107 | wrapper: (
108 | component: Base,
109 | ) => ComponentType<Props & React.ComponentProps<Base>>,
110 | ) => Base extends StyletronComponent<infer D, infer P>
111 | ? StyletronComponent<D, P & Props>
112 | : never;
113 |
--------------------------------------------------------------------------------
/packages/styletron-react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "./lib",
5 | "rootDir": "./src"
6 | },
7 | "include": [
8 | "./src/**/*"
9 | ],
10 | "references": [
11 | {
12 | "path": "../styletron-standard"
13 | }
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/packages/styletron-standard/README.md:
--------------------------------------------------------------------------------
1 | # styletron-standard
2 |
3 | [![npm version][npm-badge]][npm-href] [![dependencies status][deps-badge]][deps-href]
4 |
5 | Opinionated, standard interfaces for Styletron.
6 |
7 | **Check our documentation at [styletron.org](https://www.styletron.org)**.
8 |
9 | ## Installation
10 |
11 | ```
12 | yarn add styletron-standard
13 | ```
14 |
15 | ## API
16 |
17 | ### Style object interface
18 |
19 | ```js
20 | import type { StyleObject } from "styletron-standard";
21 | ```
22 |
23 | `styletron-standard` defines a specific style object interface (along with corresponding Flow type definitions).
24 |
25 | ### Engine interface
26 |
27 | ```js
28 | import type { StandardEngine } from "styletron-standard";
29 | ```
30 |
31 | `styletron-standard` also defines a standard engine interface.
32 |
33 | ```js
34 | interface StandardEngine {
35 | renderStyle,
36 | renderKeyframes,
37 | renderFontFace,
38 | };
39 | ```
40 |
41 | ### Driver
42 |
43 | ```js
44 | import type { StandardEngine } from "styletron-standard";
45 | ```
46 |
47 | [deps-badge]: https://david-dm.org/rtsao/styletron-standard.svg
48 | [deps-href]: https://david-dm.org/rtsao/styletron-standard
49 | [npm-badge]: https://badge.fury.io/js/styletron-standard.svg
50 | [npm-href]: https://www.npmjs.com/package/styletron-standard
51 |
--------------------------------------------------------------------------------
/packages/styletron-standard/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styletron-standard",
3 | "version": "3.1.0",
4 | "description": "Standard interfaces for Styletron",
5 | "author": "Ryan Tsao <ryan.j.tsao@gmail.com>",
6 | "repository": "styletron/styletron",
7 | "sideEffects": false,
8 | "files": [
9 | "dist-browser-cjs",
10 | "dist-browser-esm",
11 | "dist-node-cjs",
12 | "dist-node-esm",
13 | "src",
14 | "!**/__tests__",
15 | "lib"
16 | ],
17 | "main": "./dist-node-cjs/index.js",
18 | "module": "./dist-node-esm/index.js",
19 | "types": "./lib/index.d.ts",
20 | "browser": {
21 | "./dist-node-cjs/index.js": "./dist-browser-cjs/index.js",
22 | "./dist-node-esm/index.js": "./dist-browser-esm/index.js"
23 | },
24 | "scripts": {
25 | "build": "cup build --skip-flow && cp ./src/index.js.flow ./dist-node-cjs/",
26 | "test": "echo OK",
27 | "prepublish": "npm run build"
28 | },
29 | "dependencies": {
30 | "@rtsao/csstype": "2.6.5-forked.0",
31 | "csstype": "^3.0.0",
32 | "inline-style-prefixer": "^5.1.0"
33 | },
34 | "devDependencies": {
35 | "create-universal-package": "^4.3.0"
36 | },
37 | "license": "MIT"
38 | }
39 |
--------------------------------------------------------------------------------
/packages/styletron-standard/src/index.js.flow:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import type {
4 | StandardProperties,
5 | VendorProperties,
6 | ObsoleteProperties,
7 | SvgProperties,
8 | AnimationNameProperty as CTAnimationNameProperty,
9 | FontFamilyProperty as CTFontFamilyProperty,
10 | FontFace as CTFontFace,
11 | } from "@rtsao/csstype";
12 |
13 | export type KeyframesObject = {
14 | from?: Properties,
15 | to?: Properties,
16 | [string]: Properties,
17 | };
18 |
19 | type AnimationNameProperty = CTAnimationNameProperty | KeyframesObject;
20 |
21 | export type FontFaceObject = CTFontFace;
22 |
23 | type FontFamilyProperty = CTFontFamilyProperty | FontFaceObject;
24 |
25 | type TLength = string | 0;
26 |
27 | export type Properties = {
28 | ...StandardProperties<TLength>,
29 | ...VendorProperties<TLength>,
30 | ...ObsoleteProperties<TLength>,
31 | ...SvgProperties<TLength>,
32 | animationName?: AnimationNameProperty,
33 | fontFamily?: FontFamilyProperty | FontFamilyProperty[],
34 | MozAnimationName?: AnimationNameProperty,
35 | WebkitAnimationName?: AnimationNameProperty,
36 | OAnimationName?: AnimationNameProperty,
37 | };
38 |
39 |
40 | // Note: $Shape is needed to make polymorphic withStyle refinements work correctly
41 | // It seems functions satisfy this type without $Shape
42 | // See: https://github.com/facebook/flow/issues/6784
43 | //
44 | //
45 | //
46 | //
47 | //
48 | //
49 | export type StyleObject = $Shape<{
50 | ...Properties,
51 | [string]: StyleObject, // Unrecognized properties are assumed to be media queries or pseudo selectors w/ nested style object. See: https://github.com/styletron/styletron-standard
52 | }>;
53 |
54 | export interface StandardEngine {
55 | renderStyle(style: StyleObject): string;
56 | renderKeyframes(keyframes: KeyframesObject): string;
57 | renderFontFace(fontFace: FontFaceObject): string;
58 | }
59 |
60 | declare export function driver(style: StyleObject, styletron: StandardEngine): string;
61 |
62 | declare export function getInitialStyle(): StyleObject;
63 |
64 | declare export function renderDeclarativeRules(
65 | style: StyleObject,
66 | styletron: StandardEngine,
67 | ): StyleObject;
68 |
--------------------------------------------------------------------------------
/packages/styletron-standard/src/index.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | Properties,
3 | FontFace as FontFaceObject,
4 | KeyframesObject,
5 | } from "./style-types";
6 |
7 | export type {FontFaceObject, KeyframesObject};
8 |
9 | export type StyleObject = Properties & {
10 | [key in string]: Properties[keyof Properties] | StyleObject;
11 | };
12 |
13 | export interface StandardEngine {
14 | renderStyle(style: StyleObject): string;
15 | renderKeyframes(keyframes: KeyframesObject): string;
16 | renderFontFace(fontFace: FontFaceObject): string;
17 | }
18 |
19 | export function driver(style: StyleObject, styletron: StandardEngine): string {
20 | const tx = renderDeclarativeRules(style, styletron);
21 | return styletron.renderStyle(tx);
22 | }
23 |
24 | export function getInitialStyle(): StyleObject {
25 | return {};
26 | }
27 |
28 | export function renderDeclarativeRules(
29 | style: StyleObject,
30 | styletron: StandardEngine,
31 | ) {
32 | for (const key in style) {
33 | const val = style[key];
34 | if (key === "animationName" && typeof val !== "string") {
35 | style.animationName = styletron.renderKeyframes(val as any);
36 | continue;
37 | }
38 | if (key === "fontFamily" && typeof val !== "string") {
39 | if (Array.isArray(val)) {
40 | let result = "";
41 | for (const font of val) {
42 | if (typeof font === "object") {
43 | result += `${styletron.renderFontFace(font as any)},`;
44 | } else if (typeof font === "string") {
45 | result += `${font},`;
46 | }
47 | }
48 | style.fontFamily = result.slice(0, -1);
49 | continue;
50 | } else if (val === void 0) {
51 | continue;
52 | } else {
53 | style.fontFamily = styletron.renderFontFace(val as any);
54 | continue;
55 | }
56 | }
57 | if (typeof val === "object" && val !== null) {
58 | renderDeclarativeRules(val as StyleObject, styletron);
59 | }
60 | }
61 | return style;
62 | }
63 |
--------------------------------------------------------------------------------
/packages/styletron-standard/src/style-types.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | StandardProperties,
3 | VendorProperties,
4 | ObsoleteProperties,
5 | SvgProperties,
6 | Property,
7 | AtRule,
8 | } from "csstype";
9 |
10 | export interface KeyframesPercentageObject {
11 | [key: string]: Properties;
12 | }
13 |
14 | export type KeyframesObject = KeyframesPercentageObject & {
15 | from?: Properties;
16 | to?: Properties;
17 | };
18 |
19 | export type AnimationNameProperty = Property.AnimationName | KeyframesObject;
20 |
21 | export type FontFace = AtRule.FontFace;
22 |
23 | export type FontFamilyProperty = Property.FontFamily | FontFace;
24 |
25 | type TLength = string | 0;
26 | export type Properties = {
27 | animationName?: AnimationNameProperty;
28 | fontFamily?: FontFamilyProperty | FontFamilyProperty[];
29 | MozAnimationName?: AnimationNameProperty;
30 | WebkitAnimationName?: AnimationNameProperty;
31 | OAnimationName?: AnimationNameProperty;
32 | } & Omit<
33 | StandardProperties<TLength> &
34 | VendorProperties<TLength> &
35 | ObsoleteProperties<TLength> &
36 | SvgProperties<TLength>,
37 | | "animationName"
38 | | "fontFamily"
39 | | "MozAnimationName"
40 | | "WebkitAnimationName"
41 | | "OAnimationName"
42 | >;
43 |
--------------------------------------------------------------------------------
/packages/styletron-standard/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "./lib",
5 | "rootDir": "./src"
6 | },
7 | "include": [
8 | "./src/**/*"
9 | ],
10 | "references": [
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "typescript-type-tests",
3 | "private": true,
4 | "version": "0.0.5",
5 | "license": "MIT",
6 | "scripts": {
7 | "test": "tsc"
8 | },
9 | "dependencies": {
10 | "styletron-react": "^6.1.1",
11 | "styletron-standard": "^3.1.0"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/component-base.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled, withStyle} from "styletron-react";
3 |
4 | class Foo extends React.Component<{
5 | foo: "foo";
6 | }> {}
7 |
8 | const Bar = styled(Foo, (_props: {bar: "bar"}) => ({
9 | color: "red",
10 | }));
11 |
12 | // @ts-expect-error
13 | <Bar bar="bar" />; // Missing foo
14 | // @ts-expect-error
15 | <Bar foo="notfoo" bar="bar" />; // Wrong foo
16 | // @ts-expect-error
17 | <Bar foo="foo" />; // Missing bar
18 | // @ts-expect-error
19 | <Bar foo="foo" bar="notbar" />; // Wrong bar
20 |
21 | <Bar foo="foo" bar="bar" />;
22 |
23 | const Baz = withStyle(Bar, (_props: {baz: "baz"}) => ({color: "red"}));
24 |
25 | // @ts-expect-error
26 | <Baz bar="bar" baz="baz" />; // Missing foo
27 | // @ts-expect-error
28 | <Baz foo="notfoo" bar="bar" baz="baz" />; // Wrong foo
29 | // @ts-expect-error
30 | <Baz foo="foo" baz="baz" />; // Missing bar
31 | // @ts-expect-error
32 | <Baz foo="foo" bar="notbar" baz="baz" />; // Wrong bar
33 | // @ts-expect-error
34 | <Baz foo="foo" bar="bar" />; // Missing baz
35 | // @ts-expect-error
36 | <Baz foo="foo" bar="bar" baz="notbaz" />; // Wrong baz
37 |
38 | <Baz foo="foo" bar="bar" baz="baz" />;
39 |
40 | const Qux = withStyle(Baz, (_props: {qux: "qux"}) => ({color: "red"}));
41 |
42 | // @ts-expect-error
43 | <Qux bar="bar" baz="baz" qux="qux" />; // Missing foo
44 | // @ts-expect-error
45 | <Qux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
46 | // @ts-expect-error
47 | <Qux foo="foo" baz="baz" qux="qux" />; // Missing bar
48 | // @ts-expect-error
49 | <Qux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
50 | // @ts-expect-error
51 | <Qux foo="foo" bar="bar" qux="qux" />; // Missing baz
52 | // @ts-expect-error
53 | <Qux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
54 | // @ts-expect-error
55 | <Qux foo="foo" bar="bar" baz="baz" />; // Missing qux
56 | // @ts-expect-error
57 | <Qux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
58 |
59 | <Qux foo="foo" bar="bar" baz="baz" qux="qux" />;
60 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/component-override.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled} from "styletron-react";
3 |
4 | const Button = styled("button", (_props: {foo: "foo"}) => ({color: "red"}));
5 |
6 | const buttonRef = React.useRef<HTMLButtonElement>();
7 |
8 | <Button
9 | ref={buttonRef}
10 | foo={"foo"}
11 | onClick={e => {
12 | const element: HTMLButtonElement = e.currentTarget;
13 | }}
14 | />;
15 |
16 | const anchorRef = React.useRef<HTMLAnchorElement>();
17 |
18 | <Button
19 | $as={"a"}
20 | foo={"foo"}
21 | href={"http://google.com"}
22 | onClick={e => {
23 | const anchorRef: HTMLAnchorElement = e.currentTarget;
24 | }}
25 | />;
26 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/custom-styled.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {createStyled} from "styletron-react";
3 | import {driver, getInitialStyle} from "styletron-standard";
4 |
5 | const styled = createStyled({
6 | driver,
7 | getInitialStyle,
8 | wrapper: StyledComponent => props =>
9 | (
10 | <div>
11 | <StyledComponent {...props} />
12 | </div>
13 | ),
14 | });
15 |
16 | const Foo = styled("div", (_props: {foo: "foo"}) => ({color: "red"}));
17 |
18 | <Foo foo="foo" />;
19 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/exact-props.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled} from "styletron-react";
3 |
4 | const MyComponent: React.ComponentType<{
5 | foo: 42;
6 | }> = _props => {
7 | return null;
8 | };
9 |
10 | const MyStyledComponent = styled(MyComponent, {color: "red"});
11 |
12 | <MyStyledComponent foo={42} />;
13 |
14 | // @ts-expect-error
15 | <MyStyledComponent foo={42} invalidProp={42} />; // Should fail, not in props
16 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/exporting.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled, withStyle} from "styletron-react";
3 |
4 | /*
5 | All exports must have annotated generics
6 | */
7 |
8 | export const Foo = styled<
9 | "div",
10 | {
11 | foo: "foo";
12 | }
13 | >("div", (_props: {foo: "foo"}) => ({
14 | color: "red",
15 | }));
16 |
17 | // @ts-expect-error
18 | <Foo />; // Missing foo
19 |
20 | // @ts-expect-error
21 | <Foo foo="notfoo" />; // Wrong foo
22 |
23 | <Foo foo="foo" />;
24 |
25 | export const Bar = withStyle<
26 | typeof Foo,
27 | {
28 | bar: "bar";
29 | }
30 | >(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
31 |
32 | // @ts-expect-error
33 | <Bar bar="bar" />; // Missing foo
34 | // @ts-expect-error
35 | <Bar foo="notfoo" bar="bar" />; // Wrong foo
36 | // @ts-expect-error
37 | <Bar foo="foo" />; // Missing bar
38 | // @ts-expect-error
39 | <Bar foo="foo" bar="notbar" />; // Wrong bar
40 |
41 | <Bar foo="foo" bar="bar" />;
42 |
43 | export const Baz = withStyle<
44 | typeof Bar,
45 | {
46 | baz: "baz";
47 | }
48 | >(Bar, (_props: {baz: "baz"}) => ({color: "red"}));
49 |
50 | // @ts-expect-error
51 | <Baz bar="bar" baz="baz" />; // Missing foo
52 | // @ts-expect-error
53 | <Baz foo="notfoo" bar="bar" baz="baz" />; // Wrong foo
54 | // @ts-expect-error
55 | <Baz foo="foo" baz="baz" />; // Missing bar
56 | // @ts-expect-error
57 | <Baz foo="foo" bar="notbar" baz="baz" />; // Wrong bar
58 | // @ts-expect-error
59 | <Baz foo="foo" bar="bar" />; // Missing baz
60 | // @ts-expect-error
61 | <Baz foo="foo" bar="bar" baz="notbaz" />; // Wrong baz
62 |
63 | <Baz foo="foo" bar="bar" baz="baz" />;
64 |
65 | export const Qux = withStyle<
66 | typeof Baz,
67 | {
68 | qux: "qux";
69 | }
70 | >(Baz, (_props: {qux: "qux"}) => ({color: "red"}));
71 |
72 | // @ts-expect-error
73 | <Qux bar="bar" baz="baz" qux="qux" />; // Missing foo
74 | // @ts-expect-error
75 | <Qux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
76 | // @ts-expect-error
77 | <Qux foo="foo" baz="baz" qux="qux" />; // Missing bar
78 | // @ts-expect-error
79 | <Qux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
80 | // @ts-expect-error
81 | <Qux foo="foo" bar="bar" qux="qux" />; // Missing baz
82 | // @ts-expect-error
83 | <Qux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
84 | // @ts-expect-error
85 | <Qux foo="foo" bar="bar" baz="baz" />; // Missing qux
86 | // @ts-expect-error
87 | <Qux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
88 |
89 | <Qux foo="foo" bar="bar" baz="baz" qux="qux" />;
90 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/importing.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {Foo, Bar, Baz, Qux} from "./exporting";
3 |
4 | // @ts-expect-error
5 | <Foo />; // Missing foo
6 |
7 | // @ts-expect-error
8 | <Foo foo="notfoo" />; // Wrong foo
9 |
10 | <Foo foo="foo" />;
11 |
12 | // @ts-expect-error
13 | <Bar bar="bar" />; // Missing foo
14 | // @ts-expect-error
15 | <Bar foo="notfoo" bar="bar" />; // Wrong foo
16 | // @ts-expect-error
17 | <Bar foo="foo" />; // Missing bar
18 | // @ts-expect-error
19 | <Bar foo="foo" bar="notbar" />; // Wrong bar
20 |
21 | <Bar foo="foo" bar="bar" />;
22 |
23 | // @ts-expect-error
24 | <Baz bar="bar" baz="baz" />; // Missing foo
25 | // @ts-expect-error
26 | <Baz foo="notfoo" bar="bar" baz="baz" />; // Wrong foo
27 | // @ts-expect-error
28 | <Baz foo="foo" baz="baz" />; // Missing bar
29 | // @ts-expect-error
30 | <Baz foo="foo" bar="notbar" baz="baz" />; // Wrong bar
31 | // @ts-expect-error
32 | <Baz foo="foo" bar="bar" />; // Missing baz
33 | // @ts-expect-error
34 | <Baz foo="foo" bar="bar" baz="notbaz" />; // Wrong baz
35 |
36 | <Baz foo="foo" bar="bar" baz="baz" />;
37 |
38 | // @ts-expect-error
39 | <Qux bar="bar" baz="baz" qux="qux" />; // Missing foo
40 | // @ts-expect-error
41 | <Qux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
42 | // @ts-expect-error
43 | <Qux foo="foo" baz="baz" qux="qux" />; // Missing bar
44 | // @ts-expect-error
45 | <Qux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
46 | // @ts-expect-error
47 | <Qux foo="foo" bar="bar" qux="qux" />; // Missing baz
48 | // @ts-expect-error
49 | <Qux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
50 | // @ts-expect-error
51 | <Qux foo="foo" bar="bar" baz="baz" />; // Missing qux
52 | // @ts-expect-error
53 | <Qux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
54 |
55 | <Qux foo="foo" bar="bar" baz="baz" qux="qux" />;
56 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/inferred-deep-composition-no-usage.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled, withStyle} from "styletron-react";
3 |
4 | // Note: explicit generic annotation is here because this is not inferred correctly
5 | const Foo = styled<
6 | "div",
7 | {
8 | foo: "foo";
9 | }
10 | >("div", (_props: {foo: "foo"}) => ({
11 | color: "red",
12 | }));
13 | const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
14 | const Baz = withStyle(Bar, (_props: {baz: "baz"}) => ({color: "red"}));
15 | const Qux = withStyle(Baz, (_props: {qux: "qux"}) => ({color: "red"}));
16 |
17 | // @ts-expect-error
18 | <Qux bar="bar" baz="baz" qux="qux" />; // Missing foo
19 | // @ts-expect-error
20 | <Qux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
21 | // @ts-expect-error
22 | <Qux foo="foo" baz="baz" qux="qux" />; // Missing bar
23 | // @ts-expect-error
24 | <Qux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
25 | // @ts-expect-error
26 | <Qux foo="foo" bar="bar" qux="qux" />; // Missing baz
27 | // @ts-expect-error
28 | <Qux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
29 | // @ts-expect-error
30 | <Qux foo="foo" bar="bar" baz="baz" />; // Missing qux
31 | // @ts-expect-error
32 | <Qux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
33 |
34 | <Qux foo="foo" bar="bar" baz="baz" qux="qux" />;
35 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/inferred-deep-composition.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled, withStyle, withWrapper} from "styletron-react";
3 |
4 | // Note: explicit generic annotation is here because this is not inferred correctly
5 | const Foo = styled<
6 | "div",
7 | {
8 | foo: "foo";
9 | }
10 | >("div", (_props: {foo: "foo"}) => ({
11 | color: "red",
12 | }));
13 |
14 | // @ts-expect-error
15 | <Foo />; // Missing foo
16 |
17 | // @ts-expect-error
18 | <Foo foo="notfoo" />; // Wrong foo
19 |
20 | <Foo foo="foo" />;
21 |
22 | const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
23 |
24 | // @ts-expect-error
25 | <Bar bar="bar" />; // Missing foo
26 | // @ts-expect-error
27 | <Bar foo="notfoo" bar="bar" />; // Wrong foo
28 | // @ts-expect-error
29 | <Bar foo="foo" />; // Missing bar
30 | // @ts-expect-error
31 | <Bar foo="foo" bar="notbar" />; // Wrong bar
32 |
33 | <Bar foo="foo" bar="bar" />;
34 |
35 | const Baz = withStyle(Bar, (_props: {baz: "baz"}) => ({color: "red"}));
36 |
37 | // @ts-expect-error
38 | <Baz bar="bar" baz="baz" />; // Missing foo
39 | // @ts-expect-error
40 | <Baz foo="notfoo" bar="bar" baz="baz" />; // Wrong foo
41 | // @ts-expect-error
42 | <Baz foo="foo" baz="baz" />; // Missing bar
43 | // @ts-expect-error
44 | <Baz foo="foo" bar="notbar" baz="baz" />; // Wrong bar
45 | // @ts-expect-error
46 | <Baz foo="foo" bar="bar" />; // Missing baz
47 | // @ts-expect-error
48 | <Baz foo="foo" bar="bar" baz="notbaz" />; // Wrong baz
49 |
50 | <Baz foo="foo" bar="bar" baz="baz" />;
51 |
52 | const Qux = withStyle(Baz, (_props: {qux: "qux"}) => ({color: "red"}));
53 |
54 | // @ts-expect-error
55 | <Qux bar="bar" baz="baz" qux="qux" />; // Missing foo
56 | // @ts-expect-error
57 | <Qux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
58 | // @ts-expect-error
59 | <Qux foo="foo" baz="baz" qux="qux" />; // Missing bar
60 | // @ts-expect-error
61 | <Qux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
62 | // @ts-expect-error
63 | <Qux foo="foo" bar="bar" qux="qux" />; // Missing baz
64 | // @ts-expect-error
65 | <Qux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
66 | // @ts-expect-error
67 | <Qux foo="foo" bar="bar" baz="baz" />; // Missing qux
68 | // @ts-expect-error
69 | <Qux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
70 |
71 | <Qux foo="foo" bar="bar" baz="baz" qux="qux" />;
72 |
73 | // typescript does not infer types from usages
74 | // unlike for flow - type for wrapper argumeent needs to be specified explicitly
75 | const WrappedQux = withWrapper<typeof Qux, React.ComponentProps<typeof Qux>>(
76 | Qux,
77 | StyledComponent => props =>
78 | (
79 | <div>
80 | <StyledComponent {...props} />
81 | </div>
82 | ),
83 | );
84 |
85 | // @ts-expect-error
86 | <WrappedQux bar="bar" baz="baz" qux="qux" />; // Missing foo
87 | // @ts-expect-error
88 | <WrappedQux foo="notfoo" bar="bar" baz="baz" qux="qux" />; // Wrong foo
89 | // @ts-expect-error
90 | <WrappedQux foo="foo" baz="baz" qux="qux" />; // Missing bar
91 | // @ts-expect-error
92 | <WrappedQux foo="foo" bar="notbar" baz="baz" qux="qux" />; // Wrong bar
93 | // @ts-expect-error
94 | <WrappedQux foo="foo" bar="bar" qux="qux" />; // Missing baz
95 | // @ts-expect-error
96 | <WrappedQux foo="foo" bar="bar" baz="notbaz" qux="qux" />; // Wrong baz
97 | // @ts-expect-error
98 | <WrappedQux foo="foo" bar="bar" baz="baz" />; // Missing qux
99 | // @ts-expect-error
100 | <WrappedQux foo="foo" bar="bar" baz="baz" qux="notqux" />; // Wrong qux
101 |
102 | <WrappedQux foo="foo" bar="bar" baz="baz" qux="qux" />;
103 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/inferred-static.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled, withStyle} from "styletron-react";
3 |
4 | const Foo = styled("div", {
5 | color: "red",
6 | gridTemplateColumns: "repeat(2, 1fr)",
7 | gridGap: "24px",
8 | "@media (min-width: 930px)": {
9 | gridTemplateColumns: "repeat(3, 1fr)",
10 | },
11 | "@media (min-width: 1120px)": {
12 | gridTemplateColumns: "repeat(4, 1fr)",
13 | },
14 | });
15 |
16 | <Foo />; // Foo usage is necessary for inference
17 |
18 | const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
19 |
20 | // @ts-expect-error
21 | <Bar />; // Missing bar
22 |
23 | // @ts-expect-error
24 | <Bar bar="notbar" />; // Wrong bar
25 |
26 | <Bar bar="bar" />;
27 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/inferred-styled.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled, withStyle} from "styletron-react";
3 |
4 | const Foo = styled("div", (_props: {foo: "foo"}) => ({color: "red"}));
5 |
6 | <Foo foo="foo" />; // Foo usage is necessary for inference
7 |
8 | const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
9 |
10 | // @ts-expect-error
11 | <Bar />; // Missing foo and bar
12 | // @ts-expect-error
13 | <Bar bar="bar" />; // Missing foo
14 | // @ts-expect-error
15 | <Bar foo="foo" />; // Missing bar
16 | // @ts-expect-error
17 | <Bar foo={12345} bar="bar" />; // Wrong foo. Note: inferred type is string instead of "foo" literal
18 | // @ts-expect-error
19 | <Bar foo="a string" bar="notbar" />; // Wrong bar
20 |
21 | <Bar foo="foo" bar="bar" />;
22 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/null-values.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled} from "styletron-react";
3 |
4 | const Foo = styled("div", {
5 | // Using null values was previously supported, albeit erroneously
6 | // So we should continue to support null values in Flow for the time being
7 | zIndex: null,
8 | });
9 |
10 | const Bar = styled("div", {
11 | // zIndex is an optional property, so undefined is allowed as a value by Flow
12 | // Using undefined as a value is also convenient when optionally setting a value
13 | zIndex: void 0,
14 | });
15 |
16 | <Foo />;
17 | <Bar />;
18 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/styled-from-styled.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled} from "styletron-react";
3 |
4 | const Foo = styled("div", (_props: {foo: "foo"}) => ({
5 | color: "red",
6 | }));
7 |
8 | // TODO: this should cause a flow error
9 | const Bar = styled(Foo, (_props: {bar: "bar"}) => ({
10 | color: "red",
11 | }));
12 |
13 | <Bar foo="foo" bar="bar" />;
14 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/with-wrapper-typed.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled, withStyle, withWrapper} from "styletron-react";
3 |
4 | const Foo = styled("div", (props: {foo: "foo"}) => ({
5 | color: props.foo,
6 | }));
7 | const Bar = withWrapper(
8 | Foo,
9 | StyledComponent => (props: {foo: "foo"; bar: "bar"}) =>
10 | (
11 | <div>
12 | <StyledComponent {...props} />
13 | </div>
14 | ),
15 | );
16 |
17 | // @ts-expect-error
18 | <Bar />; // missing foo and bar
19 |
20 | // @ts-expect-error
21 | <Bar foo="foo" />; // missing bar
22 |
23 | // @ts-expect-error
24 | <Bar bar="bar" />; // missing foo
25 |
26 | <Bar foo="foo" bar="bar" />;
27 |
28 | const Baz = withStyle(Bar, (props: {foo: "foo"; bar: "bar"; baz: "baz"}) => ({
29 | color: props.baz,
30 | }));
31 |
32 | // @ts-expect-error
33 | <Baz bar="bar" baz="baz" />; // Missing foo
34 | // @ts-expect-error
35 | <Baz foo="notfoo" bar="bar" baz="baz" />; // Wrong foo
36 | // @ts-expect-error
37 | <Baz foo="foo" baz="baz" />; // Missing bar
38 | // @ts-expect-error
39 | <Baz foo="foo" bar="notbar" baz="baz" />; // Wrong bar
40 | // @ts-expect-error
41 | <Baz foo="foo" bar="bar" />; // Missing baz
42 | // @ts-expect-error
43 | <Baz foo="foo" bar="bar" baz="notbaz" />; // Wrong baz
44 |
45 | <Baz foo="foo" bar="bar" baz="baz" />;
46 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/with-wrapper.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {styled, withWrapper} from "styletron-react";
3 |
4 | const Foo = styled("div", {color: "red"});
5 | const Bar = withWrapper(Foo, StyledComponent => props => (
6 | <div>
7 | <StyledComponent {...props} />
8 | </div>
9 | ));
10 |
11 | <Bar />;
12 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/src/wrong-usage.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 |
3 | import * as React from "react";
4 | import {withStyle} from "styletron-react";
5 |
6 | class Foo extends React.Component<{
7 | foo: "foo";
8 | }> {}
9 |
10 | /*
11 | This causes a Flow error that can't be supressed. But it should cause an error.
12 | */
13 |
14 | // const Bar = withStyle(Foo, (props: {bar: "bar"}) => ({
15 | // color: "red",
16 | // }));
17 |
--------------------------------------------------------------------------------
/packages/typescript-type-tests/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "./lib",
5 | "rootDir": "./src"
6 | },
7 | "include": [
8 | "./src/**/*"
9 | ],
10 | "references": [
11 | {
12 | "path": "../styletron-react"
13 | },
14 | {
15 | "path": "../styletron-standard"
16 | }
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "config:base"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "lib": [
6 | "ESNext",
7 | "DOM"
8 | ],
9 | "jsx": "react",
10 | "declaration": true,
11 | "declarationMap": true,
12 | "emitDeclarationOnly": true,
13 | "composite": true,
14 | "sourceMap": true,
15 | "moduleResolution": "node",
16 | "esModuleInterop": true,
17 | "isolatedModules": true,
18 | "skipLibCheck": true,
19 | "resolveJsonModule": true,
20 | "baseUrl": ".",
21 | "paths": {
22 | "styletron-engine-atomic": [
23 | "./packages/styletron-engine-atomic/src"
24 | ],
25 | "styletron-engine-monolithic": [
26 | "./packages/styletron-engine-monolithic/src"
27 | ],
28 | "styletron-engine-snapshot": [
29 | "./packages/styletron-engine-snapshot/src"
30 | ],
31 | "styletron-react": [
32 | "./packages/styletron-react/src"
33 | ],
34 | "styletron-standard": [
35 | "./packages/styletron-standard/src"
36 | ],
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [
4 | {
5 | "path": "./packages/styletron-engine-atomic"
6 | },
7 | {
8 | "path": "./packages/styletron-engine-monolithic"
9 | },
10 | {
11 | "path": "./packages/styletron-engine-snapshot"
12 | },
13 | {
14 | "path": "./packages/styletron-react"
15 | },
16 | {
17 | "path": "./packages/styletron-standard"
18 | },
19 | {
20 | "path": "./packages/typescript-type-tests"
21 | }
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------