Align with Tailwind 3.3.3 [publish]

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+## 0.6.2
+
+Align with Tailwind 3.3.3:
+
+- Updated preflight with reset of dialog padding
+- Fix gradients implementation
+
 ## 0.6.1
 
 Use exports map

README.md

@@ -11,7 +11,16 @@ Inspired by [UnoCSS](https://github.com/unocss/unocss).
 import { downwind } from "@arnaud-barre/downwind/vite";
 import { defineConfig } from "vite";
 
-export default defineConfig({ plugins: [downwind()] });
+export default defineConfig({
+  plugins: [downwind()],
+  css: {
+    transformer: "lightningcss",
+    lightningcss: { drafts: { nesting: true } },
+  },
+  build: {
+    cssMinify: "lightningcss",
+  },
+});
 ```
 
 Add `import "virtual:@downwind/base.css";` and `import "virtual:@downwind/utils.css";` to your code.
@@ -20,17 +29,6 @@ Add `import "virtual:@downwind/base.css";` and `import "virtual:@downwind/utils.
 
 > ⚠️ Please use it with caution, under the hood we use [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to detect the class changes. Which means not only your manual changes but also the changes made by your scripts will be detected and included in the stylesheet. This could cause some misalignment between dev and the production build when you add dynamic classes based on some logic in script tags. We recommended adding your dynamic parts to the safelist or setup UI regression tests for your production build if possible.
 
-To use nesting, install [postcss-nested](https://github.com/postcss/postcss-nested) and add it to the postcss config:
-
-```js
-// postcss.config.cjs
-module.exports = {
-  plugins: {
-    "postcss-nested": {},
-  },
-};
-```
-
 ## Usage with [esbuild](https://github.com/evanw/esbuild)
 
 ```ts
@@ -222,6 +220,7 @@ To avoid parsing errors in WebStorm, double quotes are required. And because [th
 ### Almost exhaustive list of non-supported features
 
 - Container queries, but this will probably be added later
+- Some `addVariant` capabilities like generating at-rules. Also something useful to support in the future
 - [prefix](https://tailwindcss.com/docs/configuration#prefix), [separator](https://tailwindcss.com/docs/configuration#separator) and [important](https://tailwindcss.com/docs/configuration#important) configuration options
 - These deprecated utils: `transform`, `transform-cpu`, `decoration-slice` `decoration-clone`, `filter`, `backdrop-filter`, `blur-0`
 - These deprecated colors: `lightBlue`, `warmGray`, `trueGray`, `coolGray`, `blueGray`

package.json

@@ -3,7 +3,7 @@
   "description": "A PostCSS-less implementation of Tailwind based on Lightning CSS",
   "private": true,
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "license": "MIT",
   "scripts": {
@@ -22,17 +22,17 @@
     "quoteProps": "consistent"
   },
   "dependencies": {
-    "@arnaud-barre/config-loader": "^0.6.2",
-    "lightningcss": "^1.20.0"
+    "@arnaud-barre/config-loader": "^0.7.1",
+    "lightningcss": "^1.21.5"
   },
   "devDependencies": {
-    "@arnaud-barre/prettier-plugin-sort-imports": "^0.1.0",
-    "@arnaud-barre/eslint-config": "^2.0.3",
-    "@arnaud-barre/tnode": "^0.17.1",
-    "@types/node": "^16.18.30",
-    "eslint": "^8.40.0",
-    "prettier": "^3.0.0-alpha.11",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.5"
+    "@arnaud-barre/prettier-plugin-sort-imports": "^0.1.2",
+    "@arnaud-barre/eslint-config": "^3.0.3",
+    "@arnaud-barre/tnode": "^0.19.1",
+    "@types/node": "^18.17.5",
+    "eslint": "^8.47.0",
+    "prettier": "^3.0.1",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9"
   }
 }

playground/playground.ts

@@ -36,7 +36,6 @@ console.log = (...args: any[]) =>
 const downwind = initDownwindWithConfig({
   // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
   // @ts-ignore (file exist locally but not on CI)
-  // eslint-disable-next-line import/no-unresolved
   config: (await import("./config.ts")).config,
 });
 downwind.scan("./input.ts");

playground/vite/downwind.config.ts

@@ -1,4 +1,4 @@
-import type { DownwindConfig } from "../../src/types";
+import type { DownwindConfig } from "../../src/types.d.ts";
 
 export const config: DownwindConfig = {
   blocklist: ["container"],

playground/vite/package.json

@@ -4,7 +4,6 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "tsc": "tsc",
     "build": "vite build",
     "preview": "vite preview"
   },
@@ -13,10 +12,11 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "@vitejs/plugin-react-swc": "^3.3.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.5"
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "lightningcss": "^1.21.5",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9"
   }
 }

playground/vite/src/App.tsx

@@ -6,7 +6,7 @@ export const App = () => {
 
   return (
     <div className={styles["container"]}>
-      <h1 className="font-bold text-xl">Vite + React</h1>
+      <h1 className={styles["title"]}>Vite + React</h1>
       <div className="p-4 text-lg">
         <button
           className="btn btn-green"

playground/vite/src/app.module.css

@@ -1,3 +1,7 @@
 .container {
   @apply p-12 text-center;
+
+  & .title {
+    @apply font-bold text-xl;
+  }
 }

playground/vite/tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
     "noEmit": true,
 
     /* Linting */

playground/vite/vite.config.ts

@@ -1,6 +1,15 @@
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
-import { downwind } from "../../dist/vitePlugin.js";
+import { downwind } from "../../dist/vite.js";
 
-// eslint-disable-next-line import/no-default-export
-export default defineConfig({ plugins: [react(), downwind()] });
+// eslint-disable-next-line @arnaud-barre/no-default-export
+export default defineConfig({
+  plugins: [react(), downwind()],
+  css: {
+    transformer: "lightningcss",
+    lightningcss: { drafts: { nesting: true } },
+  },
+  build: {
+    cssMinify: "lightningcss",
+  },
+});