Skip to content

Commit

Permalink
fix(@angular-devkit/build-angular): add tailwindcss support for ver…
Browse files Browse the repository at this point in the history
…sion 3

(cherry picked from commit 0323a35)
  • Loading branch information
alan-agius4 committed Dec 11, 2021
1 parent c43c4e9 commit 1ddbd75
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 7 deletions.
2 changes: 1 addition & 1 deletion packages/angular_devkit/build_angular/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
"karma": "^6.3.0",
"ng-packagr": "^13.0.0 || ^13.1.0-next",
"protractor": "^7.0.0",
"tailwindcss": "^2.0.0",
"tailwindcss": "^2.0.0 || ^3.0.0",
"typescript": ">=4.4.3 <4.6"
},
"peerDependenciesMeta": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,8 @@ import { ng, silentExec } from '../../../utils/process';
import { expectToFail } from '../../../utils/utils';

export default async function () {
// Tailwind is not supported in Node.js 10
if (process.version.startsWith('v10')) {
return;
}

// Install Tailwind
await installPackage('tailwindcss');
await installPackage('tailwindcss@2');

// Create configuration file
await silentExec('npx', 'tailwindcss', 'init');
Expand Down
55 changes: 55 additions & 0 deletions tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { deleteFile, expectFileToMatch, writeFile } from '../../../utils/fs';
import { installPackage, uninstallPackage } from '../../../utils/packages';
import { ng, silentExec } from '../../../utils/process';
import { expectToFail } from '../../../utils/utils';

export default async function () {
// Install Tailwind
await installPackage('tailwindcss@3');

// Create configuration file
await silentExec('npx', 'tailwindcss', 'init');

// Add Tailwind directives to a component style
await writeFile('src/app/app.component.css', '@tailwind base; @tailwind components;');

// Add Tailwind directives to a global style
await writeFile('src/styles.css', '@tailwind base; @tailwind components;');

// Build should succeed and process Tailwind directives
await ng('build', '--configuration=development');

// Check for Tailwind output
await expectFileToMatch('dist/test-project/styles.css', /::placeholder/);
await expectFileToMatch('dist/test-project/main.js', /::placeholder/);
await expectToFail(() =>
expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;'),
);
await expectToFail(() =>
expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;'),
);

// Remove configuration file
await deleteFile('tailwind.config.js');

// Ensure Tailwind is disabled when no configuration file is present
await ng('build', '--configuration=development');
await expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;');
await expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;');

// Recreate configuration file
await silentExec('npx', 'tailwindcss', 'init');

// Uninstall Tailwind
await uninstallPackage('tailwindcss');

// Ensure installation warning is present
const { stderr } = await ng('build', '--configuration=development');
if (!stderr.includes("To enable Tailwind CSS, please install the 'tailwindcss' package.")) {
throw new Error('Expected tailwind installation warning');
}

// Tailwind directives should be unprocessed with missing package
await expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;');
await expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;');
}

0 comments on commit 1ddbd75

Please sign in to comment.