@unocss/transformer-directives 0.32.1 → 0.32.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +29 -1
  3. package/dist/index.cjs +19 -12
  4. package/dist/index.d.ts +10 -2
  5. package/dist/index.mjs +19 -12
  6. package/package.json +3 -4
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2022 hannoeru
3
+ Copyright (c) 2022-PRESENT hannoeru
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -40,6 +40,34 @@ Will be transformed to:
40
40
 
41
41
  > Currently only `@apply` is supported.
42
42
 
43
+ ### CSS Variable Style
44
+
45
+ To be compatible with vanilla CSS, you can use CSS Variables to replace the `@apply` directive.
46
+
47
+ ```css
48
+ .custom-div {
49
+ --at-apply: text-center my-0 font-medium;
50
+ }
51
+ ```
52
+
53
+ To use rules with `:`, you will need to quote the value
54
+
55
+ ```css
56
+ .custom-div {
57
+ --at-apply: "hover:text-red";
58
+ }
59
+ ```
60
+
61
+ This feature is enabled by default (with prefix `--at-`), can you configure it or disable it via:
62
+
63
+ ```js
64
+ transformerDirective({
65
+ varStyle: '--my-at-',
66
+ // or disable with:
67
+ // varStyle: false
68
+ })
69
+ ```
70
+
43
71
  ## License
44
72
 
