diff --git a/nativescript.webpack.js b/nativescript.webpack.js index 44319d8..7d367c6 100644 --- a/nativescript.webpack.js +++ b/nativescript.webpack.js @@ -11,7 +11,7 @@ module.exports = (webpack) => { const addPostCSSPlugins = (options = {}) => { return webpack.merge(options, { postcssOptions: { - plugins: ["tailwindcss", "@nativescript/tailwind", "@csstools/postcss-is-pseudo-class"], + plugins: ["postcss-preset-env", "@tailwindcss/postcss", "@nativescript/tailwind", "@csstools/postcss-is-pseudo-class"], }, }); }; diff --git a/package.json b/package.json index 7865e90..ac0abe1 100644 --- a/package.json +++ b/package.json @@ -35,12 +35,14 @@ "license": "MIT", "devDependencies": { "@nativescript/webpack": "^5.0.8", - "postcss": "8.4.16", - "tailwindcss": "^3.4.0" + "postcss": "^8.4.16", + "tailwindcss": "^4.0.0" }, "dependencies": { "@hookun/parse-animation-shorthand": "^0.1.4", - "@csstools/postcss-is-pseudo-class": "4.0.4" + "@csstools/postcss-is-pseudo-class": "~5.0.1", + "@tailwindcss/postcss": "^4.0.0", + "postcss-preset-env": "^10.1.3" }, "peerDependencies": { "postcss": "^8.0.0" diff --git a/src/removeUnsupported.js b/src/removeUnsupported.js index 73a130a..46e8287 100644 --- a/src/removeUnsupported.js +++ b/src/removeUnsupported.js @@ -50,6 +50,13 @@ module.exports = (options = { debug: false }) => { return rule.remove(); } + // replace :root and :host pseudo selector, introduced in Tailwind 4+ with .ns-root for var handling. + if (rule.selector.includes(":root") || rule.selector.includes(":host")) { + rule.selectors = rule.selectors.map((selector) => + selector.replace(/:root/, ".ns-root").replace(/:host/, ".ns-root") + ); + } + // remove rules with unsupported selectors if (!isSupportedSelector(rule.selector)) { return rule.remove(); @@ -99,6 +106,18 @@ module.exports = (options = { debug: false }) => { } } + // invalid with core 8.8+ at moment + // Note: could be supported at somepoint + if (decl.prop === "placeholder-color" && decl.value?.includes("color-mix")) { + return decl.remove(); + } + + // invalid with core 8.8+ at moment + // Note: could be supported at somepoint + if (decl.value?.includes("currentColor")) { + return decl.remove(); + } + // replace vertical-align: middle // with vertical-align: center if (decl.prop === "vertical-align") { @@ -219,6 +238,12 @@ const supportedProperties = { "margin-left": true, "margin-right": true, "margin-top": true, + "margin-block": true, + "margin-block-start": true, + "margin-block-end": true, + "margin-inline": true, + "margin-inline-start": true, + "margin-inline-end": true, "min-height": true, "min-width": true, "off-background-color": true,
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: