@lwc/style-compiler
Version:
Transform style sheet to be consumed by the LWC engine
57 lines • 3.06 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/*
* Copyright (c) 2018, salesforce.com, inc.
* All rights reserved.
* SPDX-License-Identifier: MIT
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
*/
const postcss_1 = __importDefault(require("postcss"));
const postcss_selector_parser_1 = __importDefault(require("postcss-selector-parser"));
const validate_1 = __importDefault(require("./custom-properties/validate"));
const validate_2 = __importDefault(require("./no-id-selectors/validate"));
const transform_1 = __importDefault(require("./css-import/transform"));
const transform_2 = __importDefault(require("./selector-scoping/transform"));
const transform_3 = __importDefault(require("./custom-properties/transform"));
function selectorProcessorFactory(config, transformConfig) {
return postcss_selector_parser_1.default(root => {
validate_2.default(root);
transform_2.default(root, transformConfig);
});
}
exports.default = postcss_1.default.plugin('postcss-plugin-lwc', (pluginConfig) => {
// We need 2 types of selectors processors, since transforming the :host selector make the selector
// unusable when used in the context of the native shadow and vice-versa.
const nativeShadowSelectorProcessor = selectorProcessorFactory(pluginConfig, { transformHost: false });
const fakeShadowSelectorProcessor = selectorProcessorFactory(pluginConfig, { transformHost: true });
return (root, result) => {
const { customProperties } = pluginConfig;
transform_1.default(root, result);
if (!customProperties || !customProperties.allowDefinition) {
validate_1.default(root);
}
transform_3.default(root, result);
root.walkRules(rule => {
// Let transform the selector with the 2 processors.
const fakeShadowSelector = fakeShadowSelectorProcessor.processSync(rule);
const nativeShadowSelector = nativeShadowSelectorProcessor.processSync(rule);
rule.selector = fakeShadowSelector;
// If the resulting selector are different it means that the selector use the :host selector. In
// this case we need to duplicate the CSS rule and assign the other selector.
if (fakeShadowSelector !== nativeShadowSelector) {
// The cloned selector is inserted before the currently processed selector to avoid processing
// again the cloned selector.
const currentRule = rule;
const clonedRule = rule.cloneBefore();
clonedRule.selector = nativeShadowSelector;
// Safe a reference to each other
clonedRule._isHostNative = true;
currentRule._isFakeNative = true;
}
});
};
});
//# sourceMappingURL=lwc-postcss-plugin.js.map