45
- MIT License © 2022 [hannoeru](https://github.com/hannoeru)
73
+ MIT License © 2022-PRESENT [hannoeru](https://github.com/hannoeru)
package/dist/index.cjs CHANGED
@@ -7,18 +7,19 @@ const cssTree = require('css-tree');
7
7
 
8
8
  const regexCssId = /\.(css|postcss|sass|scss|less|stylus|styl)$/;
9
9
 
10
- function transformerDirectives(options) {
10
+ function transformerDirectives(options = {}) {
11
11
  return {
12
12
  name: "css-directive",
13
13
  enforce: options?.enforce,
14
14
  idFilter: (id) => !!id.match(regexCssId),
15
15
  transform: (code, id, ctx) => {
16
- return transformDirectives(code, ctx.uno, id);
16
+ return transformDirectives(code, ctx.uno, options, id);
17
17
  }
18
18
  };
19
19
  }
20
- async function transformDirectives(code, uno, filename, originalCode, offset) {
21
- if (!code.original.includes("@apply"))
20
+ async function transformDirectives(code, uno, options, filename, originalCode, offset) {
21
+ const { varStyle = "--at-" } = options;
22
+ if (!code.original.includes("@apply") && (varStyle === false || !code.original.includes(varStyle)))
22
23
  return;
23
24
  const ast = cssTree.parse(originalCode || code.original, {
24
25
  parseAtrulePrelude: false,
@@ -34,12 +35,18 @@ async function transformDirectives(code, uno, filename, originalCode, offset) {
34
35
  return;
35
36
  await Promise.all(node.block.children.map(async (childNode, _childItem) => {
36
37
  if (childNode.type === "Raw")
37
- return transformDirectives(code, uno, filename, childNode.value, calcOffset(childNode.loc.start.offset));
38
- if (!(childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude))
39
- return;
40
- if (childNode.prelude.type !== "Raw")
38
+ return transformDirectives(code, uno, options, filename, childNode.value, calcOffset(childNode.loc.start.offset));
39
+ let body;
40
+ if (childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude && childNode.prelude.type === "Raw") {
41
+ body = childNode.prelude.value.trim();
42
+ } else if (varStyle !== false && childNode.type === "Declaration" && childNode.property === `${varStyle}apply` && childNode.value.type === "Raw") {
43
+ body = childNode.value.value.trim();
44
+ if (body.match(/^(['"]).*\1$/))
45
+ body = body.slice(1, -1);
46
+ }
47
+ if (!body)
41
48
  return;
42
- const classNames = core.expandVariantGroup(childNode.prelude.value).split(/\s+/g);
49
+ const classNames = core.expandVariantGroup(body).split(/\s+/g);
43
50
  const utils = (await Promise.all(classNames.map((i) => uno.parseToken(i, "-")))).filter(core.notNull).flat().sort((a, b) => a[0] - b[0]).sort((a, b) => (a[3] ? uno.parentOrders.get(a[3]) ?? 0 : 0) - (b[3] ? uno.parentOrders.get(b[3]) ?? 0 : 0)).reduce((acc, item) => {
44
51
  const target = acc.find((i) => i[1] === item[1] && i[3] === item[3]);
45
52
  if (target)
@@ -51,7 +58,7 @@ async function transformDirectives(code, uno, filename, originalCode, offset) {
51
58
  if (!utils.length)
52
59
  return;
53
60
  for (const i of utils) {
54
- const [, _selector, body, parent] = i;
61
+ const [, _selector, body2, parent] = i;
55
62
  const selector = _selector?.replace(core.regexScopePlaceholder, " ") || _selector;
56
63
  if (parent || selector && selector !== ".\\-") {
57
64
  let newSelector = cssTree.generate(node.prelude);
@@ -70,12 +77,12 @@ async function transformDirectives(code, uno, filename, originalCode, offset) {
70
77
  });
71
78
  newSelector = cssTree.generate(prelude);
72
79
  }
73
- let css = `${newSelector}{${body}}`;
80
+ let css = `${newSelector}{${body2}}`;
74
81
  if (parent)
75
82
  css = `${parent}{${css}}`;
76
83
  code.appendLeft(calcOffset(node.loc.end.offset), css);
77
84
  } else {
78
- code.appendRight(calcOffset(childNode.loc.end.offset), body);
85
+ code.appendRight(calcOffset(childNode.loc.end.offset), body2);
79
86
  }
80
87
  }
81
88
  code.remove(calcOffset(childNode.loc.start.offset), calcOffset(childNode.loc.end.offset));
package/dist/index.d.ts CHANGED
@@ -3,8 +3,16 @@ import MagicString from 'magic-string';
3
3
 
4
4
  interface TransformerDirectivesOptions {
5
5
  enforce?: SourceCodeTransformer['enforce'];
6
+ /**
7
+ * Treat CSS variables as directives for CSS syntax compatible.
8
+ *
9
+ * Pass `false` to disable, or a string to use as a prefix.
10
+ *
11
+ * @default '--at-'
12
+ */
13
+ varStyle?: false | string;
6
14
  }
7
15
  declare function transformerDirectives(options?: TransformerDirectivesOptions): SourceCodeTransformer;
8
- declare function transformDirectives(code: MagicString, uno: UnoGenerator, filename?: string, originalCode?: string, offset?: number): Promise<void>;
16
+ declare function transformDirectives(code: MagicString, uno: UnoGenerator, options: TransformerDirectivesOptions, filename?: string, originalCode?: string, offset?: number): Promise<void>;
9
17
 
10
- export { transformerDirectives as default, transformDirectives };
18
+ export { TransformerDirectivesOptions, transformerDirectives as default, transformDirectives };
package/dist/index.mjs CHANGED
@@ -3,18 +3,19 @@ import { parse, walk, generate, clone } from 'css-tree';
3
3
 
4
4
  const regexCssId = /\.(css|postcss|sass|scss|less|stylus|styl)$/;
5
5
 
6
- function transformerDirectives(options) {
6
+ function transformerDirectives(options = {}) {
7
7
  return {
8
8
  name: "css-directive",
9
9
  enforce: options?.enforce,
10
10
  idFilter: (id) => !!id.match(regexCssId),
11
11
  transform: (code, id, ctx) => {
12
- return transformDirectives(code, ctx.uno, id);
12
+ return transformDirectives(code, ctx.uno, options, id);
13
13
  }
14
14
  };
15
15
  }
16
- async function transformDirectives(code, uno, filename, originalCode, offset) {
17
- if (!code.original.includes("@apply"))
16
+ async function transformDirectives(code, uno, options, filename, originalCode, offset) {
17
+ const { varStyle = "--at-" } = options;
18
+ if (!code.original.includes("@apply") && (varStyle === false || !code.original.includes(varStyle)))
18
19
  return;
19
20
  const ast = parse(originalCode || code.original, {
20
21
  parseAtrulePrelude: false,
@@ -30,12 +31,18 @@ async function transformDirectives(code, uno, filename, originalCode, offset) {
30
31
  return;
31
32
  await Promise.all(node.block.children.map(async (childNode, _childItem) => {
32
33
  if (childNode.type === "Raw")
33
- return transformDirectives(code, uno, filename, childNode.value, calcOffset(childNode.loc.start.offset));
34
- if (!(childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude))
35
- return;
36
- if (childNode.prelude.type !== "Raw")
34
+ return transformDirectives(code, uno, options, filename, childNode.value, calcOffset(childNode.loc.start.offset));
35
+ let body;
36
+ if (childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude && childNode.prelude.type === "Raw") {
37
+ body = childNode.prelude.value.trim();
38
+ } else if (varStyle !== false && childNode.type === "Declaration" && childNode.property === `${varStyle}apply` && childNode.value.type === "Raw") {
39
+ body = childNode.value.value.trim();
40
+ if (body.match(/^(['"]).*\1$/))
41
+ body = body.slice(1, -1);
42
+ }
43
+ if (!body)
37
44
  return;
38
- const classNames = expandVariantGroup(childNode.prelude.value).split(/\s+/g);
45
+ const classNames = expandVariantGroup(body).split(/\s+/g);
39
46
  const utils = (await Promise.all(classNames.map((i) => uno.parseToken(i, "-")))).filter(notNull).flat().sort((a, b) => a[0] - b[0]).sort((a, b) => (a[3] ? uno.parentOrders.get(a[3]) ?? 0 : 0) - (b[3] ? uno.parentOrders.get(b[3]) ?? 0 : 0)).reduce((acc, item) => {
40
47
  const target = acc.find((i) => i[1] === item[1] && i[3] === item[3]);
41
48
  if (target)
@@ -47,7 +54,7 @@ async function transformDirectives(code, uno, filename, originalCode, offset) {
47
54
  if (!utils.length)
48
55
  return;
49
56
  for (const i of utils) {
50
- const [, _selector, body, parent] = i;
57
+ const [, _selector, body2, parent] = i;
51
58
  const selector = _selector?.replace(regexScopePlaceholder, " ") || _selector;
52
59
  if (parent || selector && selector !== ".\\-") {
53
60
  let newSelector = generate(node.prelude);
@@ -66,12 +73,12 @@ async function transformDirectives(code, uno, filename, originalCode, offset) {
66
73
  });
67
74
  newSelector = generate(prelude);
68
75
  }
69
- let css = `${newSelector}{${body}}`;
76
+ let css = `${newSelector}{${body2}}`;
70
77
  if (parent)
71
78
  css = `${parent}{${css}}`;
72
79
  code.appendLeft(calcOffset(node.loc.end.offset), css);
73
80
  } else {
74
- code.appendRight(calcOffset(childNode.loc.end.offset), body);
81
+ code.appendRight(calcOffset(childNode.loc.end.offset), body2);
75
82
  }
76
83
  }
77
84
  code.remove(calcOffset(childNode.loc.start.offset), calcOffset(childNode.loc.end.offset));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unocss/transformer-directives",
3
- "version": "0.32.1",
3
+ "version": "0.32.9",
4
4
  "description": "UnoCSS transformer for `@apply` directive",
5
5
  "keywords": [
6
6
  "unocss",
@@ -31,7 +31,7 @@
31
31
  ],
32
32
  "sideEffects": false,
33
33
  "dependencies": {
34
- "@unocss/core": "0.32.1",
34
+ "@unocss/core": "0.32.9",
35
35
  "css-tree": "^2.1.0"
36
36
  },
37
37
  "devDependencies": {
@@ -40,6 +40,5 @@
40
40
  "scripts": {
41
41
  "build": "unbuild",
42
42
  "stub": "unbuild --stub"
43
- },
44
- "readme": "# @unocss/transformer-directives\n\nUnoCSS transformer for `@apply` directive\n\n## Install\n\n```bash\nnpm i -D @unocss/transformer-directives\n```\n\n```ts\nimport Unocss from 'unocss/vite'\nimport transformerDirective from '@unocss/transformer-directives'\n\nUnocss({\n transformers: [\n transformerDirective(),\n ],\n})\n```\n\n## Usage\n\n```css\n.custom-div {\n @apply text-center my-0 font-medium;\n}\n```\n\nWill be transformed to:\n\n```css\n.custom-div {\n margin-top: 0rem;\n margin-bottom: 0rem;\n text-align: center;\n font-weight: 500;\n}\n```\n\n> Currently only `@apply` is supported.\n\n## License\n\nMIT License © 2022 [hannoeru](https://github.com/hannoeru)\n"
43
+ }
45
44
  }