Skip to content

Commit 0ba13a9

Browse files
author
Brijesh Bittu
committed
Fix lint errors
1 parent 44c81b3 commit 0ba13a9

File tree

3 files changed

+12
-23
lines changed

3 files changed

+12
-23
lines changed

docs/src/content/features/composition.mdx

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ In the above example, the color of the text will be `blue` in both the cases bec
5555

5656
The above example can be extended to imported styles or styled components as well.
5757

58-
5958
```tsx title="Button.jsx"
6059
import { css } from '@pigment-css/react-new';
6160

@@ -92,13 +91,8 @@ const bgBlue = css`
9291
color: blue;
9392
`;
9493

95-
9694
function App() {
97-
return (
98-
<Button className={`${bgBlue}`}>
99-
Click me
100-
</Button>
101-
);
95+
return <Button className={`${bgBlue}`}>Click me</Button>;
10296
}
10397
```
10498

@@ -113,7 +107,7 @@ In the above example, the color of the text will be `blue` because the styles ar
113107
border-radius: 4px;
114108
padding: 8px 16px;
115109
font-size: 14px;
116-
transition: background-color .2s;
110+
transition: background-color 0.2s;
117111
}
118112

119113
.button:hover {
@@ -165,7 +159,7 @@ export const Link = styled.a`
165159
`;
166160
```
167161

168-
Here, the color of text in the `Link` component will be `pink`.
162+
Here, the color of text in the `Link` component will be `pink`.
169163

170164
```tsx title="Heading.jsx"
171165
import { styled } from '@pigment-css/react-new';
@@ -258,4 +252,3 @@ Here, the text color of the element where `linkCls` will be applied will be `bla
258252

259253
> [!NOTE]
260254
> You'll have to add the class selector to the `linkCls`, ie, `.linkCls` instead of just `Link` in the `styled` usage.
261-

docs/src/content/features/styling.mdx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -377,9 +377,7 @@ const VisuallyHidden = styled.div({
377377
});
378378

379379
function App() {
380-
return (
381-
<VisuallyHidden as="span">Hello, world!</VisuallyHidden>
382-
);
380+
return <VisuallyHidden as="span">Hello, world!</VisuallyHidden>;
383381
}
384382
```
385383

@@ -411,4 +409,4 @@ Writing CSS with the `styled` API is the same as writing styles with the [`css`]
411409
> [!NOTE]
412410
> More APIs like `globalCss`, `sx` prop, etc are to be added in subsequent releases.
413411
414-
Head over the the [Theming](/features/theming) page to learn more about how to apply themes with the above APIs.
412+
Head over the the [Theming](/features/theming) page to learn more about how to apply themes with the above APIs.

docs/src/content/overview/integrations.mdx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
# Integrations
22

33
<Subtitle>Learn how to configure your bundler to use Pigment CSS.</Subtitle>
4-
<Meta
5-
name="description"
6-
content="Learn how to configure your bundler to use Pigment CSS."
7-
/>
4+
<Meta name="description" content="Learn how to configure your bundler to use Pigment CSS." />
85

96
## Bundler integrations
107

@@ -22,14 +19,14 @@ All bundler specific configurations follow the same pattern.
2219

2320
1. First import the `default` export from the bundler specific package path and name it as per your bundler conventions -
2421

25-
* Next.js - `@pigment-css/plugin/nextjs`
26-
* Vite - `@pigment-css/plugin/vite`
27-
* Webpack - `@pigment-css/plugin/webpack`
22+
- Next.js - `@pigment-css/plugin/nextjs`
23+
- Vite - `@pigment-css/plugin/vite`
24+
- Webpack - `@pigment-css/plugin/webpack`
2825

2926
and then pass in the Pigment CSS configuration options (if any).
3027

3128
2. After this, import the `@pigment-css/react-new/styles.css` file in the main entry point file of the app. Make sure that this file is only imported once in the app otherwise you will end up with duplicate styles in the final bundle.
32-
This import will be responsible for adding the Pigment CSS layer order as well as injecting the css tokens configured in the [theming](/features/theming) section.
29+
This import will be responsible for adding the Pigment CSS layer order as well as injecting the css tokens configured in the [theming](/features/theming) section.
3330

3431
### Next.js
3532

@@ -142,6 +139,7 @@ import '@pigment-css/react-new/styles.css';
142139
```
143140

144141
> [!TIP]
142+
>
145143
> `pigmentConfig` is an optional argument in all the examples above. If not provided, the default configuration will be used.
146144
147-
Once the bundler is configured, head over to the [Styling](/features/styling) section to learn how to author css with Pigment CSS.
145+
Once the bundler is configured, head over to the [Styling](/features/styling) section to learn how to author css with Pigment CSS.

0 commit comments

Comments
 (0)