@unocss/transformer-directives 0.27.4 → 0.28.0

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 (5) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs +11 -8
  3. package/dist/index.d.ts +5 -2
  4. package/dist/index.mjs +11 -8
  5. package/package.json +12 -11
package/README.md CHANGED
@@ -15,7 +15,7 @@ import transformerDirective from '@unocss/transformer-directives'
15
15
  Unocss({
16
16
  transformers: [
17
17
  transformerDirective(),
18
- ]
18
+ ],
19
19
  })
20
20
  ```
21
21
 
package/dist/index.cjs CHANGED
@@ -7,24 +7,25 @@ const cssTree = require('css-tree');
7
7
 
8
8
  const regexCssId = /\.(css|postcss|sass|scss|less|stylus|styl)$/;
9
9
 
10
- function transformerDirectives() {
10
+ function transformerDirectives(options) {
11
11
  return {
12
12
  name: "css-directive",
13
- enforce: "pre",
13
+ enforce: options?.enforce,
14
14
  idFilter: (id) => !!id.match(regexCssId),
15
15
  transform: (code, id, ctx) => {
16
16
  return transformDirectives(code, ctx.uno, id);
17
17
  }
18
18
  };
19
19
  }
20
- async function transformDirectives(code, uno, filename) {
20
+ async function transformDirectives(code, uno, filename, originalCode, offset) {
21
21
  if (!code.original.includes("@apply"))
22
22
  return;
23
- const ast = cssTree.parse(code.original, {
23
+ const ast = cssTree.parse(originalCode || code.original, {
24
24
  parseAtrulePrelude: false,
25
25
  positions: true,
26
26
  filename
27
27
  });
28
+ const calcOffset = (pos) => offset ? pos + offset : pos;
28
29
  if (ast.type !== "StyleSheet")
29
30
  return;
30
31
  const stack = [];
@@ -32,6 +33,8 @@ async function transformDirectives(code, uno, filename) {
32
33
  if (node.type !== "Rule")
33
34
  return;
34
35
  await Promise.all(node.block.children.map(async (childNode, _childItem) => {
36
+ if (childNode.type === "Raw")
37
+ return transformDirectives(code, uno, filename, childNode.value, calcOffset(childNode.loc.start.offset));
35
38
  if (!(childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude))
36
39
  return;
37
40
  if (childNode.prelude.type !== "Raw")
@@ -53,7 +56,7 @@ async function transformDirectives(code, uno, filename) {
53
56
  const selector = _selector?.replace(core.regexScopePlaceholder, " ") || _selector;
54
57
  if (parent) {
55
58
  const newNodeCss = `${parent}{${parentSelector}{${body}}}`;
56
- code.appendLeft(node.loc.end.offset, newNodeCss);
59
+ code.appendLeft(calcOffset(node.loc.end.offset), newNodeCss);
57
60
  } else if (selector && selector !== ".\\-") {
58
61
  const selectorAST = cssTree.parse(selector, {
59
62
  context: "selector"
@@ -68,12 +71,12 @@ async function transformDirectives(code, uno, filename) {
68
71
  Object.assign(child, parentSelectorAst);
69
72
  });
70
73
  const newNodeCss = `${cssTree.generate(prelude)}{${body}}`;
71
- code.appendLeft(node.loc.end.offset, newNodeCss);
74
+ code.appendLeft(calcOffset(node.loc.end.offset), newNodeCss);
72
75
  } else {
73
- code.appendRight(childNode.loc.end.offset, body);
76
+ code.appendRight(calcOffset(childNode.loc.end.offset), body);
74
77
  }
75
78
  }
76
- code.remove(childNode.loc.start.offset, childNode.loc.end.offset);
79
+ code.remove(calcOffset(childNode.loc.start.offset), calcOffset(childNode.loc.end.offset));
77
80
  }).toArray());
78
81
  };
79
82
  cssTree.walk(ast, (...args) => stack.push(processNode(...args)));
package/dist/index.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import { SourceCodeTransformer, UnoGenerator } from '@unocss/core';
2
2
  import MagicString from 'magic-string';
3
3
 
4
- declare function transformerDirectives(): SourceCodeTransformer;
5
- declare function transformDirectives(code: MagicString, uno: UnoGenerator, filename?: string): Promise<void>;
4
+ interface TransformerDirectivesOptions {
5
+ enforce?: SourceCodeTransformer['enforce'];
6
+ }
7
+ declare function transformerDirectives(options?: TransformerDirectivesOptions): SourceCodeTransformer;
8
+ declare function transformDirectives(code: MagicString, uno: UnoGenerator, filename?: string, originalCode?: string, offset?: number): Promise<void>;
6
9
 
7
10
  export { transformerDirectives as default, transformDirectives };
package/dist/index.mjs CHANGED
@@ -3,24 +3,25 @@ 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() {
6
+ function transformerDirectives(options) {
7
7
  return {
8
8
  name: "css-directive",
9
- enforce: "pre",
9
+ enforce: options?.enforce,
10
10
  idFilter: (id) => !!id.match(regexCssId),
11
11
  transform: (code, id, ctx) => {
12
12
  return transformDirectives(code, ctx.uno, id);
13
13
  }
14
14
  };
15
15
  }
16
- async function transformDirectives(code, uno, filename) {
16
+ async function transformDirectives(code, uno, filename, originalCode, offset) {
17
17
  if (!code.original.includes("@apply"))
18
18
  return;
19
- const ast = parse(code.original, {
19
+ const ast = parse(originalCode || code.original, {
20
20
  parseAtrulePrelude: false,
21
21
  positions: true,
22
22
  filename
23
23
  });
24
+ const calcOffset = (pos) => offset ? pos + offset : pos;
24
25
  if (ast.type !== "StyleSheet")
25
26
  return;
26
27
  const stack = [];
@@ -28,6 +29,8 @@ async function transformDirectives(code, uno, filename) {
28
29
  if (node.type !== "Rule")
29
30
  return;
30
31
  await Promise.all(node.block.children.map(async (childNode, _childItem) => {
32
+ if (childNode.type === "Raw")
33
+ return transformDirectives(code, uno, filename, childNode.value, calcOffset(childNode.loc.start.offset));
31
34
  if (!(childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude))
32
35
  return;
33
36
  if (childNode.prelude.type !== "Raw")
@@ -49,7 +52,7 @@ async function transformDirectives(code, uno, filename) {
49
52
  const selector = _selector?.replace(regexScopePlaceholder, " ") || _selector;
50
53
  if (parent) {
51
54
  const newNodeCss = `${parent}{${parentSelector}{${body}}}`;
52
- code.appendLeft(node.loc.end.offset, newNodeCss);
55
+ code.appendLeft(calcOffset(node.loc.end.offset), newNodeCss);
53
56
  } else if (selector && selector !== ".\\-") {
54
57
  const selectorAST = parse(selector, {
55
58
  context: "selector"
@@ -64,12 +67,12 @@ async function transformDirectives(code, uno, filename) {
64
67
  Object.assign(child, parentSelectorAst);
65
68
  });
66
69
  const newNodeCss = `${generate(prelude)}{${body}}`;
67
- code.appendLeft(node.loc.end.offset, newNodeCss);
70
+ code.appendLeft(calcOffset(node.loc.end.offset), newNodeCss);
68
71
  } else {
69
- code.appendRight(childNode.loc.end.offset, body);
72
+ code.appendRight(calcOffset(childNode.loc.end.offset), body);
70
73
  }
71
74
  }
72
- code.remove(childNode.loc.start.offset, childNode.loc.end.offset);
75
+ code.remove(calcOffset(childNode.loc.start.offset), calcOffset(childNode.loc.end.offset));
73
76
  }).toArray());
74
77
  };
75
78
  walk(ast, (...args) => stack.push(processNode(...args)));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unocss/transformer-directives",
3
- "version": "0.27.4",
3
+ "version": "0.28.0",
4
4
  "description": "UnoCSS transformer for `@apply` directive",
5
5
  "keywords": [
6
6
  "unocss",
@@ -11,27 +11,27 @@
11
11
  "url": "https://github.com/antfu/unocss/issues"
12
12
  },
13
13
  "license": "MIT",
14
+ "author": "hannoeru <me@hanlee.co>",
14
15
  "repository": {
15
16
  "type": "git",
16
17
  "url": "git+https://github.com/antfu/unocss.git",
17
18
  "directory": "packages/transformer-directives"
18
19
  },
19
- "author": "hannoeru <me@hanlee.co>",
20
- "sideEffects": false,
21
- "files": [
22
- "dist"
23
- ],
20
+ "main": "./dist/index.cjs",
21
+ "module": "./dist/index.mjs",
22
+ "types": "./dist/index.d.ts",
24
23
  "exports": {
25
24
  ".": {
26
25
  "require": "./dist/index.cjs",
27
26
  "import": "./dist/index.mjs"
28
27
  }
29
28
  },
30
- "main": "./dist/index.cjs",
31
- "module": "./dist/index.mjs",
32
- "types": "./dist/index.d.ts",
29
+ "files": [
30
+ "dist"
31
+ ],
32
+ "sideEffects": false,
33
33
  "dependencies": {
34
- "@unocss/core": "0.27.4",
34
+ "@unocss/core": "0.28.0",
35
35
  "css-tree": "^2.1.0"
36
36
  },
37
37
  "devDependencies": {
@@ -40,5 +40,6 @@
40
40
  "scripts": {
41
41
  "build": "unbuild",
42
42
  "stub": "unbuild --stub"
43
- }
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"
44
45
  }