From 9e9476f9a408d9df0f302bf9d5fe62086dbf3bf4 Mon Sep 17 00:00:00 2001 From: Daniel Egger Date: Wed, 29 Jun 2022 13:16:35 +0200 Subject: [PATCH] Refactor tailwind configuration --- README.md | 8 +++--- client/cypress/fixtures/example.json | 5 ---- client/cypress/integration/example.spec.ts | 8 ------ client/cypress/plugins/index.ts | 19 -------------- client/cypress/plugins/tsconfig.json | 9 ------- client/cypress/support/commands.ts | 25 ------------------- client/cypress/support/index.ts | 20 --------------- client/cypress/tsconfig.json | 10 -------- client/package.json | 4 ++- client/postcss.config.js | 6 +++++ client/src/assets/styles/index.scss | 1 - client/src/input.css | 0 client/src/main.ts | 2 +- .../tailwind.config.js | 6 ++--- tailwind/input.css => client/tailwind.css | 0 package.json | 9 +++---- 16 files changed, 20 insertions(+), 112 deletions(-) delete mode 100644 client/cypress/fixtures/example.json delete mode 100644 client/cypress/integration/example.spec.ts delete mode 100644 client/cypress/plugins/index.ts delete mode 100644 client/cypress/plugins/tsconfig.json delete mode 100644 client/cypress/support/commands.ts delete mode 100644 client/cypress/support/index.ts delete mode 100644 client/cypress/tsconfig.json create mode 100644 client/postcss.config.js delete mode 100644 client/src/assets/styles/index.scss delete mode 100644 client/src/input.css rename tailwind.config.js => client/tailwind.config.js (90%) rename tailwind/input.css => client/tailwind.css (100%) diff --git a/README.md b/README.md index 56e6731c..7c082496 100644 --- a/README.md +++ b/README.md @@ -5,14 +5,14 @@ Project setup is based on [cookiecutter-django](https://github.com/cookiecutter/ ## Run for development ```bash -# run tailwind cli (on project root folder!) -npm run tailwind - # run vue vite dev server cd client && npm run dev # reset db and run django dev server ./prepare_server.sh + +# run tailwind cli (for tailwind support on django templates) +cd client && npm run tailwind ``` ## Installation @@ -61,7 +61,7 @@ npm run dev ### General part -Cypress and TailwindCSS ist installed for client and server, so there is this package.json on the project root directory +Cypress is installed for client and server, so there is this package.json on the project root directory ```bash # in project root directory diff --git a/client/cypress/fixtures/example.json b/client/cypress/fixtures/example.json deleted file mode 100644 index 02e42543..00000000 --- a/client/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} diff --git a/client/cypress/integration/example.spec.ts b/client/cypress/integration/example.spec.ts deleted file mode 100644 index 7a8c909f..00000000 --- a/client/cypress/integration/example.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -// https://docs.cypress.io/api/introduction/api.html - -describe('My First Test', () => { - it('visits the app root url', () => { - cy.visit('/') - cy.contains('h1', 'You did it!') - }) -}) diff --git a/client/cypress/plugins/index.ts b/client/cypress/plugins/index.ts deleted file mode 100644 index c6679b40..00000000 --- a/client/cypress/plugins/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-env node */ -// *********************************************************** -// This example plugins/index.ts can be used to load plugins -// -// You can change the location of this file or turn off loading -// the plugins file with the 'pluginsFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/plugins-guide -// *********************************************************** - -// This function is called when a project is opened or re-opened (e.g. due to -// the project's config changing) - -export default ((on, config) => { - // `on` is used to hook into various events Cypress emits - // `config` is the resolved Cypress config - return config -}) as Cypress.PluginConfig diff --git a/client/cypress/plugins/tsconfig.json b/client/cypress/plugins/tsconfig.json deleted file mode 100644 index b5aedd53..00000000 --- a/client/cypress/plugins/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "@vue/tsconfig/tsconfig.node.json", - "include": ["./**/*"], - "compilerOptions": { - "module": "CommonJS", - "preserveValueImports": false, - "types": ["node", "cypress/types/cypress"] - } -} diff --git a/client/cypress/support/commands.ts b/client/cypress/support/commands.ts deleted file mode 100644 index 119ab03f..00000000 --- a/client/cypress/support/commands.ts +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add('login', (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) diff --git a/client/cypress/support/index.ts b/client/cypress/support/index.ts deleted file mode 100644 index d68db96d..00000000 --- a/client/cypress/support/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands' - -// Alternatively you can use CommonJS syntax: -// require('./commands') diff --git a/client/cypress/tsconfig.json b/client/cypress/tsconfig.json deleted file mode 100644 index a2dbf9e3..00000000 --- a/client/cypress/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "@vue/tsconfig/tsconfig.web.json", - "include": ["./integration/**/*", "./support/**/*"], - "compilerOptions": { - "isolatedModules": false, - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - } -} diff --git a/client/package.json b/client/package.json index c64f788f..eea590d3 100644 --- a/client/package.json +++ b/client/package.json @@ -4,10 +4,12 @@ "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build && cp ./dist/index.html ../server/vbv_lernwelt/templates/vue/index.html && cp -r ./dist/static/vue ../server/vbv_lernwelt/static/", + "build:tailwind": "tailwindcss -i tailwind.css -o ../server/vbv_lernwelt/static/css/tailwind.css --minify", "test": "vitest run", "coverage": "vitest run --coverage", "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", - "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" + "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", + "tailwind": "tailwindcss -i tailwind.css -o ../server/vbv_lernwelt/static/css/tailwind.css --watch" }, "dependencies": { "@headlessui/vue": "^1.6.4", diff --git a/client/postcss.config.js b/client/postcss.config.js new file mode 100644 index 00000000..33ad091d --- /dev/null +++ b/client/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/client/src/assets/styles/index.scss b/client/src/assets/styles/index.scss deleted file mode 100644 index a47067f8..00000000 --- a/client/src/assets/styles/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import "../../../../server/vbv_lernwelt/static/css/tailwind.css"; diff --git a/client/src/input.css b/client/src/input.css deleted file mode 100644 index e69de29b..00000000 diff --git a/client/src/main.ts b/client/src/main.ts index b0b3f535..0474017f 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -5,7 +5,7 @@ import {setupI18n} from './i18n' import App from './App.vue' import router from './router' -import '@/assets/styles/index.scss' +import '../tailwind.css' const i18n = setupI18n() const app = createApp(App) diff --git a/tailwind.config.js b/client/tailwind.config.js similarity index 90% rename from tailwind.config.js rename to client/tailwind.config.js index 0c8db2df..e2862e2d 100644 --- a/tailwind.config.js +++ b/client/tailwind.config.js @@ -2,9 +2,9 @@ const colors = require('tailwindcss/colors') module.exports = { content: [ - './client/index.html', - './client/src/**/*.{vue,js,ts,jsx,tsx}', - './server/vbv_lernwelt/**/*.{html,js}', + './index.html', + './src/**/*.{vue,js,ts,jsx,tsx}', + '../server/vbv_lernwelt/**/*.{html,js}', ], theme: { fontFamily: { diff --git a/tailwind/input.css b/client/tailwind.css similarity index 100% rename from tailwind/input.css rename to client/tailwind.css diff --git a/package.json b/package.json index 6f79d5ff..62ff2d66 100644 --- a/package.json +++ b/package.json @@ -2,19 +2,16 @@ "name": "vbv_lernwelt_cypress", "version": "1.0.0", "scripts": { - "build": "npm install --prefix client && npm run build --prefix client && npm run build:tailwind", - "build:tailwind": "tailwindcss -i ./tailwind/input.css -o ./server/vbv_lernwelt/static/css/tailwind.css --minify", + "build": "npm install --prefix client && npm run build --prefix client && npm run build:tailwind --prefix client", "test": "echo \"Error: no test specified\" && exit 1", "cypress:open": "cypress open", "cypress:run": "cypress run", "cypress:ci": "cypress run --config baseUrl=http://localhost:8001", - "cypress:ci:open": "cypress open --config baseUrl=http://localhost:8001", - "tailwind": "tailwindcss -i ./tailwind/input.css -o ./server/vbv_lernwelt/static/css/tailwind.css --watch" + "cypress:ci:open": "cypress open --config baseUrl=http://localhost:8001" }, "devDependencies": { "@tailwindcss/forms": "^0.5.2", "@tailwindcss/typography": "^0.5.2", - "cypress": "^9.4.1", - "tailwindcss": "^3.0.24" + "cypress": "^9.4.1" } }