Skip to content

Commit

Permalink
Tailwind 3.4.2 [publish]
Browse files Browse the repository at this point in the history
  • Loading branch information
ArnaudBarre committed Apr 20, 2024
1 parent 726c2cf commit bc7078e
Show file tree
Hide file tree
Showing 21 changed files with 1,022 additions and 704 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

## Unreleased

## 0.7.5

- Align `base.css` with Tailwind 3.4.2
- Support named color (ie `text-[red]` generate a color utility)
- Skip merging of utilities that contains vendor prefixes

## 0.7.4

- Actually fix plugin usage in build watch mode
Expand Down
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ export const config: DownwindConfig = async () => {

## Differences with Tailwind

The current implementation aligns with Tailwind 3.4.2.

### Components

Downwind doesn't have the notion of components, but custom rules can be injected before core rules by using `injectFirst: true`.
Expand Down
Binary file modified bun.lockb
Binary file not shown.
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "A bundler-first & PostCSS-independent implementation of Tailwind",
"private": true,
"type": "module",
"version": "0.7.4",
"version": "0.7.5",
"author": "Arnaud Barré (https://github.com/ArnaudBarre)",
"license": "MIT",
"scripts": {
Expand All @@ -28,14 +28,14 @@
"@arnaud-barre/config-loader": "^0.7.1"
},
"devDependencies": {
"@arnaud-barre/eslint-config": "^4.0.1",
"@arnaud-barre/eslint-config": "^4.1.1",
"@arnaud-barre/prettier-plugin-sort-imports": "^0.1.3",
"@arnaud-barre/tnode": "^0.19.2",
"@types/node": "^20.10.5",
"eslint": "^8.56.0",
"lightningcss": "^1.22.1",
"@types/node": "^20.12.7",
"eslint": "^8.57.0",
"lightningcss": "^1.24.1",
"prettier": "3.0.3",
"typescript": "^5.3.3",
"vite": "^5.0.10"
"typescript": "^5.4.5",
"vite": "^5.2.9"
}
}
Binary file modified playground/vite/bun.lockb
Binary file not shown.
12 changes: 6 additions & 6 deletions playground/vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.45",
"@types/react-dom": "^18.2.18",
"@vitejs/plugin-react-swc": "^3.5.0",
"lightningcss": "^1.22.1",
"typescript": "^5.3.3",
"vite": "^5.0.10"
"@types/react": "^18.2.79",
"@types/react-dom": "^18.2.25",
"@vitejs/plugin-react-swc": "^3.6.0",
"lightningcss": "^1.24.1",
"typescript": "^5.4.5",
"vite": "^5.2.9"
}
}
801 changes: 410 additions & 391 deletions playground/vite/yarn.lock

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions src/base/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ textarea {
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
Expand All @@ -190,9 +191,9 @@ select {
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
Expand Down
6 changes: 5 additions & 1 deletion src/coreRules.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1023,7 +1023,11 @@ export const getCoreRules = ({
"background-blend-mode",
blendModes,
),
mixBlendMode: enumRule("mix-blend-", "mix-blend-mode", blendModes),
mixBlendMode: enumRule(
"mix-blend-",
"mix-blend-mode",
blendModes.concat(["plus-darker", "plus-lighter"]),
),
// Non-compliant: incompatible with ring
boxShadow: complexThemeRule("shadow", theme.boxShadow, (value) =>
typeof value === "string"
Expand Down
21 changes: 13 additions & 8 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -572,17 +572,12 @@ export const initDownwindWithConfig = ({
nextLines = nextMatch ? getLines(nextMatch) : undefined;
if (
lines.length === nextLines?.length &&
nextLines.every((l, i) => l === lines[i])
nextLines.every((l, i) => l === lines[i]) &&
!isUnsafeSelector(selector)
) {
utilsOutput += `${indentation}${selector},\n`;
} else {
utilsOutput += printBlock(
selector,
match.type === "Rule"
? toCSS(match.ruleEntry, match.important)
: [arbitraryPropertyMatchToLine(match)],
indentation,
);
utilsOutput += printBlock(selector, lines, indentation);
}
}

Expand Down Expand Up @@ -689,6 +684,16 @@ const isMatchesGroupEmpty = (group: MatchesGroup) => {
const getOrder = (match: Match) =>
match.type === "Rule" ? match.ruleEntry.order : Infinity;

// If selector contains a vendor prefix after a pseudo element or class,
// we consider them separately because merging the declarations into
// a single rule will cause browsers that do not understand the
// vendor prefix to throw out the whole rule
// lightningcss smartly separate them afterward, but esbuild does not
// For `:has`, for people that really want progressive enhancement for
// they CSS should use lightningcss as a post processor
const isUnsafeSelector = (selector: string) =>
selector.includes(":-") || selector.includes("::-");

export const staticRules: typeof staticRulesDeclaration = (rules) =>
Object.entries(rules).map(([key, value]) => [key, Object.entries(value)]);

Expand Down
2 changes: 0 additions & 2 deletions src/theme/getBaseTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@ export const getBaseTheme = (): DownwindTheme => ({
},
borderColor: (theme) => ({
...theme("colors"),
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
DEFAULT: theme("colors")["gray-200"] ?? "currentColor",
}),
borderOpacity: (theme) => theme("opacity"),
Expand Down Expand Up @@ -725,7 +724,6 @@ export const getBaseTheme = (): DownwindTheme => ({
8: "8px",
},
ringColor: (theme) => ({
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
DEFAULT: theme("colors")["blue-500"] ?? "#3b82f6",
...theme("colors"),
}),
Expand Down
2 changes: 1 addition & 1 deletion src/vitePlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ const getBodyJson = <T>(req: IncomingMessage) =>
try {
resolve(JSON.parse(body));
} catch (e) {
reject(e);
reject(e as Error);
}
});
});
Expand Down
6 changes: 5 additions & 1 deletion tests/generate.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const cases: [name: string, content: string, config?: UserConfig][] = [
],
[
"arbitrary-values",
"inset-[-10px] pt-[100px] w-[45%] text-[#ddd] text-[#f009] text-[12px] text-[10px] animate-[highlight_1s_ease-in-out_1] bg-[#ddd]/50 bg-[--primary] bg-red-500/[--opacity] text-[19px]/7 text-[19px]/[27px]",
"inset-[-10px] pt-[100px] w-[45%] text-[#ddd] text-[#f009] text-[red] text-[transparent] text-[12px] text-[10px] animate-[highlight_1s_ease-in-out_1] bg-[#ddd]/50 bg-[--primary] bg-red-500/[--opacity] text-[19px]/7 text-[19px]/[27px]",
],
[
"line height modifier",
Expand All @@ -111,6 +111,10 @@ const cases: [name: string, content: string, config?: UserConfig][] = [
["max-screen", "sm:max-md:p-2"],
["min-* max=*", "min-[900px]:p-4 max-[1200px]:m-4"],
["group-nested-media", "p-1 sm:p-3 sm:print:p-2 m-1 sm:m-3 sm:print:m-2"],
[
"skip merge for vendor prefixed",
"[&:-moz-focusring]:outline-none outline-none",
],
["media-order-stable-1", "portrait:p-1 landscape:p-1"],
["media-order-stable-2", "landscape:p-1 portrait:p-1"],
["supports-*", "supports-[container-type]:grid supports-[display:grid]:grid"],
Expand Down
2 changes: 2 additions & 0 deletions tests/snapshots/codegen-omit.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions tests/snapshots/codegen.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions tests/snapshots/esbuildPlugin.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 18 additions & 1 deletion tests/snapshots/generate.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion tests/snapshots/vite-minify.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 4 additions & 14 deletions tests/snapshots/vite.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 6 additions & 2 deletions tests/vitePlugin.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@ pluginSnapshotTest("vite", async () => {
root,
plugins: [downwind()],
logLevel: "warn",
css: { transformer: "lightningcss" },
build: { cssMinify: false, target: ["chrome104"] },
css: {
transformer: "lightningcss",
// eslint-disable-next-line no-bitwise
lightningcss: { targets: { chrome: 104 << 16 } },
},
build: { cssMinify: false },
configFile: false,
});
return readFileSync(
Expand Down
Loading

0 comments on commit bc7078e

Please sign in to comment.