/
desy-html v6.0 - Manual de actualización

desy-html v6.0 - Manual de actualización

Owned by Integración OTRS y JIRA
19 May 2022
3 min read

Esta versión viene marcada por la actualización del framework de CSS que usa desy: TailwindCSS sube a la versión v3.0.24 que es un cambio mayor y que cambia la forma de compilación y lleva incorporado el modo Just in Time, por lo cual, siempre hará una labor de escanear los archivos fuentes para limpiar las clases que no se usen. Ya no hay forma de compilar todas las clases de TailwindCSS en un archivo.

Más información acerca de la actualización de TailwindCSS aqui: Upgrade guide - Getting started

Cambios en package.json

  • Cambio en tarea de prod:

    - "prod": "NODE_ENV=production gulp" + "prod": "NODE_ENV=production gulp prod"

     

  • Actualización de tailwindcss y sus plugins:

    - "tailwindcss": "^2.2.7" - "@tailwindcss/aspect-ratio": "^0.2.1", - "@tailwindcss/forms": "^0.3.3", - "@tailwindcss/typography": "^0.4.1", + "tailwindcss": "^3.0.24" + "@tailwindcss/aspect-ratio": "^0.4.0", + "@tailwindcss/forms": "^0.5.0", + "@tailwindcss/typography": "^0.5.2",

     

  • Ya no usamos cssnano:

    - "cssnano": "^4.1.10",

     

Cambios en gulpfile.js

  • Ya no usamos gulp-clean-css: (y borramos el archivo config/clean-css.js)

    - const cleanCSS = require('gulp-clean-css'); - const CLEANCSS_CONFIG = './config/clean-css.js'; - .pipe(cleanCSS(require(CLEANCSS_CONFIG)))

     

  • Cambios en la tarea watchFiles:

    - function watchFiles(cb) { - gulp.watch([TAILWIND_CONFIG, SOURCE_STYLESHEET_DIR, ], gulp.series(css, reload)); - gulp.watch([SOURCE_HTML_DIR, SOURCE_JS_DIR, SOURCE_NUNJUCKS_DIR, ...SOURCE_NUNJUCKS_FILES], gulp.series(html, nunjucks, js, reload)); - } + function watchFiles(cb) { + gulp.watch([TAILWIND_CONFIG, SOURCE_STYLESHEET_DIR, SOURCE_HTML_DIR, SOURCE_JS_DIR, SOURCE_NUNJUCKS_DIR, ...SOURCE_NUNJUCKS_FILES], gulp.series(html, nunjucks, js, css, reload)); + cb(); + }

     

  • Cambios en los exports:

    - exports.default = series(cleanFolder, css, nunjucks, js, license, version, bs); + exports.default = series(cleanFolder, html, nunjucks, js, css, license, version, bs, watchFiles); + exports.prod = series(cleanFolder, html, nunjucks, js, css, license, version, bs);

     

Cambios en config/tailwind.config.js

El archivo cambia ya que no se usa PurgeCSS sino que el css se purga internamente con TailwindCSS. Más información acerca de la actualización de TailwindCSS aqui: Upgrade guide - Getting started

Pequeños cambios también para que el plugin de tailwindcss typography use font-bold en los h3 y los h4.

El archivo queda así:

 

