carbon-preprocess-svelte 0.9.1 → 0.11.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 +1 -1
- package/README.md +162 -348
- package/dist/component-index.d.ts +4 -0
- package/dist/component-index.js +1924 -0
- package/dist/constants.d.ts +8 -14
- package/dist/constants.js +7 -0
- package/dist/index.d.ts +3 -4
- package/dist/index.js +12 -83169
- package/dist/plugins/OptimizeCssPlugin.d.ts +8 -0
- package/dist/plugins/OptimizeCssPlugin.js +49 -0
- package/dist/plugins/compare-diff.d.ts +6 -0
- package/dist/plugins/compare-diff.js +36 -0
- package/dist/plugins/create-optimized-css.d.ts +25 -0
- package/dist/plugins/create-optimized-css.js +89 -0
- package/dist/plugins/optimize-css.d.ts +3 -10
- package/dist/plugins/optimize-css.js +49 -0
- package/dist/preprocessors/optimize-imports.d.ts +3 -3
- package/dist/preprocessors/optimize-imports.js +65 -0
- package/dist/utils.d.ts +3 -11
- package/dist/utils.js +16 -0
- package/package.json +21 -49
- package/CHANGELOG.md +0 -126
- package/dist/build/build-components.d.ts +0 -9
- package/dist/build/build-elements.d.ts +0 -10
- package/dist/build/build-icons.d.ts +0 -15
- package/dist/build/build-pictograms.d.ts +0 -54
- package/dist/build/index.d.ts +0 -19
- package/dist/build/type.d.ts +0 -11
- package/dist/carbon-components-svelte.d.ts +0 -681
- package/dist/carbon-elements.d.ts +0 -833
- package/dist/carbon-icons.d.ts +0 -84420
- package/dist/carbon-pictograms.d.ts +0 -8839
- package/dist/extractors/extract-selectors.d.ts +0 -14
- package/dist/extractors/index.d.ts +0 -1
- package/dist/index.cjs.d.ts +0 -4
- package/dist/index.mjs +0 -83184
- package/dist/plugins/index.d.ts +0 -1
- package/dist/plugins/optimize-css.cjs.d.ts +0 -10
- package/dist/preprocessors/collect-headings.d.ts +0 -27
- package/dist/preprocessors/elements.d.ts +0 -22
- package/dist/preprocessors/icons.d.ts +0 -2
- package/dist/preprocessors/include.d.ts +0 -49
- package/dist/preprocessors/index.d.ts +0 -6
- package/dist/preprocessors/pictograms.d.ts +0 -2
- package/dist/presets/index.d.ts +0 -1
- package/dist/presets/preset-carbon.d.ts +0 -7
- package/dist/walk-and-replace.d.ts +0 -117
- package/src/carbon-components-svelte.js +0 -513
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Compiler } from "webpack";
|
|
2
|
+
import type { OptimizeCssOptions } from "./create-optimized-css";
|
|
3
|
+
declare class OptimizeCssPlugin {
|
|
4
|
+
private options;
|
|
5
|
+
constructor(options?: OptimizeCssOptions);
|
|
6
|
+
apply(compiler: Compiler): void;
|
|
7
|
+
}
|
|
8
|
+
export default OptimizeCssPlugin;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const utils_1 = require("../utils");
|
|
4
|
+
const compare_diff_1 = require("./compare-diff");
|
|
5
|
+
const create_optimized_css_1 = require("./create-optimized-css");
|
|
6
|
+
// Webpack plugin to optimize CSS for Carbon Svelte components.
|
|
7
|
+
class OptimizeCssPlugin {
|
|
8
|
+
constructor(options) {
|
|
9
|
+
this.options = {
|
|
10
|
+
verbose: (options === null || options === void 0 ? void 0 : options.verbose) !== false,
|
|
11
|
+
preserveAllIBMFonts: (options === null || options === void 0 ? void 0 : options.preserveAllIBMFonts) === true,
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
apply(compiler) {
|
|
15
|
+
const { webpack: { Compilation, NormalModule, sources: { RawSource }, }, } = compiler;
|
|
16
|
+
compiler.hooks.thisCompilation.tap(OptimizeCssPlugin.name, (compilation) => {
|
|
17
|
+
const hooks = NormalModule.getCompilationHooks(compilation);
|
|
18
|
+
const ids = [];
|
|
19
|
+
hooks.beforeSnapshot.tap(OptimizeCssPlugin.name, ({ buildInfo }) => {
|
|
20
|
+
if (buildInfo === null || buildInfo === void 0 ? void 0 : buildInfo.fileDependencies) {
|
|
21
|
+
for (const id of buildInfo.fileDependencies) {
|
|
22
|
+
if ((0, utils_1.isCarbonSvelteImport)(id)) {
|
|
23
|
+
ids.push(id);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
compilation.hooks.processAssets.tap({
|
|
29
|
+
name: OptimizeCssPlugin.name,
|
|
30
|
+
stage: Compilation.PROCESS_ASSETS_STAGE_DERIVED,
|
|
31
|
+
}, (assets) => {
|
|
32
|
+
// Skip processing if no Carbon Svelte imports are found.
|
|
33
|
+
if (ids.length === 0)
|
|
34
|
+
return;
|
|
35
|
+
for (const [id] of Object.entries(assets)) {
|
|
36
|
+
if ((0, utils_1.isCssFile)(id)) {
|
|
37
|
+
const original_css = assets[id].source();
|
|
38
|
+
const optimized_css = (0, create_optimized_css_1.createOptimizedCss)(original_css, ids, this.options);
|
|
39
|
+
compilation.updateAsset(id, new RawSource(optimized_css));
|
|
40
|
+
if (this.options.verbose) {
|
|
41
|
+
(0, compare_diff_1.compareDiff)({ original_css, optimized_css, id });
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
exports.default = OptimizeCssPlugin;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.compareDiff = void 0;
|
|
4
|
+
const constants_1 = require("../constants");
|
|
5
|
+
const formatter = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
|
|
6
|
+
function toHumanReadableSize(size_in_kb) {
|
|
7
|
+
if (size_in_kb >= constants_1.BITS_DENOM) {
|
|
8
|
+
return formatter.format(size_in_kb / constants_1.BITS_DENOM) + " MB";
|
|
9
|
+
}
|
|
10
|
+
return formatter.format(size_in_kb) + " kB";
|
|
11
|
+
}
|
|
12
|
+
function percentageDiff(a, b) {
|
|
13
|
+
return formatter.format(((a - b) / a) * 100) + "%";
|
|
14
|
+
}
|
|
15
|
+
function stringSizeInKB(str) {
|
|
16
|
+
const blob = new Blob([str], { type: "text/plain" });
|
|
17
|
+
return blob.size / constants_1.BITS_DENOM;
|
|
18
|
+
}
|
|
19
|
+
function padIfNeeded(a, b) {
|
|
20
|
+
return a.length > b.length ? a : a.padStart(b.length, " ");
|
|
21
|
+
}
|
|
22
|
+
function compareDiff(props) {
|
|
23
|
+
const { original_css, optimized_css, id } = props;
|
|
24
|
+
const original_size = stringSizeInKB(original_css.toString());
|
|
25
|
+
const optimized_size = stringSizeInKB(optimized_css);
|
|
26
|
+
const original = toHumanReadableSize(original_size);
|
|
27
|
+
const optimized = toHumanReadableSize(optimized_size);
|
|
28
|
+
const original_display = padIfNeeded(original, optimized);
|
|
29
|
+
const optimized_display = padIfNeeded(optimized, original);
|
|
30
|
+
const diff = percentageDiff(original_size, optimized_size);
|
|
31
|
+
console.log("\n");
|
|
32
|
+
console.log("Optimized", id);
|
|
33
|
+
console.log("Before:", original_display);
|
|
34
|
+
console.log("After: ", optimized_display, `(-${diff})\n`);
|
|
35
|
+
}
|
|
36
|
+
exports.compareDiff = compareDiff;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export type OptimizeCssOptions = {
|
|
2
|
+
/**
|
|
3
|
+
* By default, the plugin will print the size
|
|
4
|
+
* difference between the original and optimized CSS.
|
|
5
|
+
*
|
|
6
|
+
* Set to `false` to disable verbose logging.
|
|
7
|
+
* @default true
|
|
8
|
+
*/
|
|
9
|
+
verbose?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* By default, pre-compiled Carbon StyleSheets ship `@font-face` rules
|
|
12
|
+
* for all available IBM Plex fonts, many of which are not actually
|
|
13
|
+
* used in Carbon Svelte components.
|
|
14
|
+
*
|
|
15
|
+
* The default behavior is to preserve the following IBM Plex fonts:
|
|
16
|
+
* - IBM Plex Sans (300/400/600-weight and normal-font-style rules)
|
|
17
|
+
* - IBM Plex Mono (400-weight and normal-font-style rules)
|
|
18
|
+
*
|
|
19
|
+
* Set to `true` to disable this behavior and
|
|
20
|
+
* retain *all* IBM Plex `@font-face` rules.
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
preserveAllIBMFonts?: boolean;
|
|
24
|
+
};
|
|
25
|
+
export declare function createOptimizedCss(original_css: Uint8Array | string, ids: string[], options?: OptimizeCssOptions): string;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.createOptimizedCss = void 0;
|
|
7
|
+
const node_path_1 = __importDefault(require("node:path"));
|
|
8
|
+
const postcss_1 = __importDefault(require("postcss"));
|
|
9
|
+
const postcss_discard_empty_1 = __importDefault(require("postcss-discard-empty"));
|
|
10
|
+
const component_index_1 = require("../component-index");
|
|
11
|
+
function createOptimizedCss(original_css, ids, options) {
|
|
12
|
+
const preserveAllIBMFonts = (options === null || options === void 0 ? void 0 : options.preserveAllIBMFonts) === true;
|
|
13
|
+
// List of Carbon classes that must be preserved in the CSS
|
|
14
|
+
// but that are not referenced in Carbon Svelte components.
|
|
15
|
+
const css_allowlist = [".bx--body"];
|
|
16
|
+
for (const id of ids) {
|
|
17
|
+
const { name } = node_path_1.default.parse(id);
|
|
18
|
+
if (name in component_index_1.components) {
|
|
19
|
+
css_allowlist.push(...component_index_1.components[name].classes);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
return (0, postcss_1.default)([
|
|
23
|
+
{
|
|
24
|
+
postcssPlugin: "postcss-plugin:carbon:optimize-css",
|
|
25
|
+
Rule(node) {
|
|
26
|
+
const selector = node.selector;
|
|
27
|
+
// Ensure that the selector contains a class.
|
|
28
|
+
if (selector.includes(".")) {
|
|
29
|
+
// Selectors may contain multiple classes, separated by a comma.
|
|
30
|
+
const classes = selector.split(",").filter((selectee) => {
|
|
31
|
+
var _a;
|
|
32
|
+
const value = (_a = selectee.trim()) !== null && _a !== void 0 ? _a : "";
|
|
33
|
+
// Some Carbon classes are prefixed with a tag for higher specificity.
|
|
34
|
+
// E.g., a.bx--header
|
|
35
|
+
const [, rest] = value.split(".");
|
|
36
|
+
return Boolean(rest);
|
|
37
|
+
});
|
|
38
|
+
let remove_rule = true;
|
|
39
|
+
for (const name of classes) {
|
|
40
|
+
for (const selector of css_allowlist) {
|
|
41
|
+
// If at least one class is in the allowlist, keep the rule.
|
|
42
|
+
// This is a simplistic approach and can be further optimized.
|
|
43
|
+
if (name.includes(selector)) {
|
|
44
|
+
remove_rule = false;
|
|
45
|
+
break;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
if (remove_rule) {
|
|
50
|
+
node.remove();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
AtRule(node) {
|
|
55
|
+
if (!preserveAllIBMFonts && node.name === "font-face") {
|
|
56
|
+
const attributes = {
|
|
57
|
+
"font-family": "",
|
|
58
|
+
"font-style": "",
|
|
59
|
+
"font-weight": "",
|
|
60
|
+
};
|
|
61
|
+
node.walkDecls((decl) => {
|
|
62
|
+
switch (decl.prop) {
|
|
63
|
+
case "font-family":
|
|
64
|
+
attributes["font-family"] = decl.value;
|
|
65
|
+
break;
|
|
66
|
+
case "font-style":
|
|
67
|
+
attributes["font-style"] = decl.value;
|
|
68
|
+
break;
|
|
69
|
+
case "font-weight":
|
|
70
|
+
attributes["font-weight"] = decl.value;
|
|
71
|
+
break;
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
const is_mono = attributes["font-style"] === "normal" &&
|
|
75
|
+
attributes["font-family"] === "IBM Plex Mono" &&
|
|
76
|
+
attributes["font-weight"] === "400";
|
|
77
|
+
const is_sans = attributes["font-style"] === "normal" &&
|
|
78
|
+
attributes["font-family"] === "IBM Plex Sans" &&
|
|
79
|
+
["300", "400", "600"].includes(attributes["font-weight"]);
|
|
80
|
+
if (!(is_sans || is_mono)) {
|
|
81
|
+
node.remove();
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
(0, postcss_discard_empty_1.default)(),
|
|
87
|
+
]).process(original_css).css;
|
|
88
|
+
}
|
|
89
|
+
exports.createOptimizedCss = createOptimizedCss;
|
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
standard?: Array<RegExp | string>;
|
|
5
|
-
deep?: RegExp[];
|
|
6
|
-
greedy?: RegExp[];
|
|
7
|
-
};
|
|
8
|
-
}
|
|
9
|
-
export declare function optimizeCss(options?: Partial<OptimizeCssOptions>): Rollup.Plugin;
|
|
10
|
-
export {};
|
|
1
|
+
import type { Plugin } from "vite";
|
|
2
|
+
import type { OptimizeCssOptions } from "./create-optimized-css";
|
|
3
|
+
export declare const optimizeCss: (options?: OptimizeCssOptions) => Plugin;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
exports.optimizeCss = void 0;
|
|
13
|
+
const utils_1 = require("../utils");
|
|
14
|
+
const compare_diff_1 = require("./compare-diff");
|
|
15
|
+
const create_optimized_css_1 = require("./create-optimized-css");
|
|
16
|
+
// Vite plugin (Rollup-compatible) to optimize CSS for Carbon Svelte components.
|
|
17
|
+
const optimizeCss = (options) => {
|
|
18
|
+
const verbose = (options === null || options === void 0 ? void 0 : options.verbose) !== false;
|
|
19
|
+
const ids = [];
|
|
20
|
+
return {
|
|
21
|
+
name: "vite:carbon:optimize-css",
|
|
22
|
+
apply: "build",
|
|
23
|
+
enforce: "post",
|
|
24
|
+
transform(_, id) {
|
|
25
|
+
if ((0, utils_1.isCarbonSvelteImport)(id)) {
|
|
26
|
+
ids.push(id);
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
generateBundle(_, bundle) {
|
|
30
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
31
|
+
// Skip processing if no Carbon Svelte imports are found.
|
|
32
|
+
if (ids.length === 0)
|
|
33
|
+
return;
|
|
34
|
+
for (const id in bundle) {
|
|
35
|
+
const file = bundle[id];
|
|
36
|
+
if (file.type === "asset" && (0, utils_1.isCssFile)(id)) {
|
|
37
|
+
const original_css = file.source;
|
|
38
|
+
const optimized_css = (0, create_optimized_css_1.createOptimizedCss)(original_css, ids, options);
|
|
39
|
+
file.source = optimized_css;
|
|
40
|
+
if (verbose) {
|
|
41
|
+
(0, compare_diff_1.compareDiff)({ original_css, optimized_css, id });
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
exports.optimizeCss = optimizeCss;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export
|
|
1
|
+
/// <reference types="svelte" />
|
|
2
|
+
import type { SveltePreprocessor } from "svelte/types/compiler/preprocess";
|
|
3
|
+
export declare const optimizeImports: SveltePreprocessor<"script">;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.optimizeImports = void 0;
|
|
7
|
+
const magic_string_1 = __importDefault(require("magic-string"));
|
|
8
|
+
const compiler_1 = require("svelte/compiler");
|
|
9
|
+
const component_index_1 = require("../component-index");
|
|
10
|
+
function rewriteImport(s, node, map) {
|
|
11
|
+
let content = "";
|
|
12
|
+
for (const specifier of node.specifiers) {
|
|
13
|
+
const fragment = map(specifier);
|
|
14
|
+
if (fragment)
|
|
15
|
+
content += fragment;
|
|
16
|
+
}
|
|
17
|
+
if (content)
|
|
18
|
+
s.overwrite(node.start, node.end, content);
|
|
19
|
+
}
|
|
20
|
+
const optimizeImports = () => {
|
|
21
|
+
return {
|
|
22
|
+
name: "carbon:optimize-imports",
|
|
23
|
+
script({ filename, content: raw }) {
|
|
24
|
+
// Skip files in node_modules to minimize unnecessary preprocessing
|
|
25
|
+
if (!filename)
|
|
26
|
+
return;
|
|
27
|
+
if (/node_modules/.test(filename))
|
|
28
|
+
return;
|
|
29
|
+
// Wrap the content in a `<script>` tag to parse it with the Svelte parser.
|
|
30
|
+
const content = `<script>${raw}</script>`;
|
|
31
|
+
const s = new magic_string_1.default(content);
|
|
32
|
+
(0, compiler_1.walk)((0, compiler_1.parse)(content), {
|
|
33
|
+
enter(node) {
|
|
34
|
+
if (node.type === "ImportDeclaration") {
|
|
35
|
+
const import_name = node.source.value;
|
|
36
|
+
switch (import_name) {
|
|
37
|
+
case "carbon-components-svelte" /* CarbonSvelte.Components */:
|
|
38
|
+
rewriteImport(s, node, ({ imported, local }) => {
|
|
39
|
+
var _a;
|
|
40
|
+
const import_path = (_a = component_index_1.components[imported.name]) === null || _a === void 0 ? void 0 : _a.path;
|
|
41
|
+
return import_path
|
|
42
|
+
? `import ${local.name} from "${import_path}";`
|
|
43
|
+
: "";
|
|
44
|
+
});
|
|
45
|
+
break;
|
|
46
|
+
case "carbon-icons-svelte" /* CarbonSvelte.Icons */:
|
|
47
|
+
case "carbon-pictograms-svelte" /* CarbonSvelte.Pictograms */:
|
|
48
|
+
rewriteImport(s, node, ({ imported, local }) => {
|
|
49
|
+
return `import ${local.name} from "${import_name}/lib/${imported.name}.svelte";`;
|
|
50
|
+
});
|
|
51
|
+
break;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
});
|
|
56
|
+
s.replace(/^<script>/, "");
|
|
57
|
+
s.replace(/<\/script>$/, "");
|
|
58
|
+
return {
|
|
59
|
+
code: s.toString(),
|
|
60
|
+
map: s.generateMap({ source: filename, hires: true }),
|
|
61
|
+
};
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
exports.optimizeImports = optimizeImports;
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export declare
|
|
4
|
-
export declare const readFile: typeof fs.readFile.__promisify__;
|
|
5
|
-
export declare function getPackageJson(subpath?: string): {
|
|
6
|
-
name?: string;
|
|
7
|
-
version?: string;
|
|
8
|
-
devDependencies?: Record<string, string>;
|
|
9
|
-
dependencies?: Record<string, string>;
|
|
10
|
-
};
|
|
11
|
-
export declare function getCarbonVersions(): {};
|
|
1
|
+
export declare function isSvelteFile(id: string): id is `${string}.svelte`;
|
|
2
|
+
export declare function isCssFile(id: string): id is `${string}.css`;
|
|
3
|
+
export declare function isCarbonSvelteImport(id: string): boolean;
|
package/dist/utils.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.isCarbonSvelteImport = exports.isCssFile = exports.isSvelteFile = void 0;
|
|
4
|
+
const constants_1 = require("./constants");
|
|
5
|
+
function isSvelteFile(id) {
|
|
6
|
+
return constants_1.RE_EXT_SVELTE.test(id);
|
|
7
|
+
}
|
|
8
|
+
exports.isSvelteFile = isSvelteFile;
|
|
9
|
+
function isCssFile(id) {
|
|
10
|
+
return constants_1.RE_EXT_CSS.test(id);
|
|
11
|
+
}
|
|
12
|
+
exports.isCssFile = isCssFile;
|
|
13
|
+
function isCarbonSvelteImport(id) {
|
|
14
|
+
return isSvelteFile(id) && id.includes("carbon-components-svelte" /* CarbonSvelte.Components */);
|
|
15
|
+
}
|
|
16
|
+
exports.isCarbonSvelteImport = isCarbonSvelteImport;
|
package/package.json
CHANGED
|
@@ -1,59 +1,33 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "carbon-preprocess-svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
|
-
"description": "
|
|
6
|
-
"
|
|
5
|
+
"description": "Svelte preprocessors for the Carbon Design System",
|
|
6
|
+
"author": "Eric Liu (https://github.com/metonym)",
|
|
7
7
|
"main": "./dist/index.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"import": "./dist/index.mjs",
|
|
12
|
-
"require": "./dist/index.js"
|
|
13
|
-
}
|
|
14
|
-
},
|
|
15
9
|
"scripts": {
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"build:api:icons": "ts-node src/build/build-icons",
|
|
20
|
-
"build:api:pictograms": "ts-node src/build/build-pictograms",
|
|
21
|
-
"build:lib": "run-p build:lib:*",
|
|
22
|
-
"build:lib:cjs": "esbuild src/index.cjs.ts --bundle --platform=node --target=node10.4 --external:purgecss --external:svelte-preprocess --external:typescript --outfile=dist/index.js",
|
|
23
|
-
"build:lib:esm": "esbuild src/index.ts --bundle --platform=node --target=es6 --format=esm --external:purgecss --external:svelte-preprocess --external:typescript --outfile=dist/index.mjs",
|
|
24
|
-
"build:lib:types": "tsc",
|
|
25
|
-
"prepack": "run-s build:api build:lib",
|
|
26
|
-
"test": "run-p test:*",
|
|
27
|
-
"test:unit": "ts-node tests/unit",
|
|
28
|
-
"test:integration": "ts-node tests/integration",
|
|
29
|
-
"format": "prettier --write '.'"
|
|
10
|
+
"index:components": "bun scripts/index-components.ts",
|
|
11
|
+
"prepack": "tsc -p tsconfig.build.json",
|
|
12
|
+
"format": "prettier --write ."
|
|
30
13
|
},
|
|
31
14
|
"dependencies": {
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
15
|
+
"magic-string": "^0.30.8",
|
|
16
|
+
"postcss": "^8.4.36",
|
|
17
|
+
"postcss-discard-empty": "^6.0.3"
|
|
35
18
|
},
|
|
36
19
|
"devDependencies": {
|
|
37
|
-
"@
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"carbon-components-svelte": "^0.63.0",
|
|
45
|
-
"esbuild": "^0.11.19",
|
|
46
|
-
"npm-run-all": "^4.1.5",
|
|
47
|
-
"prettier": "^2.6.2",
|
|
48
|
-
"prettier-plugin-svelte": "^2.7.0",
|
|
49
|
-
"rollup": "^2.70.2",
|
|
50
|
-
"svelte": "^3.47.0",
|
|
51
|
-
"totalist": "^3.0.0",
|
|
52
|
-
"ts-node": "^10.7.0"
|
|
20
|
+
"@types/bun": "latest",
|
|
21
|
+
"carbon-components-svelte": "0.85.0",
|
|
22
|
+
"prettier": "latest",
|
|
23
|
+
"svelte": "latest",
|
|
24
|
+
"typescript": "latest",
|
|
25
|
+
"vite": "latest",
|
|
26
|
+
"webpack": "latest"
|
|
53
27
|
},
|
|
54
28
|
"repository": {
|
|
55
29
|
"type": "git",
|
|
56
|
-
"url": "https://github.com/carbon-design-system/carbon-preprocess-svelte.git"
|
|
30
|
+
"url": "git+https://github.com/carbon-design-system/carbon-preprocess-svelte.git"
|
|
57
31
|
},
|
|
58
32
|
"homepage": "https://github.com/carbon-design-system/carbon-preprocess-svelte",
|
|
59
33
|
"bugs": "https://github.com/carbon-design-system/carbon-preprocess-svelte/issues",
|
|
@@ -63,15 +37,13 @@
|
|
|
63
37
|
"carbon preprocess",
|
|
64
38
|
"svelte",
|
|
65
39
|
"preprocessor",
|
|
66
|
-
"optimize imports"
|
|
40
|
+
"optimize imports",
|
|
41
|
+
"optimize CSS"
|
|
67
42
|
],
|
|
68
43
|
"files": [
|
|
69
44
|
"dist"
|
|
70
45
|
],
|
|
71
|
-
"
|
|
46
|
+
"maintainers": [
|
|
72
47
|
"Eric Liu (https://github.com/metonym)"
|
|
73
|
-
]
|
|
74
|
-
"resolutions": {
|
|
75
|
-
"path-parse": ">=1.0.7"
|
|
76
|
-
}
|
|
48
|
+
]
|
|
77
49
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
|
|
5
|
-
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
|
-
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
-
|
|
8
|
-
## [0.9.1](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.9.1) - 2022-06-19
|
|
9
|
-
|
|
10
|
-
- bump `svelte-preprocess` from v4.10.5 to v4.10.7
|
|
11
|
-
|
|
12
|
-
## [0.9.0](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.9.0) - 2022-04-17
|
|
13
|
-
|
|
14
|
-
- upgrade `carbon-components-svelte` to v0.63.0 and rebuild components API used by `optimizeImports`
|
|
15
|
-
- set latest major version of `carbon-pictograms-svelte` to `12`
|
|
16
|
-
|
|
17
|
-
## [0.8.2](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.8.2) - 2022-04-10
|
|
18
|
-
|
|
19
|
-
- set latest major version of `carbon-icons-svelte` to `11`
|
|
20
|
-
|
|
21
|
-
## [0.8.1](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.8.1) - 2022-04-10
|
|
22
|
-
|
|
23
|
-
- hot fix to re-build components imports map using a non-linked version of `carbon-components-svelte`
|
|
24
|
-
|
|
25
|
-
## [0.8.0](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.8.0) - 2022-04-10
|
|
26
|
-
|
|
27
|
-
- upgrade `@carbon/icons` to v11.0.1
|
|
28
|
-
- update `optimizeImports` to support `carbon-icons-svelte@11` component imports
|
|
29
|
-
|
|
30
|
-
## [0.7.0](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.7.0) - 2022-03-19
|
|
31
|
-
|
|
32
|
-
- upgrade `carbon-components-svelte` to v0.62.0 to account for the removed `Copy` component and inlined icon components
|
|
33
|
-
|
|
34
|
-
## [0.6.0](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.6.0) - 2021-07-11
|
|
35
|
-
|
|
36
|
-
- upgrade `carbon-components-svelte` to v0.40.0 to include `Breakpoint`, `Theme` components for `optimizeImports`
|
|
37
|
-
|
|
38
|
-
## [0.5.0](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.5.0) - 2021-07-05
|
|
39
|
-
|
|
40
|
-
- upgrade `carbon-components-svelte` to v0.39.0 to include `RecursiveList`, `TreeView` components for `optimizeImports`
|
|
41
|
-
|
|
42
|
-
## [0.4.0](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.4.0) - 2021-06-28
|
|
43
|
-
|
|
44
|
-
**Features**
|
|
45
|
-
|
|
46
|
-
- upgrade `carbon-components-svelte` to v0.38.0 to include `ProgressBar` component for `optimizeImports`
|
|
47
|
-
|
|
48
|
-
**Fixes**
|
|
49
|
-
|
|
50
|
-
- default `include` preprocessor entry test regex to high-level test option
|
|
51
|
-
|
|
52
|
-
## [0.3.0](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.3.0) - 2021-05-21
|
|
53
|
-
|
|
54
|
-
**Features**
|
|
55
|
-
|
|
56
|
-
- add `test` option to `include` preprocessor to filter filenames
|
|
57
|
-
|
|
58
|
-
**Fixes**
|
|
59
|
-
|
|
60
|
-
- support custom `test` regex per script/markup object in `include` preprocessor
|
|
61
|
-
|
|
62
|
-
## [0.2.0](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.2.0) - 2021-05-21
|
|
63
|
-
|
|
64
|
-
**Features**
|
|
65
|
-
|
|
66
|
-
- add `include` preprocessor that prepends or appends arbitrary content to the script and markup blocks
|
|
67
|
-
|
|
68
|
-
**Documentation**
|
|
69
|
-
|
|
70
|
-
- enrich preprocessor descriptions
|
|
71
|
-
- simplify sample SvelteKit set-up
|
|
72
|
-
|
|
73
|
-
## [0.1.0](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.1.0) - 2021-05-11
|
|
74
|
-
|
|
75
|
-
**Documentation**
|
|
76
|
-
|
|
77
|
-
- improve preprocessor descriptions, add sample SvelteKit set-up
|
|
78
|
-
|
|
79
|
-
## [0.1.0-rc.5](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.1.0-rc.5) - 2021-05-11
|
|
80
|
-
|
|
81
|
-
**Fixes**
|
|
82
|
-
|
|
83
|
-
- add separate entry point for CJS bundle
|
|
84
|
-
|
|
85
|
-
## [0.1.0-rc.4](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.1.0-rc.4) - 2021-05-10
|
|
86
|
-
|
|
87
|
-
**Fixes**
|
|
88
|
-
|
|
89
|
-
- add TypeScript as a direct dependency
|
|
90
|
-
|
|
91
|
-
## [0.1.0-rc.3](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.1.0-rc.3) - 2021-05-10
|
|
92
|
-
|
|
93
|
-
**Features**
|
|
94
|
-
|
|
95
|
-
- use `svelte-preprocess` in the `optimizeCss` plugin to parse TypeScript syntax in Svelte components
|
|
96
|
-
|
|
97
|
-
**Documentation**
|
|
98
|
-
|
|
99
|
-
- list available theme options for the `elements` preprocessor
|
|
100
|
-
|
|
101
|
-
## [0.1.0-rc.2](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.1.0-rc.2) - 2021-05-08
|
|
102
|
-
|
|
103
|
-
**Fixes**
|
|
104
|
-
|
|
105
|
-
- add `purgecss` as a dependency and exclude from bundle
|
|
106
|
-
|
|
107
|
-
**Documentation**
|
|
108
|
-
|
|
109
|
-
- add `optimizeCss` API to README
|
|
110
|
-
|
|
111
|
-
## [0.1.0-rc.1](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.1.0-rc.1) - 2021-05-08
|
|
112
|
-
|
|
113
|
-
**Fixes**
|
|
114
|
-
|
|
115
|
-
- elements: only replace token in property instead of the entire property
|
|
116
|
-
- elements: do not emit warning if token is falsy
|
|
117
|
-
- add exports map to `package.json` so `svelte.config.js` works properly
|
|
118
|
-
- temporarily omit `optimizeCss` plugin from library
|
|
119
|
-
|
|
120
|
-
**Documentation**
|
|
121
|
-
|
|
122
|
-
- use ESM instead of CJS syntax in `svelte.config.js` usage examples
|
|
123
|
-
|
|
124
|
-
## [0.1.0-rc.0](https://github.com/carbon-design-system/carbon-preprocess-svelte/releases/tag/v0.1.0-rc.0) - 2021-05-07
|
|
125
|
-
|
|
126
|
-
- initial release
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as build from "../build";
|
|
2
|
-
export declare type TokenTypeStyles = build.type.TypeStylesComputed | {
|
|
3
|
-
css: string;
|
|
4
|
-
breakpoints: Array<{
|
|
5
|
-
mediaQuery: string;
|
|
6
|
-
css: string;
|
|
7
|
-
}>;
|
|
8
|
-
};
|
|
9
|
-
export declare type TokenUI = "interactive-01" | "interactive-02" | "interactive-03" | "interactive-04" | "ui-background" | "ui-01" | "ui-02" | "ui-03" | "ui-04" | "ui-05" | "text-01" | "text-02" | "text-03" | "text-04" | "text-05" | "text-error" | "icon-01" | "icon-02" | "icon-03" | "link-01" | "inverse-link" | "field-01" | "field-02" | "inverse-01" | "inverse-02" | "support-01" | "support-02" | "support-03" | "support-04" | "inverse-support-01" | "inverse-support-02" | "inverse-support-03" | "inverse-support-04" | "overlay-01" | "danger-01" | "danger-02" | "focus" | "inverse-focus-ui" | "hover-primary" | "active-primary" | "hover-primary-text" | "hover-secondary" | "active-secondary" | "hover-tertiary" | "active-tertiary" | "hover-ui" | "hover-light-ui" | "hover-selected-ui" | "active-ui" | "active-light-ui" | "selected-ui" | "selected-light-ui" | "inverse-hover-ui" | "hover-danger" | "active-danger" | "hover-row" | "visited-link" | "disabled-01" | "disabled-02" | "disabled-03" | "highlight" | "decorative-01" | "button-separator" | "skeleton-01" | "skeleton-02" | "brand-01" | "brand-02" | "brand-03" | "active-01" | "hover-field" | "danger";
|
|
10
|
-
export declare type v10_theme = "white" | "g10" | "g90" | "g100";
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { BuildApi } from "../build";
|
|
2
|
-
/**
|
|
3
|
-
* @example
|
|
4
|
-
* "Add16"
|
|
5
|
-
* "Add20"
|
|
6
|
-
*/
|
|
7
|
-
export declare type IconName = string;
|
|
8
|
-
export interface BuildIcons extends BuildApi {
|
|
9
|
-
icons: Record<IconName, CarbonIconModule>;
|
|
10
|
-
}
|
|
11
|
-
interface CarbonIconModule {
|
|
12
|
-
attributes: Record<string, any>;
|
|
13
|
-
children: string;
|
|
14
|
-
}
|
|
15
|
-
export {};
|