Skip to content

Commit

Permalink
Update styling docs (#863)
Browse files Browse the repository at this point in the history
Co-authored-by: Michael Taranto <[email protected]>
  • Loading branch information
mrm007 and michaeltaranto authored Jul 25, 2023
1 parent b8618f9 commit 97464d7
Showing 1 changed file with 23 additions and 4 deletions.
27 changes: 23 additions & 4 deletions docs/docs/styling.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Styling

## vanilla-extract
## Vanilla Extract

The `@vanilla-extract/css` package is not available out of the box so it needs to be installed.

Expand All @@ -14,7 +14,10 @@ Now you can create `.css.ts` files in your project.
// BigBox.css.ts
import { style } from '@vanilla-extract/css';

export const bigBox = style({ width: 500, height: 500 });
export const bigBox = style({
width: 500,
height: 500,
});
```

```tsx
Expand All @@ -30,15 +33,15 @@ See [Vanilla Extract](https://vanilla-extract.style/documentation/getting-starte

## Locally Scoped CSS

(via [CSS Modules](https://github.com/css-modules/css-modules) and [Less](http://lesscss.org/))
(via [CSS Modules](https://github.com/css-modules/css-modules) and [LESS](http://lesscss.org/))

> Support for LESS has been deprecated.
> [Vanilla Extract](#vanilla-extract) is the preferred styling solution supported by sku, and support for LESS will be removed in a future release.
> Consumers are encouraged to migrate to Vanilla Extract at the earliest opportunity.
Import any `.less` file into your Javascript as a `styles` object and use its properties as class names.

For example, given the following Less file:
For example, given the following LESS file:

```less
.exampleWrapper {
Expand All @@ -61,3 +64,19 @@ As of sku v12, [treat] support has been removed in favour of [Vanilla Extract].

[treat]: https://seek-oss.github.io/treat/
[vanilla extract]: #vanilla-extract

## External CSS

CSS from third-party dependencies can be loaded using a side-effect import, e.g.

```tsx
import { SomeComponent } from 'some-package';

import 'some-package/dist/styles.css';

export const MyComponent = () => {
return <SomeComponent>{/* ... */}</SomeComponent>;
};
```

_**NOTE:** This should only be used when importing CSS dependencies from a third-party package in `node_modules`. If you are writing custom CSS, please see the [Vanilla Extract](#vanilla-extract) section above._

0 comments on commit 97464d7

Please sign in to comment.