Production build does not include component styles

Abierto
#4,139 1 comentario 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@tanner-reits ya está trabajando en esto.

Desde el 14/3/2023.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

Bug: Validated
Prerequisites
Stencil Version

3.0.0

Current Behavior

I am writing one component with the following configuration.

@Component({
  tag: 'mpsv-feedback',
  styleUrl: 'feedback.css',
  shadow: true,
})

I have a definition in the component style itself.

:host {
  font-family: "Roboto", sans-serif;
  color: var(--gov-color-secondary);
  font-size: 16px !important;
  margin: 0;
  padding: 0;
}
:host * {
  box-sizing: border-box;
}

During development everything is fine and styles are generated in the component.
image

When I build the component, the styles do not appear after the component is generated.
image

They are clogged in the component chunk itself.
image

Expected Behavior

I expect the same behavior as in the dev environment.
The component will generate the styles it is assigned.

System Info
System: node 18.15.0
     Plaform: darwin (21.6.0)
   CPU Model: Apple M1 Pro (8 cpus)
    Compiler: .../node_modules/@stencil/core/compiler/stencil.js
       Build: 20230228172721
     Stencil: 3.1.0 🍕
  TypeScript: 4.9.5
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.16.4
Steps to Reproduce
  • Install a new project
  • Add custom styles
  • Set shaddow to true
  • Run npm run build
  • Upload esm modules to server and try to call a component
Code Reproduction URL

https://github.com/zvitek/webcomponent-styles

Additional Information
Lenguaje dominante
TypeScript
Estrellas
13.2k
Forks
865
Merge medio
2 d 16 h
PR fusionados (30 d)
29

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de stenciljs/core

Todos los issues de stenciljs/core

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.