const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { content: ['./src/**/*.html', './src/**/*.njk', './src/**/*.js', './docs/**/*.html', './docs/**/*.njk',], safelist: [ 'dev', // used in body tag ], theme: { screens: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', }, extend: { colors:{ transparent: 'transparent', current: 'currentColor', white: '#ffffff', black: '#1f2331', neutral: { 'dark': '#5e616b', 'base': '#92949B', 'light': '#ededec', 'lighter': '#f6f6f5', }, primary: { 'base': '#00607a', 'light': '#d6eaf0', 'dark': '#00475C', }, success: { 'base': '#24d14c', 'light': '#dcf8e2', 'dark': '#1aa23a', }, warning: { 'base': '#fdcb33', 'light': '#fef6b2', 'dark': '#b88e12', }, info: { 'base': '#fa9902', 'light': '#feebcc', 'dark': '#c97a00', }, alert: { 'base': '#d22333', 'light': '#fbd3ce', 'dark': '#a40014', }, }, spacing: { // the order of this declarations matter in specificity 'base': '1rem', // 16px // p-4 'sm': '.5rem', // 8px // p-2 'xs': '.25rem', // 4px // p-1 'lg': '1.75rem', // 28px // p-7 'xl': '2.5rem', // 40px // p-10 '2xl': '5rem', // 80px // p-20 '3xl': '10rem', // 160px // p-40 'offcanvas': '83.333333%', 'offcanvas-negative': '16.666667%', }, borderRadius: { DEFAULT: '0.1875rem', }, borderWidth: { '0.125em': '0.125em', }, borderColor: theme => ({ DEFAULT: (theme('colors.black'), theme('colors.currentColor')) }), boxShadow: theme => ({ 'outline-warning': '0 0 0 3px' + theme('colors.warning.base'), 'outline-alert': '0 0 0 2px' + theme('colors.alert.base'), 'solid-primary-base': '0 1px 0 0' + theme('colors.primary.base'), 'solid-primary-light': '0 1px 0 0' + theme('colors.primary.light'), 'solid-primary-dark': '0 1px 0 0' + theme('colors.primary.dark'), 'solid-alert-base': '0 1px 0 0' + theme('colors.alert.base'), 'solid-alert-dark': '0 1px 0 0' + theme('colors.alert.dark'), 'solid-neutral-base': '0 1px 0 0' + theme('colors.neutral.base'), 'solid-black': '0 1px 0 0' + theme('colors.black'), 'outline-black': '0 0 0 3px' + theme('colors.black'), 'outline-focus': 'inset 0 -2px 0 0 ' + theme('colors.black'), 'outline-focus-input': 'inset 0 0 0 3px' + theme('colors.black') }), fontFamily: { sans: ['Open Sans', ...defaultTheme.fontFamily.sans], }, gridTemplateColumns: { 'max-content-1': 'repeat(1, minmax(0, max-content))', 'max-content-2': 'repeat(2, minmax(0, max-content))', 'max-content-3': 'repeat(3, minmax(0, max-content))', 'max-content-4': 'repeat(4, minmax(0, max-content))', 'max-content-5': 'repeat(5, minmax(0, max-content))', 'max-content-6': 'repeat(6, minmax(0, max-content))', 'max-content-7': 'repeat(7, minmax(0, max-content))', 'max-content-8': 'repeat(8, minmax(0, max-content))', }, gridTemplateRows: { '7': 'repeat(7, minmax(0, 1fr))', '8': 'repeat(8, minmax(0, 1fr))', '9': 'repeat(9, minmax(0, 1fr))', '10': 'repeat(10, minmax(0, 1fr))', }, width: { 'xs': '20rem', 'sm': '24rem', 'md': '28rem', 'lg': '32rem', 'xl': '36rem', 'offcanvas': '83.333333%', }, maxWidth: { '40': '10rem', '64': '16rem', }, maxHeight: { '40': '10rem', '64': '16rem', }, minHeight: { '14': '3.5rem', }, typography: (theme) => ({ DEFAULT: { css: { color: theme('colors.black'), a: { color: theme('colors.primary.base'), '&:hover': { color: theme('colors.primary.dark'), }, '&:focus': { color: theme('colors.black'), backgroundColor: theme('colors.warning.base'), boxShadow: theme('boxShadow.outline-focus'), outline: 'none', textDecoration: 'none' }, }, 'h3': { fontWeight: '700', }, 'h4': { fontWeight: '700', }, 'ul > li::before': { backgroundColor: theme('colors.black'), }, 'ol > li::before': { color: theme('colors.black'), }, }, }, }), }, }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio'), ] }

 

Related content