@griffel/postcss-syntax 1.0.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.
- package/LICENSE.md +21 -0
- package/README.md +33 -0
- package/package.json +18 -0
- package/src/constants.d.ts +3 -0
- package/src/constants.js +7 -0
- package/src/constants.js.map +1 -0
- package/src/createSyntax.d.ts +8 -0
- package/src/createSyntax.js +19 -0
- package/src/createSyntax.js.map +1 -0
- package/src/index.d.ts +11 -0
- package/src/index.js +14 -0
- package/src/index.js.map +1 -0
- package/src/location-preset.d.ts +16 -0
- package/src/location-preset.js +100 -0
- package/src/location-preset.js.map +1 -0
- package/src/parse.d.ts +8 -0
- package/src/parse.js +103 -0
- package/src/parse.js.map +1 -0
- package/src/stringify.d.ts +2 -0
- package/src/stringify.js +15 -0
- package/src/stringify.js.map +1 -0
- package/src/transform-sync.d.ts +13 -0
- package/src/transform-sync.js +43 -0
- package/src/transform-sync.js.map +1 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) Microsoft Corporation.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE
|
package/README.md
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# Postcss syntax for Griffel
|
|
2
|
+
|
|
3
|
+
A postcss [custom syntax](https://postcss.org/docs/how-to-write-custom-syntax) for Javascript files that contain
|
|
4
|
+
Griffel CSS in JS code.
|
|
5
|
+
|
|
6
|
+
## Parser
|
|
7
|
+
|
|
8
|
+
The parser will parse a Javascript file and return the CSS output of any Griffel `makeStyle` or `makeResetStyle`
|
|
9
|
+
calls. The parsed postcss AST will include source locations back to the original Javascript code.
|
|
10
|
+
|
|
11
|
+
## Stringifier
|
|
12
|
+
|
|
13
|
+
The stringifier only works on a postcss AST that was parsed by this custom syntax since Griffel ahead of time
|
|
14
|
+
compilation lacks the capability to map generated CSS back to the original javascript properties very accurately.
|
|
15
|
+
|
|
16
|
+
## Configuring @griffel/babel-preset
|
|
17
|
+
|
|
18
|
+
The preprocessor uses transforms in the `@griffel/babel-preset` package. In order to configure the babel transform
|
|
19
|
+
that is used internally, we've created the a factory to return the custom syntax that uses the desired configuration.
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { createSyntax } from '@griffel/postcss-syntax';
|
|
23
|
+
const syntax = createSyntax({
|
|
24
|
+
modules: [
|
|
25
|
+
{ moduleSource: '@myScope/griffel', importName: 'createStyles' },
|
|
26
|
+
]
|
|
27
|
+
})
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
For more information about how to configure the babel Griffel preset
|
|
31
|
+
[you can check out the docs](https://github.com/microsoft/griffel/blob/main/packages/babel-preset/README.md#usage)
|
|
32
|
+
|
|
33
|
+
|
package/package.json
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@griffel/postcss-syntax",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "postcss syntax for Griffel",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/microsoft/griffel"
|
|
9
|
+
},
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"@babel/core": "^7.12.13",
|
|
12
|
+
"@griffel/babel-preset": "^1.5.1",
|
|
13
|
+
"@babel/helper-plugin-utils": "^7.12.13",
|
|
14
|
+
"postcss": "^8.4.29"
|
|
15
|
+
},
|
|
16
|
+
"main": "index.js",
|
|
17
|
+
"types": "./src/index.d.ts"
|
|
18
|
+
}
|
package/src/constants.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.GRIFFEL_DECLARATOR_RAW = exports.GRIFFEL_SRC_RAW = exports.GRIFFEL_SLOT_RAW = void 0;
|
|
4
|
+
exports.GRIFFEL_SLOT_RAW = 'griffel-slot';
|
|
5
|
+
exports.GRIFFEL_SRC_RAW = 'griffel-src';
|
|
6
|
+
exports.GRIFFEL_DECLARATOR_RAW = 'griffel-declarator';
|
|
7
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../packages/postcss-syntax/src/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,gBAAgB,GAAG,cAAc,CAAC;AAClC,QAAA,eAAe,GAAG,aAAa,CAAC;AAChC,QAAA,sBAAsB,GAAG,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as postcss from 'postcss';
|
|
2
|
+
import { BabelPluginOptions } from '@griffel/babel-preset';
|
|
3
|
+
/**
|
|
4
|
+
* Creates a custom syntax with configured options for @griffel/babel-preset
|
|
5
|
+
* @param options - Options to configure @griffel/babel-preset
|
|
6
|
+
* @returns a postcss custom syntax
|
|
7
|
+
*/
|
|
8
|
+
export declare function createSyntax(options: BabelPluginOptions): postcss.Syntax;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.createSyntax = void 0;
|
|
4
|
+
const parse_1 = require("./parse");
|
|
5
|
+
const stringify_1 = require("./stringify");
|
|
6
|
+
/**
|
|
7
|
+
* Creates a custom syntax with configured options for @griffel/babel-preset
|
|
8
|
+
* @param options - Options to configure @griffel/babel-preset
|
|
9
|
+
* @returns a postcss custom syntax
|
|
10
|
+
*/
|
|
11
|
+
function createSyntax(options) {
|
|
12
|
+
const extendedParse = (css, opts) => (0, parse_1.parse)(css, { ...opts, ...options });
|
|
13
|
+
return {
|
|
14
|
+
stringify: stringify_1.stringify,
|
|
15
|
+
parse: extendedParse,
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
exports.createSyntax = createSyntax;
|
|
19
|
+
//# sourceMappingURL=createSyntax.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createSyntax.js","sourceRoot":"","sources":["../../../../packages/postcss-syntax/src/createSyntax.ts"],"names":[],"mappings":";;;AACA,mCAAgC;AAChC,2CAAwC;AAGxC;;;;GAIG;AACH,SAAgB,YAAY,CAAC,OAA2B;IACtD,MAAM,aAAa,GAAmB,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,IAAA,aAAK,EAAC,GAAG,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;IAEzF,OAAO;QACL,SAAS,EAAT,qBAAS;QACT,KAAK,EAAE,aAAa;KACrB,CAAC;AACJ,CAAC;AAPD,oCAOC"}
|
package/src/index.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { parse } from './parse';
|
|
2
|
+
import { stringify } from './stringify';
|
|
3
|
+
export { parse, stringify };
|
|
4
|
+
export { createSyntax } from './createSyntax';
|
|
5
|
+
declare const _default: {
|
|
6
|
+
parse: (css: string | {
|
|
7
|
+
toString(): string;
|
|
8
|
+
}, opts?: import("./parse").ParserOptions | undefined) => import("postcss/lib/document").default;
|
|
9
|
+
stringify: import("postcss").Stringifier;
|
|
10
|
+
};
|
|
11
|
+
export default _default;
|
package/src/index.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.createSyntax = exports.stringify = exports.parse = void 0;
|
|
4
|
+
const parse_1 = require("./parse");
|
|
5
|
+
Object.defineProperty(exports, "parse", { enumerable: true, get: function () { return parse_1.parse; } });
|
|
6
|
+
const stringify_1 = require("./stringify");
|
|
7
|
+
Object.defineProperty(exports, "stringify", { enumerable: true, get: function () { return stringify_1.stringify; } });
|
|
8
|
+
var createSyntax_1 = require("./createSyntax");
|
|
9
|
+
Object.defineProperty(exports, "createSyntax", { enumerable: true, get: function () { return createSyntax_1.createSyntax; } });
|
|
10
|
+
exports.default = {
|
|
11
|
+
parse: parse_1.parse,
|
|
12
|
+
stringify: stringify_1.stringify,
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
package/src/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/postcss-syntax/src/index.ts"],"names":[],"mappings":";;;AAAA,mCAAgC;AAGvB,sFAHA,aAAK,OAGA;AAFd,2CAAwC;AAExB,0FAFP,qBAAS,OAEO;AACzB,+CAA8C;AAArC,4GAAA,YAAY,OAAA;AAErB,kBAAe;IACb,KAAK,EAAL,aAAK;IACL,SAAS,EAAT,qBAAS;CACV,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PluginObj, PluginPass, types as t, ConfigAPI } from '@babel/core';
|
|
2
|
+
import { BabelPluginOptions } from '@griffel/babel-preset';
|
|
3
|
+
export interface LocationPluginState extends PluginPass {
|
|
4
|
+
locations?: Record<string, Record<string, t.SourceLocation>>;
|
|
5
|
+
resetLocations?: Record<string, t.SourceLocation>;
|
|
6
|
+
}
|
|
7
|
+
export interface LocationPluginMetadata {
|
|
8
|
+
locations: Record<string, Record<string, t.SourceLocation>>;
|
|
9
|
+
resetLocations: Record<string, t.SourceLocation>;
|
|
10
|
+
}
|
|
11
|
+
export interface LocationPluginOptions extends Pick<BabelPluginOptions, 'modules'> {
|
|
12
|
+
}
|
|
13
|
+
declare const _default: (babel: ConfigAPI, options: LocationPluginOptions) => {
|
|
14
|
+
plugins: (LocationPluginOptions | ((api: object, options: LocationPluginOptions | null | undefined, dirname: string) => PluginObj<LocationPluginState>))[][];
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const helper_plugin_utils_1 = require("@babel/helper-plugin-utils");
|
|
4
|
+
/**
|
|
5
|
+
* A plugin that parses Griffel code and returns code locations mapped to respective styles and slots
|
|
6
|
+
*/
|
|
7
|
+
const plugin = (0, helper_plugin_utils_1.declare)((api, options) => {
|
|
8
|
+
api.assertVersion(7);
|
|
9
|
+
const { modules = [
|
|
10
|
+
{ moduleSource: '@griffel/react', importName: 'makeStyles', resetImportName: 'makeResetStyles' },
|
|
11
|
+
{ moduleSource: '@fluentui/react-components', importName: 'makeStyles', resetImportName: 'makeResetStyles' },
|
|
12
|
+
], } = options;
|
|
13
|
+
const functionKinds = modules.map(moduleEntry => {
|
|
14
|
+
var _a;
|
|
15
|
+
return (_a = moduleEntry.importName) !== null && _a !== void 0 ? _a : 'makeStyles';
|
|
16
|
+
});
|
|
17
|
+
const resetFunctionKinds = modules.map(moduleEntry => {
|
|
18
|
+
var _a;
|
|
19
|
+
return (_a = moduleEntry.resetImportName) !== null && _a !== void 0 ? _a : 'makeResetStyles';
|
|
20
|
+
});
|
|
21
|
+
return {
|
|
22
|
+
name: '@griffel/slot-location-plugin',
|
|
23
|
+
pre() {
|
|
24
|
+
this.locations = {};
|
|
25
|
+
this.resetLocations = {};
|
|
26
|
+
},
|
|
27
|
+
visitor: {
|
|
28
|
+
Program: {
|
|
29
|
+
exit() {
|
|
30
|
+
Object.assign(this.file.metadata, {
|
|
31
|
+
locations: this.locations,
|
|
32
|
+
resetLocations: this.resetLocations,
|
|
33
|
+
});
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
CallExpression(path, state) {
|
|
37
|
+
var _a;
|
|
38
|
+
const callee = path.get('callee');
|
|
39
|
+
const declarator = path.findParent(p => p.isVariableDeclarator());
|
|
40
|
+
if (!(declarator === null || declarator === void 0 ? void 0 : declarator.isVariableDeclarator())) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
const id = declarator.get('id');
|
|
44
|
+
const declaratorId = id.isIdentifier() ? id.node.name : 'unknown';
|
|
45
|
+
if (!callee.isIdentifier()) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
// Technically we should check if these function kinds are from Griffel
|
|
49
|
+
// but since we only collect locations, the plugin is idempotent and we
|
|
50
|
+
// it's safe enough to avoid doing that check
|
|
51
|
+
if (functionKinds.includes(callee.node.name)) {
|
|
52
|
+
const locations = path.get('arguments')[0];
|
|
53
|
+
if (!locations.isObjectExpression()) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
const properties = locations.get('properties');
|
|
57
|
+
properties.forEach(property => {
|
|
58
|
+
var _a, _b;
|
|
59
|
+
var _c;
|
|
60
|
+
if (!property.isObjectProperty()) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const key = property.get('key');
|
|
64
|
+
if (!key.isIdentifier()) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (!property.node.loc) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
(_a = state.locations) !== null && _a !== void 0 ? _a : (state.locations = {});
|
|
71
|
+
(_b = (_c = state.locations)[declaratorId]) !== null && _b !== void 0 ? _b : (_c[declaratorId] = {});
|
|
72
|
+
state.locations[declaratorId][key.node.name] = {
|
|
73
|
+
...property.node.loc,
|
|
74
|
+
};
|
|
75
|
+
state.locations[declaratorId][key.node.name] = {
|
|
76
|
+
...property.node.loc,
|
|
77
|
+
};
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
if (resetFunctionKinds.includes(callee.node.name)) {
|
|
81
|
+
(_a = state.resetLocations) !== null && _a !== void 0 ? _a : (state.resetLocations = {});
|
|
82
|
+
const resetStyles = path.get('arguments')[0];
|
|
83
|
+
if (!resetStyles.isObjectExpression()) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
if (!resetStyles.node.loc) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
state.resetLocations[declaratorId] = resetStyles.node.loc;
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
};
|
|
94
|
+
});
|
|
95
|
+
exports.default = (babel, options) => {
|
|
96
|
+
return {
|
|
97
|
+
plugins: [[plugin, options]],
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
//# sourceMappingURL=location-preset.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"location-preset.js","sourceRoot":"","sources":["../../../../packages/postcss-syntax/src/location-preset.ts"],"names":[],"mappings":"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"}
|
package/src/parse.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as postcss from 'postcss';
|
|
2
|
+
import { BabelPluginOptions } from '@griffel/babel-preset';
|
|
3
|
+
export declare type PostCSSParserOptions = Pick<postcss.ProcessOptions<postcss.Document | postcss.Root>, 'from' | 'map'>;
|
|
4
|
+
export interface ParserOptions extends PostCSSParserOptions, BabelPluginOptions {
|
|
5
|
+
}
|
|
6
|
+
export declare const parse: (css: string | {
|
|
7
|
+
toString(): string;
|
|
8
|
+
}, opts?: ParserOptions) => postcss.Document;
|
package/src/parse.js
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.parse = void 0;
|
|
4
|
+
const postcss = require("postcss");
|
|
5
|
+
const transform_sync_1 = require("./transform-sync");
|
|
6
|
+
const constants_1 = require("./constants");
|
|
7
|
+
const parse = (css, opts) => {
|
|
8
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
9
|
+
const { from: filename = 'postcss-syntax.styles.ts', map, ...griffelPluginOptions } = opts !== null && opts !== void 0 ? opts : {};
|
|
10
|
+
const code = css.toString();
|
|
11
|
+
const { metadata } = (0, transform_sync_1.default)(code, {
|
|
12
|
+
filename,
|
|
13
|
+
pluginOptions: {
|
|
14
|
+
...griffelPluginOptions,
|
|
15
|
+
generateMetadata: true,
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
const { cssEntries, cssResetEntries, resetLocations, locations } = metadata;
|
|
19
|
+
const cssRuleNodes = Object.entries(cssEntries)
|
|
20
|
+
.map(([declarator, slots]) => {
|
|
21
|
+
return Object.entries(slots).reduce((arr, [slot, rules]) => {
|
|
22
|
+
if (!locations[declarator][slot]) {
|
|
23
|
+
throw new Error(`No code location for ${declarator}:${slot} - please report a bug`);
|
|
24
|
+
}
|
|
25
|
+
const location = locations[declarator][slot];
|
|
26
|
+
const nodes = rules.map(rule => {
|
|
27
|
+
const root = postcss.parse(rule);
|
|
28
|
+
root.walk(node => {
|
|
29
|
+
node.raws[constants_1.GRIFFEL_SLOT_RAW] = slot;
|
|
30
|
+
node.raws[constants_1.GRIFFEL_DECLARATOR_RAW] = declarator;
|
|
31
|
+
if (!node.source) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
// There's currently no way to to map generated CSS to original JS code
|
|
35
|
+
// Mapping each node to the original slot is probably the best we can do for now
|
|
36
|
+
node.source.end = {
|
|
37
|
+
offset: 0,
|
|
38
|
+
column: location.end.column,
|
|
39
|
+
line: location.end.line,
|
|
40
|
+
};
|
|
41
|
+
node.source.start = {
|
|
42
|
+
offset: 0,
|
|
43
|
+
column: location.start.column,
|
|
44
|
+
line: location.start.line,
|
|
45
|
+
};
|
|
46
|
+
});
|
|
47
|
+
return root.nodes[0];
|
|
48
|
+
});
|
|
49
|
+
return [...arr, ...nodes];
|
|
50
|
+
}, []);
|
|
51
|
+
})
|
|
52
|
+
.flat();
|
|
53
|
+
const cssResetRuleNodes = Object.entries(cssResetEntries).map(([declarator, [resetRule]]) => {
|
|
54
|
+
if (!resetLocations[declarator]) {
|
|
55
|
+
throw new Error(`No code location for ${declarator} - please report a bug`);
|
|
56
|
+
}
|
|
57
|
+
const location = resetLocations[declarator];
|
|
58
|
+
const root = postcss.parse(resetRule);
|
|
59
|
+
root.walk(node => {
|
|
60
|
+
node.raws[constants_1.GRIFFEL_DECLARATOR_RAW] = declarator;
|
|
61
|
+
if (!node.source) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
// There's currently no way to to map generated CSS to original JS code through Griffel AOT
|
|
65
|
+
// Mapping each node to the original slot is probably the best we can do for now
|
|
66
|
+
node.source.end = {
|
|
67
|
+
offset: 0,
|
|
68
|
+
column: location.end.column,
|
|
69
|
+
line: location.end.line,
|
|
70
|
+
};
|
|
71
|
+
node.source.start = {
|
|
72
|
+
offset: 0,
|
|
73
|
+
column: location.start.column,
|
|
74
|
+
line: location.start.line,
|
|
75
|
+
};
|
|
76
|
+
});
|
|
77
|
+
return root.nodes[0];
|
|
78
|
+
});
|
|
79
|
+
const root = new postcss.Root();
|
|
80
|
+
const allNodes = cssRuleNodes.concat(cssResetRuleNodes);
|
|
81
|
+
for (const rule of allNodes) {
|
|
82
|
+
root.append(rule);
|
|
83
|
+
}
|
|
84
|
+
const doc = new postcss.Document();
|
|
85
|
+
root.parent = doc;
|
|
86
|
+
// https://github.com/callstack/linaria/blob/911b59b0b8bb7de2accce63ece528841f2b29f4a/packages/postcss-linaria/src/parse.ts#L180
|
|
87
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
88
|
+
// @ts-ignore
|
|
89
|
+
root.document = doc;
|
|
90
|
+
doc.nodes.push(root);
|
|
91
|
+
doc.source = {
|
|
92
|
+
input: new postcss.Input(code),
|
|
93
|
+
start: {
|
|
94
|
+
line: 1,
|
|
95
|
+
column: 1,
|
|
96
|
+
offset: 0,
|
|
97
|
+
},
|
|
98
|
+
};
|
|
99
|
+
doc.raws[constants_1.GRIFFEL_SRC_RAW] = css;
|
|
100
|
+
return doc;
|
|
101
|
+
};
|
|
102
|
+
exports.parse = parse;
|
|
103
|
+
//# sourceMappingURL=parse.js.map
|
package/src/parse.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parse.js","sourceRoot":"","sources":["../../../../packages/postcss-syntax/src/parse.ts"],"names":[],"mappings":"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"}
|
package/src/stringify.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.stringify = void 0;
|
|
4
|
+
const constants_1 = require("./constants");
|
|
5
|
+
const stringify = root => {
|
|
6
|
+
const originalSource = root.raw(constants_1.GRIFFEL_SRC_RAW);
|
|
7
|
+
if (originalSource) {
|
|
8
|
+
console.log(originalSource);
|
|
9
|
+
return originalSource;
|
|
10
|
+
}
|
|
11
|
+
// TODO maybe we could generate some default Griffel file with all styles in one slot
|
|
12
|
+
throw new Error('Griffel syntax stringifier can only stringify AST parsed with the custom syntax');
|
|
13
|
+
};
|
|
14
|
+
exports.stringify = stringify;
|
|
15
|
+
//# sourceMappingURL=stringify.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stringify.js","sourceRoot":"","sources":["../../../../packages/postcss-syntax/src/stringify.ts"],"names":[],"mappings":";;;AACA,2CAA8C;AAEvC,MAAM,SAAS,GAAwB,IAAI,CAAC,EAAE;IACnD,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,2BAAe,CAAC,CAAC;IACjD,IAAI,cAAc,EAAE;QAClB,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC5B,OAAO,cAAc,CAAC;KACvB;IAED,qFAAqF;IACrF,MAAM,IAAI,KAAK,CAAC,iFAAiF,CAAC,CAAC;AACrG,CAAC,CAAC;AATW,QAAA,SAAS,aASpB"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { BabelPluginMetadata, BabelPluginOptions } from '@griffel/babel-preset';
|
|
2
|
+
import { LocationPluginMetadata } from './location-preset';
|
|
3
|
+
export declare type TransformOptions = {
|
|
4
|
+
filename: string;
|
|
5
|
+
pluginOptions: BabelPluginOptions;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Transforms passed source code with Babel, uses user's config for parsing, but ignores it for transforms.
|
|
9
|
+
*/
|
|
10
|
+
export default function transformSync(sourceCode: string, options: TransformOptions): {
|
|
11
|
+
metadata: BabelPluginMetadata & LocationPluginMetadata;
|
|
12
|
+
code: string | null | undefined;
|
|
13
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const Babel = require("@babel/core");
|
|
4
|
+
const babel_preset_1 = require("@griffel/babel-preset");
|
|
5
|
+
const location_preset_1 = require("./location-preset");
|
|
6
|
+
/**
|
|
7
|
+
* Transforms passed source code with Babel, uses user's config for parsing, but ignores it for transforms.
|
|
8
|
+
*/
|
|
9
|
+
function transformSync(sourceCode, options) {
|
|
10
|
+
// Parse the code first so Babel will use user's babel config for parsing
|
|
11
|
+
// During transforms we don't want to use user's config
|
|
12
|
+
const babelAST = Babel.parseSync(sourceCode, {
|
|
13
|
+
caller: { name: 'griffel' },
|
|
14
|
+
filename: options.filename,
|
|
15
|
+
sourceMaps: true,
|
|
16
|
+
// TODO - we might need to add some babel config in the eslint rule options
|
|
17
|
+
// if the user doesn't want to use their normal babel config for this
|
|
18
|
+
// but let's only add it if it becomes necessary
|
|
19
|
+
});
|
|
20
|
+
if (babelAST === null) {
|
|
21
|
+
throw new Error(`Failed to create AST for "${options.filename}" due unknown Babel error...`);
|
|
22
|
+
}
|
|
23
|
+
const babelFileResult = Babel.transformFromAstSync(babelAST, sourceCode, {
|
|
24
|
+
// Ignore all user's configs and apply only our plugin
|
|
25
|
+
babelrc: false,
|
|
26
|
+
configFile: false,
|
|
27
|
+
presets: [
|
|
28
|
+
[babel_preset_1.default, options.pluginOptions],
|
|
29
|
+
[location_preset_1.default, options.pluginOptions],
|
|
30
|
+
],
|
|
31
|
+
filename: options.filename,
|
|
32
|
+
sourceFileName: options.filename,
|
|
33
|
+
});
|
|
34
|
+
if (babelFileResult === null) {
|
|
35
|
+
throw new Error(`Failed to transform "${options.filename}" due unknown Babel error...`);
|
|
36
|
+
}
|
|
37
|
+
return {
|
|
38
|
+
metadata: babelFileResult.metadata,
|
|
39
|
+
code: babelFileResult.code,
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
exports.default = transformSync;
|
|
43
|
+
//# sourceMappingURL=transform-sync.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"transform-sync.js","sourceRoot":"","sources":["../../../../packages/postcss-syntax/src/transform-sync.ts"],"names":[],"mappings":";;AAAA,qCAAqC;AACrC,wDAA+F;AAC/F,uDAA2E;AAO3E;;GAEG;AACH,SAAwB,aAAa,CAAC,UAAkB,EAAE,OAAyB;IACjF,yEAAyE;IACzE,uDAAuD;IACvD,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,UAAU,EAAE;QAC3C,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAC3B,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,UAAU,EAAE,IAAI;QAChB,2EAA2E;QAC3E,qEAAqE;QACrE,gDAAgD;KACjD,CAAC,CAAC;IAEH,IAAI,QAAQ,KAAK,IAAI,EAAE;QACrB,MAAM,IAAI,KAAK,CAAC,6BAA6B,OAAO,CAAC,QAAQ,8BAA8B,CAAC,CAAC;KAC9F;IAED,MAAM,eAAe,GAAG,KAAK,CAAC,oBAAoB,CAAC,QAAQ,EAAE,UAAU,EAAE;QACvE,sDAAsD;QACtD,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE;YACP,CAAC,sBAAa,EAAE,OAAO,CAAC,aAAa,CAAC;YACtC,CAAC,yBAAc,EAAE,OAAO,CAAC,aAAa,CAAC;SACxC;QAED,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,cAAc,EAAE,OAAO,CAAC,QAAQ;KACjC,CAAC,CAAC;IAEH,IAAI,eAAe,KAAK,IAAI,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,wBAAwB,OAAO,CAAC,QAAQ,8BAA8B,CAAC,CAAC;KACzF;IAED,OAAO;QACL,QAAQ,EAAE,eAAe,CAAC,QAAmE;QAC7F,IAAI,EAAE,eAAe,CAAC,IAAI;KAC3B,CAAC;AACJ,CAAC;AArCD,gCAqCC"}
|