Issue when using with @stencil/sass plugin

[arvindanta]

Hi,

Am trying to this plugin along with @stencil/sassplugin.

Am getting the below error: Rollup: Parse Error Unexpected token (Note that you need plugins to import files that are not JavaScript)

The code below:

import { sass } from '@stencil/sass';
import tailwind from 'stencil-tailwind';
  autoprefixCss: true,
  plugins: [
    sass({
      injectGlobalPaths: ['src/styles/index.scss'],
    }),
    tailwind(),
  ],

Can you please help on this.

Thanks

[arvindanta]

Its working fine.

[Poimen]

It looks like you are using a different plugin - stencil-tailwind - while this is the repo for stencil-tailwind-plugin

(apologies I'm really bad at coming up with names)

From your config:

import tailwind from 'stencil-tailwind'

That would be here - https://github.com/jrowlingson/stencil-tailwind

This repo would be used:

// stencil.config.ts
import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import { postcss } from '@stencil/postcss';
import autoprefixer from 'autoprefixer';
import tailwind from 'stencil-tailwind-plugin';   // <-- repo's plugin here
import { inlineSvg } from 'stencil-inline-svg';
import tailwindConfig from './tailwind.config';

export const config: Config = {
  outputTargets: [ /* ... */],
  plugins: [
    inlineSvg(),
    sass({
      includePaths: [
        /* ... */
      ]
    }),
    tailwind({
      tailwindCssPath: './src/styles/tailwind.pcss',
      tailwindConf: tailwindConfig
    }),
    postcss({
      plugins: [
        autoprefixer()
      ]
    })
  ]

[arvindanta]

Hi @Poimen , Yeah I used the other library. I now switched to your library as I find its working with sass plugin as well. I also want to expose tailwind customized utilities as a global css file for the consumer of the components.

How do I go about customizing the tailwind config and also add it as part of globalStyles ?

[arvindanta]

Hi @Poimen , I tried using the below snippet to pass some tailwindconfig to the plugin.

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import tailwind from 'stencil-tailwind-plugin';
import tailwindConfig from './tailwind.config';
export const config: Config = {
  plugins: [
    sass({
      injectGlobalPaths: ['src/styles/index.scss'],
    }),

    tailwind({
      tailwindConf: tailwindConfig,
    })

Am getting the below error:

[ERR] Oh noes! Something went wrong! Unterminated string constant (Note that you need plugins to import files that are not JavaScript)
[ERR] Error: Unterminated string constant (Note that you need plugins to import files that are not JavaScript)
    at error (/Users/aashwathanarayanan/Desktop/learning/webcomponents/crayons/node_modules/@stencil/core/compiler/stencil.js:25584:26)
    at Module$1.error (/Users/aashwathanarayanan/Desktop/learning/webcomponents/crayons/node_modules/@stencil/core/compiler/stencil.js:29993:12)
    at Module$1.tryParse (/Users/aashwathanarayanan/Desktop/learning/webcomponents/crayons/node_modules/@stencil/core/compiler/stencil.js:30399:19)
    at Module$1.setSource (/Users/aashwathanarayanan/Desktop/learning/webcomponents/crayons/node_modules/@stencil/core/compiler/stencil.js:30300:18)
    at ModuleLoader.addModuleSource (/Users/aashwathanarayanan/Desktop/learning/webcomponents/crayons/node_modules/@stencil/core/compiler/stencil.js:38634:14)
    at async ModuleLoader.fetchModule (/Users/aashwathanarayanan/Desktop/learning/webcomponents/crayons/node_modules/@stencil/core/compiler/stencil.js:38690:5)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchStaticDependencies (/Users/aashwathanarayanan/Desktop/learning/webcomponents/crayons/node_modules/@stencil/core/compiler/stencil.js:38715:30)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/Users/aashwathanarayanan/Desktop/learning/webcomponents/crayons/node_modules/@stencil/core/compiler/stencil.js:38692:5)

Am using stencil/core 2.9 version.

[Poimen]

Could you post:

• contents of the tailwind config
• index.scss

It can just be a minimal config/scss that shows the issue.

From my project we are using a different tailwind css file to global styles:

    tailwind({
      tailwindCssPath: './src/styles/tailwind.pcss',
      tailwindConf: tailwindConfig
    }),

Are you perhaps using the global scss where the @ imports for TW?

[arvindanta]

tailwind.config.ts

const colors = require('tailwindcss/colors');

module.exports = {
  purge: false,
  theme: {
    extend: {
      colors: {
        gray: colors.warmGray,
        orange: colors.orange,
        amber: colors.amber,
        lime: colors.lime,
        emerald: colors.emerald,
        teal: colors.teal,
        cyan: colors.cyan,
        sky: colors.green,
        violet: colors.violet,
        fuchsia: colors.fuchsia,
        rose: colors.rose,
      },
      textColor: {
        primary: '#3490dc',
        secondary: '#ffed4a',
        danger: 'pink',
      },
    },
  },
  variants: {
    extend: {
      opacity: ['disabled'],
      backgroundColor: ['disabled'],
    },
  },
};

Am not using any tailwindCssPath . Is it required ? , If so what would be the contents inside of it ?

The injectGlobalPaths has a scss file that imports some scss variables from a folder.

  sass({
      injectGlobalPaths: ['src/styles/index.scss'],
    }),

index.scss @import '../../../../styles/index';

[arvindanta]

@Poimen , The issue seems with the tailwind.config.ts I used .

When I used the below, its working fine

const colors = require('tailwindcss/colors');

module.exports = {
  purge: [],
  mode: 'jit',
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    textColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: 'yellow',
      skyblue: colors.green,
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

[arvindanta]

For Globally exposing customized tailwind css utilties, is there an option?

[Poimen]

No, the tailwind css is not required - it will default to:

@tailwind base;
@tailwind components;
@tailwind utilities;

If that's all you need, then it is safe to omit the config entry 👍

My guess is the @import is the issue.

As a test, could you try making the @import relative to source? e.g.:

/* index.scss */
@import './src/style/index';

If that works, then you may need to set the root path on atImportConf?

[arvindanta]

No, the tailwind css is not required - it will default to:

@tailwind base;
@tailwind components;
@tailwind utilities;

If that's all you need, then it is safe to omit the config entry 👍

My guess is the @import is the issue.

As a test, could you try making the @import relative to source? e.g.:

/* index.scss */
@import './src/style/index';

If that works, then you may need to set the root path on atImportConf?

When I used a different tailwind.config.ts, its working fine

[Poimen]

For Globally exposing customized tailwind css utilties, is there an option?

I have never tried, but doubt it is possible. In recollection of the development, the global styles are not even passed through to the parser. I am thinking about a separate postcss element, but haven't got to working on that part. The global styles have a different path through the stencil workflow and this plugin only taps the TS processing.

What we do is export tailwind config as a separate project and import the config into all the projects that need tailwind. We deal with Vue, Angular, React, Nuxt and Gatsby deployments, so this works given the range of environment and each environment uses Tailwind slightly differently. Our modules are mostly shadow dom.

Off hand I don't think it would be possible given the JIT/purge of things - those look at the file and drop all unused styles (tw can bloat the shadow dom tremendously if not purged).

[Poimen]

When I used a different tailwind.config.ts, its working fine

What is different in the two configs?

[arvindanta]

When I used a different tailwind.config.ts, its working fine

What is different in the two configs?

When I used mode: 'jit'the error went away

[arvindanta]

For Globally exposing customized tailwind css utilties, is there an option?

I have never tried, but doubt it is possible. In recollection of the development, the global styles are not even passed through to the parser. I am thinking about a separate postcss element, but haven't got to working on that part. The global styles have a different path through the stencil workflow and this plugin only taps the TS processing.

What we do is export tailwind config as a separate project and import the config into all the projects that need tailwind. We deal with Vue, Angular, React, Nuxt and Gatsby deployments, so this works given the range of environment and each environment uses Tailwind slightly differently. Our modules are mostly shadow dom.

Off hand I don't think it would be possible given the JIT/purge of things - those look at the file and drop all unused styles (tw can bloat the shadow dom tremendously if not purged).

Thanks got it. We are trying to build a design system and wanted to use tailwind as a base(customized one) for building components and also expose customized tailwind utilities for the consumers to style the light dom.

[Poimen]

When I used mode: 'jit'the error went away

Interesting - that mode should be overridden 🤔 to enforce jit

We are trying to build a design system and wanted to use tailwind as a base(customized one) for building components

We use a tool called Style Dictionary for this. Our design system uses design token exported from Figma, pumped into JSON files and then css/scss/tailwind files are generated by SD. It's super useful. In our mono repo, we distribute the styles in package from to the deployment projects.

expose customized tailwind utilities for the consumers to style the light dom

We tried to stay away from this given the bleed of styles and preventing conflicts. In case you ever change your mind, we use the ::part and css variables to style to components from the outside.

I'll have a look into why that mode setting is causing issues 🤔

[Poimen]

When I used the below, its working fine

Oops, I totally missed this update 🙈 - apologies, thanks for the config

[arvindanta]

When I used mode: 'jit'the error went away

Interesting - that mode should be overridden 🤔 to enforce jit

We are trying to build a design system and wanted to use tailwind as a base(customized one) for building components

We use a tool called Style Dictionary for this. Our design system uses design token exported from Figma, pumped into JSON files and then css/scss/tailwind files are generated by SD. It's super useful. In our mono repo, we distribute the styles in package from to the deployment projects.

expose customized tailwind utilities for the consumers to style the light dom

We tried to stay away from this given the bleed of styles and preventing conflicts. In case you ever change your mind, we use the ::part and css variables to style to components from the outside.

I'll have a look into why that mode setting is causing issues 🤔

Is your design system open sourced ?. Can you share the repo link if possible ?. I would love to take a look at it

[Poimen]

Unfortunately not OSS - internal FinTech project.

The closest OSS repo is some work we did with Interplay: https://github.com/Poimen/stencil-interplay-demo

But it doesn't show the full set of tooling. If I have some time in the next few weeks, I'll see about putting a repo together with some tooling that we use.

[Poimen]

Hi @arvindanta - this should be all working in the latest version. If not, please log another issue. I have tested against v3.0.7 and it appears to be working much better now.

Also, if you want to see an example of how our DS integrates in a much smaller setting, I've put together a small repo of some of the structure: https://github.com/Poimen/stencil-design-system-demo

HTH