1"use strict"; 2 3Object.defineProperty(exports, "__esModule", { 4 value: true 5}); 6exports.convertLightningCssToReactNativeWebStyleSheet = convertLightningCssToReactNativeWebStyleSheet; 7exports.matchCssModule = matchCssModule; 8exports.transformCssModuleWeb = transformCssModuleWeb; 9function _css() { 10 const data = require("./css"); 11 _css = function () { 12 return data; 13 }; 14 return data; 15} 16const RNW_CSS_CLASS_ID = '_'; 17async function transformCssModuleWeb(props) { 18 const { 19 transform 20 } = require('lightningcss'); 21 22 // TODO: Add bundling to resolve imports 23 // https://lightningcss.dev/bundling.html#bundling-order 24 25 const cssResults = transform({ 26 filename: props.filename, 27 code: Buffer.from(props.src), 28 sourceMap: props.options.sourceMap, 29 cssModules: { 30 // Prevent renaming CSS variables to ensure 31 // variables created in global files are available. 32 dashedIdents: false 33 }, 34 // cssModules: true, 35 projectRoot: props.options.projectRoot, 36 minify: props.options.minify 37 }); 38 const codeAsString = cssResults.code.toString(); 39 const { 40 styles, 41 reactNativeWeb, 42 variables 43 } = convertLightningCssToReactNativeWebStyleSheet(cssResults.exports); 44 let outputModule = `module.exports=Object.assign(${JSON.stringify(styles)},{unstable_styles:${JSON.stringify(reactNativeWeb)}},${JSON.stringify(variables)});`; 45 if (props.options.dev) { 46 const runtimeCss = (0, _css().wrapDevelopmentCSS)({ 47 ...props, 48 src: codeAsString 49 }); 50 outputModule += '\n' + runtimeCss; 51 } 52 return { 53 output: outputModule, 54 css: cssResults.code, 55 map: cssResults.map 56 }; 57} 58function convertLightningCssToReactNativeWebStyleSheet(input) { 59 const styles = {}; 60 const reactNativeWeb = {}; 61 const variables = {}; 62 // e.g. { container: { name: 'ahs8IW_container', composes: [], isReferenced: false }, } 63 Object.entries(input).map(([key, value]) => { 64 // order matters here 65 let className = value.name; 66 if (value.composes.length) { 67 className += ' ' + value.composes.map(value => value.name).join(' '); 68 } 69 70 // CSS Variables will be `{string: string}` 71 if (key.startsWith('--')) { 72 variables[key] = className; 73 } 74 styles[key] = className; 75 reactNativeWeb[key] = { 76 $$css: true, 77 [RNW_CSS_CLASS_ID]: className 78 }; 79 return { 80 [key]: { 81 $$css: true, 82 [RNW_CSS_CLASS_ID]: className 83 } 84 }; 85 }); 86 return { 87 styles, 88 reactNativeWeb, 89 variables 90 }; 91} 92function matchCssModule(filePath) { 93 return !!/\.module(\.(native|ios|android|web))?\.(css|s[ac]ss)$/.test(filePath); 94} 95//# sourceMappingURL=css-modules.js.map