Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(@angular-devkit/build-angular): add tailwindcss support for version 3 #22345

Merged
merged 1 commit into from
Dec 11, 2021
Merged

fix(@angular-devkit/build-angular): add tailwindcss support for version 3 #22345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/angular_devkit/build_angular/package.json
View file
Open in desktop
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
7 changes: 1 addition & 6 deletions ...cy-cli/e2e/tests/build/styles/tailwind.ts → ...cli/e2e/tests/build/styles/tailwind-v2.ts
View file
Open in desktop
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')) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm assuming this is ok to remove because we don't support Node v10 in Angular CLI v13.1.x? Slightly unrelated: Have we explicitly documented our Node support anywhere? Best I could find was on our getting started page, but I'm not sure if that applies to all CLI versions, and I know we care about Node minor releases in some instances.

Copy link
Collaborator Author

@alan-agius4 alan-agius4 Dec 11, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed that is the only place we list the node versions that we support. I think they could be better listed in table or something like that.

Re Node 10, we don’t support this since v12

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
View file
Open in desktop
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;');
}