Skip to content

Commit 8c9ab8c

Browse files
MadouMadou
authoredNov 29, 2021
Update pkg jsdoc/json/rule (#947)
* chore: updates jsdoc for react exports * chore: add changeset * chore: corrects jsdoc * chore: updates type for class name component * chore: updates homepages in pkg jsons * chore: adds website to lint rules * chore: adds changeset * chore: makes the readme consistent * chore: resolves code review comments
·
@compiled/webpack-loader@0.19.5@compiled/babel-plugin@0.11.3
1 parent d3e257c commit 8c9ab8c

File tree

23 files changed

+204
-103
lines changed

23 files changed

+204
-103
lines changed
 

‎.changeset/eleven-geckos-grow.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@compiled/eslint-plugin': patch
3+
---
4+
5+
Adds url to lint rules

‎.changeset/pink-apples-appear.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
'@compiled/babel-plugin': patch
3+
'@compiled/babel-plugin-strip-runtime': patch
4+
'@compiled/cli': patch
5+
'@compiled/codemods': patch
6+
'@compiled/css': patch
7+
'@compiled/eslint-plugin': patch
8+
'@compiled/jest': patch
9+
'@compiled/parcel-transformer': patch
10+
'@compiled/react': patch
11+
'@compiled/utils': patch
12+
'@compiled/webpack-loader': patch
13+
---
14+
15+
Update `homepage` and other `package.json` properties

‎.changeset/rare-pillows-warn.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@compiled/react': patch
3+
---
4+
5+
JSDoc descriptions for all exports have been updated, let us know what you think!

‎.changeset/selfish-hounds-do.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@compiled/react': patch
3+
---
4+
5+
`ClassNames` component now has its style prop typed as `CSSProperties` instead of a string map

‎packages/babel-plugin-strip-runtime/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@compiled/babel-plugin-strip-runtime",
33
"version": "0.11.1",
44
"description": "A familiar and performant compile time CSS-in-JS library for React.",
5-
"homepage": "https://compiledcssinjs.com",
5+
"homepage": "https://compiledcssinjs.com/docs/pkg-babel-plugin-strip-runtime",
66
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
77
"repository": {
88
"type": "git",

‎packages/babel-plugin/package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@compiled/babel-plugin",
33
"version": "0.11.1",
44
"description": "A familiar and performant compile time CSS-in-JS library for React.",
5-
"homepage": "https://compiledcssinjs.com",
5+
"homepage": "https://compiledcssinjs.com/docs/pkg-babel-plugin",
66
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
77
"repository": {
88
"type": "git",
@@ -16,8 +16,7 @@
1616
"types": "./dist/index.d.ts",
1717
"files": [
1818
"dist",
19-
"src",
20-
"README.md"
19+
"src"
2120
],
2221
"dependencies": {
2322
"@babel/core": "^7.16.0",

‎packages/cli/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@compiled/cli",
33
"version": "2.1.3",
44
"description": "A familiar and performant compile time CSS-in-JS library for React.",
5-
"homepage": "https://compiledcssinjs.com",
5+
"homepage": "https://compiledcssinjs.com/docs/pkg-cli",
66
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
77
"repository": {
88
"type": "git",

‎packages/codemods/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"name": "@compiled/codemods",
33
"version": "0.3.2",
4-
"description": "Codemods (with JSCodeshift) for Compiled CSS-in-JS.",
4+
"description": "A familiar and performant compile time CSS-in-JS library for React.",
55
"keywords": [
66
"codemod",
77
"compiled",
88
"css-in-js",
99
"typescript"
1010
],
11-
"homepage": "https://compiledcssinjs.com",
11+
"homepage": "https://compiledcssinjs.com/docs/pkg-cli",
1212
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
1313
"repository": {
1414
"type": "git",

‎packages/css/package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@compiled/css",
33
"version": "0.7.1",
44
"description": "A familiar and performant compile time CSS-in-JS library for React.",
5-
"homepage": "https://compiledcssinjs.com",
5+
"homepage": "https://compiledcssinjs.com/docs/pkg-css",
66
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
77
"repository": {
88
"type": "git",
@@ -16,8 +16,7 @@
1616
"types": "./dist/index.d.ts",
1717
"files": [
1818
"dist",
19-
"src",
20-
"README.md"
19+
"src"
2120
],
2221
"dependencies": {
2322
"@compiled/utils": "^0.6.12",

‎packages/eslint-plugin/package.json

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
{
22
"name": "@compiled/eslint-plugin",
33
"version": "0.2.1",
4-
"repository": "https://github.com/atlassian-labs/compiled",
4+
"description": "A familiar and performant compile time CSS-in-JS library for React.",
5+
"homepage": "https://compiledcssinjs.com/docs/pkg-eslint-plugin",
6+
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/atlassian-labs/compiled.git",
10+
"directory": "packages/eslint-plugin"
11+
},
12+
"license": "Apache-2.0",
513
"author": "Atlassian Pty Ltd",
614
"sideEffects": false,
715
"main": "./dist/index.js",

‎packages/eslint-plugin/src/rules/jsx-pragma/index.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ const rule: Rule.RuleModule = {
3131
meta: {
3232
fixable: 'code',
3333
type: 'problem',
34+
docs: {
35+
recommended: true,
36+
url: 'https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/jsx-pragma',
37+
},
3438
messages: {
3539
missingPragma: 'To use the `css` prop you must set the {{ pragma }} pragma.',
3640
preferJsxImportSource:

‎packages/eslint-plugin/src/rules/no-emotion-css/README.md

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
# @compiled/eslint-plugin/emotion-to-compiled
22

33
Ensures usage of the `@compiled/react` library over `@emotion/core` or `@emotion/styled`.
4-
This rule acts as a form of codemod.
4+
The `--fix` option [on the command line] automatically fixes problems reported by this rule.
55

6-
## Examples
7-
8-
👎 Example of **incorrect** code for this rule:
6+
## Fail
97

108
```js
119
import styled from '@emotion/styled';
@@ -24,7 +22,7 @@ import { jsx } from '@emotion/core';
2422
^^^^^^^^^
2523
```
2624

27-
👍 Example of **correct** code for this rule:
25+
## Pass
2826

2927
```js
3028
import { styled } from '@compiled/react';

‎packages/eslint-plugin/src/rules/no-emotion-css/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ const rule: Rule.RuleModule = {
2828
meta: {
2929
fixable: 'code',
3030
type: 'problem',
31+
docs: {
32+
url: 'https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-emotion-css',
33+
},
3134
messages: {
3235
noEmotionCSS: `{{ version }} should not be used use ${COMPILED_IMPORT} instead.`,
3336
},

‎packages/jest/package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@compiled/jest",
33
"version": "0.7.0",
44
"description": "A familiar and performant compile time CSS-in-JS library for React.",
5-
"homepage": "https://compiledcssinjs.com",
5+
"homepage": "https://compiledcssinjs.com/docs/pkg-jest",
66
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
77
"repository": {
88
"type": "git",
@@ -17,8 +17,7 @@
1717
"types": "./dist/index.d.ts",
1818
"files": [
1919
"dist",
20-
"src",
21-
"README.md"
20+
"src"
2221
],
2322
"dependencies": {
2423
"css": "^3.0.0"

‎packages/parcel-transformer/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@compiled/parcel-transformer",
33
"version": "0.6.18",
44
"description": "A familiar and performant compile time CSS-in-JS library for React.",
5-
"homepage": "https://compiledcssinjs.com",
5+
"homepage": "https://compiledcssinjs.com/docs/pkg-parcel-transformer",
66
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
77
"repository": {
88
"type": "git",

‎packages/react/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"styled-components",
99
"typescript"
1010
],
11-
"homepage": "https://compiledcssinjs.com",
11+
"homepage": "https://compiledcssinjs.com/docs/pkg-react",
1212
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
1313
"repository": {
1414
"type": "git",

‎packages/react/src/class-names/index.tsx

+23-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ReactNode } from 'react';
1+
import type { ReactNode, CSSProperties } from 'react';
22

33
import type { BasicTemplateInterpolations, CssFunction } from '../types';
44
import { createSetupError } from '../utils/error';
@@ -8,36 +8,46 @@ export type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFun
88
export interface ClassNamesProps {
99
children: (opts: {
1010
css: (css: CssFunction | CssFunction[], ...interpolations: Interpolations) => string;
11-
style: { [key: string]: string };
11+
style: CSSProperties;
1212
}) => ReactNode;
1313
}
1414

1515
/**
16-
* Use a component where styles are not necessarily tied to an element.
16+
* ## Class names
1717
*
18+
* Use a component where styles are not necessarily used on a JSX element.
19+
* For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).
20+
*
21+
* ### Style with objects
22+
*
23+
* @example
1824
* ```
19-
* // Object CSS
2025
* <ClassNames>
2126
* {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
2227
* </ClassNames>
28+
* ```
2329
*
24-
* // Template literal CSS
30+
* ### Style with template literals
31+
*
32+
* @example
33+
* ```
2534
* <ClassNames>
2635
* {({ css, style }) => children({ className: css`font-size: 12px;` })}
2736
* </ClassNames>
37+
* ```
2838
*
29-
* // Array CSS
39+
* ### Compose styles with arrays
40+
*
41+
* @example
42+
* ```
3043
* <ClassNames>
3144
* {({ css, style }) =>
32-
* children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
45+
* children({ className: css([{ fontSize: 12 }, css`font-size: 12px`]) })}
3346
* </ClassNames>
3447
* ```
35-
*
36-
* For more help, read the docs:
37-
* https://compiledcssinjs.com/docs/api-class-names
38-
*
39-
* @param props
4048
*/
41-
export function ClassNames(_: ClassNamesProps): JSX.Element {
49+
export function ClassNames({ children }: ClassNamesProps): JSX.Element;
50+
51+
export function ClassNames(_props: ClassNamesProps): JSX.Element {
4252
throw createSetupError();
4353
}

‎packages/react/src/css/index.tsx

+26-23
Original file line numberDiff line numberDiff line change
@@ -9,40 +9,43 @@ import type {
99
import { createSetupError } from '../utils/error';
1010

1111
/**
12-
* Create styles that can be re-used between components with a template literal.
12+
* ## CSS
1313
*
14+
* Define styles that are statically typed and useable with other Compiled APIs.
15+
* For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
16+
*
17+
* ### Style with objects
18+
*
19+
* @example
1420
* ```
15-
* css`color: red;`;
21+
* const redText = css({
22+
* color: 'red',
23+
* });
24+
*
25+
* <div css={redText} />
1626
* ```
1727
*
18-
* For more help, read the docs:
19-
* https://compiledcssinjs.com/docs/api-css
28+
* ### Style with template literals
2029
*
21-
* @param css
22-
* @param values
30+
* @example
31+
* ```
32+
* const redText = css`
33+
* color: red;
34+
* `;
35+
*
36+
* <div css={redText} />
37+
* ```
2338
*/
2439
export default function css<T = void>(
25-
_css: TemplateStringsArray,
26-
..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
40+
styles: TemplateStringsArray,
41+
...interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
2742
): CSSProps;
2843

29-
/**
30-
* Create styles that can be re-used between components with an object
31-
*
32-
* ```
33-
* css({ color: 'red' });
34-
* ```
35-
*
36-
* For more help, read the docs:
37-
* https://compiledcssinjs.com/docs/api-css
38-
*
39-
* @param css
40-
*/
41-
export default function css(_css: AnyKeyCssProps<void> | CSSProps): CSSProps;
44+
export default function css(styles: AnyKeyCssProps<void> | CSSProps): CSSProps;
4245

4346
export default function css<T = void>(
44-
_css: TemplateStringsArray | CSSProps,
45-
..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
47+
_styles: TemplateStringsArray | CSSProps,
48+
..._interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
4649
): CSSProps {
4750
throw createSetupError();
4851
}

‎packages/react/src/jsx/jsx-local-namespace.tsx

+32-6
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,42 @@ type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps
44
? string extends TProps['className' & keyof TProps]
55
? {
66
/**
7-
* Tie styles to an element.
7+
* ## CSS prop
88
*
9+
* Style a JSX element.
10+
* For further details [read the API documentation](https://compiledcssinjs.com/docs/api-css-prop).
11+
*
12+
* ### Style with objects
13+
*
14+
* @example
15+
* ```
16+
* import { css } from '@compiled/react';
17+
*
18+
* <div css={css({ fontSize: 12 })} />
19+
* ```
20+
*
21+
* ### Style with template literals
22+
*
23+
* @example
24+
* ```
25+
* import { css } from '@compiled/react';
26+
*
27+
* <div css={css`color: red;`} />
928
* ```
10-
* css={{ fontSize: 12 }} // Object CSS
11-
* css={`font-size: 12px;`} // Template literal CSS
12-
* css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
29+
*
30+
* ### Compose styles with arrays
31+
*
32+
* @example
1333
* ```
34+
* import { css } from '@compiled/react';
1435
*
15-
* For more help, read the docs:
16-
* https://compiledcssinjs.com/docs/api-css-prop
36+
* <div
37+
* css={[
38+
* css({ fontSize: 12 }),
39+
* css`color: red;`,
40+
* ]}
41+
* />
42+
* ```
1743
*/
1844
css?: CssFunction | CssFunction[];
1945
}

‎packages/react/src/keyframes/index.tsx

+24-28
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,14 @@ import { createSetupError } from '../utils/error';
44
export type KeyframeSteps = string | Record<string, CSSProps>;
55

66
/**
7-
* Create keyframes using a tagged template expression:
7+
* ## Keyframes
88
*
9-
* ```
10-
* const fadeOut = keyframes`
11-
* from { opacity: 1; }
12-
* to { opacity: 0; }
13-
* `;
14-
* ```
15-
*
16-
* @param _strings The input string values
17-
* @param _interpolations The arguments used in the expression
18-
*/
19-
export function keyframes(
20-
_strings: TemplateStringsArray,
21-
..._interpolations: BasicTemplateInterpolations[]
22-
): string;
23-
24-
/**
25-
* Create keyframes using:
9+
* Define keyframes to be used in a [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation).
10+
* For further details [read the API documentation](https://compiledcssinjs.com/docs/api-keyframes).
2611
*
27-
* 1. An object expression
12+
* ### Style with objects
2813
*
14+
* @example
2915
* ```
3016
* const fadeOut = keyframes({
3117
* from: {
@@ -35,23 +21,33 @@ export function keyframes(
3521
* opacity: 0,
3622
* },
3723
* });
24+
*
25+
* <div css={{ animation: `${fadeOut} 2s` }} />
3826
* ```
3927
*
40-
* 2. A string
28+
* ### Style with template literals
4129
*
30+
* @example
4231
* ```
43-
* const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
44-
* ```
32+
* const fadeOut = keyframes`
33+
* from {
34+
* opacity: 1;
35+
* }
4536
*
46-
* 3. A template literal
37+
* to {
38+
* opacity: 0;
39+
* }
40+
* `;
4741
*
42+
* <div css={{ animation: `${fadeOut} 2s` }} />
4843
* ```
49-
* const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
50-
* ```
51-
*
52-
* @param _steps The waypoints along the animation sequence
5344
*/
54-
export function keyframes(_steps: KeyframeSteps): string;
45+
export function keyframes(steps: KeyframeSteps): string;
46+
47+
export function keyframes(
48+
strings: TemplateStringsArray,
49+
...interpolations: BasicTemplateInterpolations[]
50+
): string;
5551

5652
export function keyframes(
5753
_stringsOrSteps: TemplateStringsArray | KeyframeSteps,

‎packages/react/src/styled/index.tsx

+35-7
Original file line numberDiff line numberDiff line change
@@ -58,17 +58,45 @@ export interface StyledComponentInstantiator extends StyledComponentMap {
5858
}
5959

6060
/**
61-
* Create a component that ties styles to an element which comes with built-in behavior such as `ref` and `as` prop support.
61+
* ## Styled component
6262
*
63+
* Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support.
64+
* For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled).
65+
*
66+
* ### Style with objects
67+
*
68+
* @example
69+
* ```
70+
* styled.div({
71+
* fontSize: 12,
72+
* });
73+
* ```
74+
*
75+
* ### Style with template literals
76+
*
77+
* @example
6378
* ```
64-
* styled.div`font-size: 12px`; // Template literal CSS
65-
* styled.div({ fontSize: 12 }); // Object CSS
66-
* styled.div([{ fontSize: 12 }, `font-size: 12px;`]) // Array CSS
67-
* styled.div({ fontSize: 12 }, `font-size: 12px`) Multi arguments CSS
79+
* styled.div`
80+
* font-size: 12px
81+
* `;
6882
* ```
6983
*
70-
* For more help, read the docs:
71-
* https://compiledcssinjs.com/docs/api-styled
84+
* ### Compose styles with arrays
85+
*
86+
* @example
87+
* ```
88+
* import { css } from '@compiled/react';
89+
*
90+
* styled.div([
91+
* { fontSize: 12 },
92+
* css`font-size: 12px;`
93+
* ]);
94+
*
95+
* styled.div(
96+
* { fontSize: 12 },
97+
* css`font-size: 12px`
98+
* );
99+
* ```
72100
*/
73101
export const styled: StyledComponentInstantiator = new Proxy(
74102
{},

‎packages/utils/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@
1616
"types": "./dist/index.d.ts",
1717
"files": [
1818
"dist",
19-
"src",
20-
"README.md"
19+
"src"
2120
],
2221
"dependencies": {
2322
"convert-source-map": "^1.8.0",

‎packages/webpack-loader/package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@compiled/webpack-loader",
33
"version": "0.7.3",
44
"description": "A familiar and performant compile time CSS-in-JS library for React.",
5-
"homepage": "https://compiledcssinjs.com",
5+
"homepage": "https://compiledcssinjs.com/docs/pkg-webpack-loader",
66
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
77
"repository": {
88
"type": "git",
@@ -17,8 +17,7 @@
1717
"files": [
1818
"css-loader",
1919
"dist",
20-
"src",
21-
"README.md"
20+
"src"
2221
],
2322
"dependencies": {
2423
"@babel/core": "^7.16.0",

0 commit comments

Comments
 (0)
Please sign in to comment.