miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(nextjs): Adding tailwind should work when creating an app OOTB (#22709)

Browse Source
This commit is contained in:
Nicholas Cunningham 2024-04-08 08:44:20 -06:00 committed by GitHub
parent 53d7913953
commit 50d89c7d5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/generated/packages/next/generators/application.json
View File

@ -46,6 +46,10 @@
"value": "less",
"label": "LESS [ https://lesscss.org ]"
},
{
"value": "tailwind",
"label": "tailwind [ https://tailwindcss.com/ ]"
},
{
"value": "styled-components",
"label": "styled-components [ https://styled-components.com ]"

9
packages/next/src/generators/application/application.ts
View File

@ -7,6 +7,7 @@ import {
Tree,
} from '@nx/devkit';
import { initGenerator as jsInitGenerator } from '@nx/js';
import { setupTailwindGenerator } from '@nx/react';
import {
testingLibraryReactVersion,
typesReactDomVersion,
@ -70,6 +71,14 @@ export async function applicationGeneratorInternal(host: Tree, schema: Schema) {
const lintTask = await addLinting(host, options);
tasks.push(lintTask);
if (options.style === 'tailwind') {
const tailwindTask = await setupTailwindGenerator(host, {
project: options.projectName,
});
tasks.push(tailwindTask);
}
const styledTask = addStyleDependencies(host, {
style: options.style,
swc: !host.exists(joinPathFragments(options.appProjectRoot, '.babelrc')),

1
packages/next/src/generators/application/lib/create-application-files.ts
View File

@ -56,6 +56,7 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
pageStyleContent: `.page {}`,
stylesExt: options.style === 'less' ? options.style : 'css',
style: options.style === 'tailwind' ? 'css' : options.style,
};
const generatedAppFilePath = options.src

2
packages/next/src/generators/application/lib/normalize-options.ts
View File

@ -94,7 +94,7 @@ export async function normalizeOptions(
const appDir = options.appDir ?? true;
const src = options.src ?? true;
const styledModule = /^(css|scss|less)$/.test(options.style)
const styledModule = /^(css|scss|less|tailwind)$/.test(options.style)
? null
: options.style;

4
packages/next/src/generators/application/schema.json
View File

@ -46,6 +46,10 @@
"value": "less",
"label": "LESS [ https://lesscss.org ]"
},
{
"value": "tailwind",
"label": "tailwind [ https://tailwindcss.com/ ]"
},
{
"value": "styled-components",
"label": "styled-components [ https://styled-components.com ]"

30
packages/react/src/generators/setup-tailwind/lib/add-tailwind-style-imports.ts
View File

@ -5,35 +5,29 @@ import {
stripIndents,
Tree,
} from '@nx/devkit';
import * as chalk from 'chalk';
import { SetupTailwindOptions } from '../schema';
const knownLocations = [
// Plain React
'src/styles.css',
'src/styles.scss',
'src/styles.less',
// base directories and file types to simplify locating the stylesheet
const baseDirs = ['src', 'pages', 'src/pages', 'src/app', 'app'];
const fileNames = ['styles', 'global'];
const extensions = ['.css', '.scss', '.less'];
// Next.js
'pages/styles.css',
'pages/styles.scss',
'pages/styles.less',
'app/global.css',
'app/global.scss',
'app/global.less',
];
const knownLocations = baseDirs.flatMap((dir) =>
fileNames.flatMap((name) => extensions.map((ext) => `${dir}/${name}${ext}`))
);
export function addTailwindStyleImports(
tree: Tree,
project: ProjectConfiguration,
_options: SetupTailwindOptions
) {
const candidates = knownLocations.map((x) =>
joinPathFragments(project.root, x)
const candidates = knownLocations.map((currentPath) =>
joinPathFragments(project.root, currentPath)
);
const stylesPath = candidates.find((currentStylePath) =>
tree.exists(currentStylePath)
);
const stylesPath = candidates.find((x) => tree.exists(x));
if (stylesPath) {
const content = tree.read(stylesPath).toString();