Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(directives): avoid requiring quotes in --at-apply causes misun… #3578

Merged
merged 2 commits into from
Mar 3, 2024
Merged

docs(directives): avoid requiring quotes in --at-apply causes misun… #3578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0cb9f32
docs(directives): avoid requiring quotes in `--at-apply` causes misun…
zhangzheheng12345 Feb 25, 2024
6371282
fix(directives): support quoting after `@apply`
zhangzheheng12345 Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions docs/transformers/directives.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,6 @@ To be compatible with vanilla CSS, you can use CSS custom properties to replace
}
```

To use rules with `:`, you will have to quote the value:

```css
.custom-div {
--at-apply: "hover:text-red";
}
```

This feature is enabled by default with a few aliases, that you can configure or disable via:

```js
Expand All @@ -85,6 +77,20 @@ transformerDirectives({
})
```

#### Adding quotes

To use rules with `:`, you will have to quote the whole value:

```css
.custom-div {
--at-apply: "hover:text-red hover:font-bold";
/* or */
@apply 'hover:text-red hover:font-bold';
}
```

Using quotes after `@apply` is optional, to meet the behavior of some formatters.

### `@screen`

The `@screen` directive that allows you to create media queries that reference your breakpoints by name comes from [`theme.breakpoints`](/config/theme).
Expand Down
14 changes: 7 additions & 7 deletions packages/transformer-directives/src/apply.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,19 @@ export async function parseApply({ code, uno, offset, applyVariable }: Transform
const calcOffset = (pos: number) => offset ? pos + offset : pos

let body: string | undefined
if (childNode.type === 'Atrule' && childNode.name === 'apply' && childNode.prelude && childNode.prelude.type === 'Raw') {
if (childNode.type === 'Atrule' && childNode.name === 'apply' && childNode.prelude && childNode.prelude.type === 'Raw')
body = childNode.prelude.value.trim()
}
else if (childNode!.type === 'Declaration' && applyVariable.includes(childNode.property) && childNode.value.type === 'Raw') {

else if (childNode!.type === 'Declaration' && applyVariable.includes(childNode.property) && childNode.value.type === 'Raw')
body = childNode.value.value.trim()
// remove quotes
if (/^(['"]).*\1$/.test(body))
body = body.slice(1, -1)
}

if (!body)
return

// remove quotes
if (/^(['"]).*\1$/.test(body))
body = body.slice(1, -1)

const classNames = expandVariantGroup(body)
.split(/\s+/g)
.map(className => className.trim().replace(/\\/, ''))
Expand Down
13 changes: 8 additions & 5 deletions test/transformer-directives.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { readFile } from 'node:fs/promises'
import { describe, expect, it } from 'vitest'
import { transformDirectives } from '@unocss/transformer-directives'
import type { UnoGenerator } from '@unocss/core'
import { createGenerator } from '@unocss/core'
import presetUno from '@unocss/preset-uno'
import prettier from 'prettier/standalone'
import parserCSS from 'prettier/parser-postcss'
import { transformDirectives } from '@unocss/transformer-directives'
import MagicString from 'magic-string'
import parserCSS from 'prettier/parser-postcss'
import prettier from 'prettier/standalone'
import { describe, expect, it } from 'vitest'

describe('transformer-directives', () => {
const uno = createGenerator({
Expand Down Expand Up @@ -60,7 +60,10 @@ describe('transformer-directives', () => {

it('basic', async () => {
const result = await transform(
'.btn { @apply rounded text-lg font-mono; }',
`.btn {
@apply rounded text-lg;
@apply 'font-mono';
}`,
)
await expect(result)
.toMatchInlineSnapshot(`
Expand Down
Loading