Merge pull request #2 from natac13/chore/include-important

chore: include important declaration in css global styles from WP

README.md

@@ -29,6 +29,10 @@ module.exports = {
 
 The `globalStyles` option is required. It should be the contents of the WordPress global stylesheet.
 
+## ⚠️ Warning
+
+Any `!important` declarations in the WordPress global stylesheet will be preserved in the TailwindCSS base and components. Therefore, you should keep this in mind when writing your own TailwindCSS styles. And to check the TailwindCSS Intellisense to see when `!important` is being used.
+
 ## 🪪 License
 
 MIT

index.js

@@ -85,7 +85,8 @@ module.exports = plugin.withOptions(
 						}
 
 						if (property.startsWith('--')) {
-							cssVariables[property] = value.replace(' !important', '')
+							// cssVariables[property] = value.replace(' !important', '')
+							cssVariables[property] = value
 						}
 					}
 					continue
@@ -102,7 +103,8 @@ module.exports = plugin.withOptions(
 						continue
 					}
 					const property = declaration.property
-					const value = declaration.value?.replace(' !important', '')
+					// const value = declaration.value?.replace(' !important', '')
+					const value = declaration.value
 
 					if (!property || !value) {
 						continue
@@ -135,7 +137,8 @@ module.exports = plugin.withOptions(
 							continue
 						}
 						const property = declaration.property
-						const value = declaration.value?.replace(' !important', '')
+						// const value = declaration.value?.replace(' !important', '')
+						const value = declaration.value
 
 						if (!property || !value) {
 							continue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-wp-global-styles",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A TailwindCSS Plugin to take global styles from WordPress and convert them to TailwindCSS",
   "main": "./index.js",
   "types": "./index.d.ts",