Adds Stencil Example #24

jagreehal · 2019-06-09T09:00:41Z

This PR adds Stencil example showing how to use Tailwind using:

inline classes
scoped css
shadow css

and as an added bonus purgecss for optimised production builds

davelsan · 2019-12-19T12:35:42Z

Thanks a lot for this PR.

I'm currently testing this and I'm running into some issues. I'd love to receive some input about them. Also, if it's not too much trouble, from @adamwathan regarding the viability of this PR and about using TailwindCSS with Stencil.

Update: Disregard issues 1 and 2. See this post for an in-depth report and why these issues are non-existent.

Issue 1

Using the @import directive, as instructed in the README, fails at build time, whereas using @tailwind does not.

[ ERROR ]  src/global/app.css
           Unable to read css import: @import 'tailwindcss/base';

[ ERROR ]  src/global/app.css
           Unable to read css import: @import 'tailwindcss/components';

[ ERROR ]  src/global/app.css
           Unable to read css import: @import 'tailwindcss/utilities';

I have tried adding postcss-import to the build chain, just to check if the instructions were missing that import, but to no avail. The problem is either somewhere else or I was not able to configure it properly.

Issue 2

Applying utilities directly to component classes does not seem to work for me. That is, the class is not being added to the index.html file. It does work through the @apply directive, i.e. extracting the class into the component css file. This happens with both shadow: true and shadow: false.

Interestingly, extracted utility classes are applied even if I don't add @tailwind classes to app.css at all! 😕

Issue 3

Is there any reason to import cssnano, purgecss and tailwindcss using require in stencil.config.ts?
The following config using import ... from ... seems to work well:

import { Config } from '@stencil/core';
import { postcss } from '@stencil/postcss';
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
import cssnano from 'cssnano';
import purgecss from '@fullhuman/postcss-purgecss';

const purge = purgecss({
  content: ['./src/**/*.tsx', './src/index.html'],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

export const config: Config = {
  globalStyle: 'src/global/app.css',
  globalScript: 'src/global/app.ts',
  plugins: [
    postcss({
      plugins: [
        autoprefixer(),
        tailwindcss('./tailwind.config.js'),
        ...(process.env.NODE_ENV === 'production'
          ? [ purge, cssnano() ]
          : [])
      ],
    })
  ],
  outputTargets: [
    {
      type: 'www',
      // comment the following line to disable service workers in production
      serviceWorker: null,
      baseUrl: 'https://myapp.local/'
    }
  ]
};

I think what's next for me is to clone your stencil-boilerplate repo and see if I can make it work from there. In the meantime, any input would be much appreciated.

Update: Did just that. Removing shadow: true enables to use tailwind utilities in the component class. I just can't figure out what is different in my config.

Note that I had to update some dependencies to build the repo, specifically related to jest and @types/jest, due to declaration conflicts.

jagreehal · 2019-12-19T22:46:45Z

@davvelsan Thanks.

I've haven't encountered issues 1 or 2. What OS are you using?

Re issue 3, I've cleaned up the config file. Thanks.

I updated the example to use the latest version of Stencil.

Does this fix any of your issues?

I'm planning to record to videos about Tailwind, using it with Stencil is one of them.

davelsan · 2019-12-20T09:49:39Z

@jagreehal Thanks for your quick reply.

Sorry, that was not a good report. Your example works perfectly.

The problem arised when following the instructions to add TailwindCSS to a new Stencil project. But now I'm mystified. I started writing a report with all the steps to reproduce it and what do think happened... it does work fine.

I apologize for wasting your time. It is not a bad lesson for me to learn today: herein lies the importance of writing a proper issue report...

I'm going to leave the steps I followed here as a testament to my own stupidity. But consider my main issue (Issue 2) resolved.

Resolved/Non-existent Issue

This is here for completeness. Ignore unless looking for amusement.

OS Info

My dev environment is setup on Windows 10 64bit, running a non-standard WSL2 distro: Arch-Linux.

Windows 10 64bit
WSL2 Arch-Linux

# uname -a
Linux 4.19.84-microsoft-standard #1 SMP Wed Nov 13 11:44:37 UTC 2019 x86_64 GNU/Linux

Issue Description

After following the README instructions on how to add TailwindCSS to a new project, applying utilities directly to component classes does not work. That is:

Utility classes are not added to www/index.html
Utility classes are not compiled in build/*.css files
On compile, components are rendered with the proper markup, but their style() is not updated with the appropriate utility classes

How to Reproduce

Follow the Getting Started guide, selecting a minimal starter app.

npm init stencil
> app

Update build script and add devDependencies to package.json.

{  
  "scripts": {
    "build": "cross-env NODE_ENV=production stencil build",
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "@stencil/postcss": "^1.0.1",
    "@types/autoprefixer": "^9.6.1",
    "@types/node": "^12.12.21",
    "autoprefixer": "^9.7.3",
    "cross-env": "^6.0.3",
    "cssnano": "^4.1.10",
    "serve": "^11.2.0",
    "tailwindcss": "^1.1.4"
  }
}

Update stencil.config.ts with postcss plugins and config.

import { Config } from '@stencil/core';
import { postcss } from "@stencil/postcss";
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";
import cssnano from "cssnano";
import purgecss from "@fullhuman/postcss-purgecss";

const purge = purgecss({
  content: ["./src/**/*.tsx", "./src/index.html"],

  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

export const config: Config = {
  globalStyle: 'src/global/app.css',
  globalScript: 'src/global/app.ts',
  outputTargets: [
    {
      type: 'www',
      serviceWorker: null,
      baseUrl: 'https://myapp.local/'
    }
  ],
  plugins: [
    postcss({
      plugins: [
        tailwindcss('./tailwind.config.js'),
        autoprefixer(),
        ...(process.env.NODE_ENV === "production" ? [purge, cssnano()] : [])
      ]
    })
  ]
};

Add TailwindCSS imports to global/app.css.

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

Add a div test element to components/app-root.tsx. Comment out shadow: true.

<div class="text-blue-500">
  This text should be blue
</div>

Install dependencies, initialize tailwind.config.js, then serve the app.

npm install
npx tailwind init
npm run start

What is expected

The div test element text should be blue.

What really happens

The div test element text is not blue.

davelsan · 2019-12-20T17:37:15Z

@jagreehal Thank you very much for your repo and help. I believe I'd have given up on making Stencil and Tailwind work together, were it not for this PR.

I think I got a starter app that I can use (link to repo), replicating the starter app from the stencil docs. I have added ESLint support, although it was a bumpy road working around the parser, especially with the vscode extension. If there is anything you like in there, feel free to use as you wish. I'll keep updating it when I start development.

I'd like to keep an eye out for any content you release. I'm a big fan of Tailwind and definitely interested in anything typescript-related.

jagreehal · 2019-12-21T16:32:30Z

@davvelsan glad it worked out in the end. I've updated my boilerplate to use eslint too.

For this PR I wanted to keep thing minimal as the focus was using Tailwind for styling so purposely excluded tests etc.

@adamwathan as mentioned earlier my aim is two record a couple of Tailwind videos which could you when deciding to merge this PR 😉

diondree · 2020-01-07T13:17:32Z

Does anyone have an example of this using sass?

Changes in syntax are documented in NextJS canary release. See https://github.com/zeit/next.js/pull/10119/files

Updated example for Next.js 9.2

jasonhulbert · 2020-01-30T01:05:04Z

@jagreehal

I think the example should at least mention this issue:
tailwindlabs/tailwindcss#1298

If someone has a fix for it, even better.
I mentioned a few off-hand workarounds but neither are appealing.

jagreehal · 2020-02-09T22:11:22Z

@jasonhulbert it's a tricky one.. IMO this example should be simple.

I think addressing styling for components using Shadow Dom and/or slots could make it complicated and more than just a getting started example.

examples/stencil/README.md

sfmskywalker · 2020-03-31T19:15:16Z

examples/stencil/README.md

+    })
+  ]
+};
+```


I replaced the contents of my stencil.config.js with the above JS snippet. But when I the run `npm build, I get the following errors:

[ ERROR ] ./src\global\css\app.css Unable to read css import: @import 'tailwindcss/components'; [ ERROR ] ./src\global\css\app.css Unable to read css import: @import 'tailwindcss/base'; [ ERROR ] ./src\global\css\app.css Unable to read css import: @import 'tailwindcss/utilities'; [ ERROR ] postcss: src/global/css/app.css, line: 1: src/global/css/app.css Unknown word L1: @import 'tailwindcss/base';

Any ideas what I might be missing?

Turns out that when I replace the contents of src/global/css/app.css (I decided to put the file in the css subfolder) with this:

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

then doing run npm build completes successfully. I found the solution here.

I've updated the example

sfmskywalker · 2020-03-31T19:35:31Z

examples/stencil/README.md

+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';


As mentioned in my previous comment, that CSS snippet failed for me when trying to build, but the following works:

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

I just came across the sample files below and found that the sample app.css uses exactly the above as its content :)

I've updated the example

sfmskywalker · 2020-03-31T19:59:39Z

examples/stencil/README.md

+    })
+  ]
+};
+```


You may want to update the config snippets with the sample config here.

I've updated the example

elclanrs · 2020-04-13T20:39:16Z

I can't get any of this to work. I followed the very simple steps but keep getting these errors on build:

[ ERROR ]  postcss: src/global/styles.css: src/global/styles.css
           undefined

[ ERROR ]  postcss: src/components/my-component/my-component.css: src/components/my-component/my-component.css
           undefined

Any ideas how to get it working?

jagreehal · 2020-04-14T16:38:14Z

@elclanrs I've updated the example to use the latest version of Stencil and update a couple of config files. Please could you try the updated example and let me know if it resolves your issue.

elclanrs · 2020-04-14T22:57:28Z

@jagreehal thank you! I was able to make it work now.

jagreehal · 2020-04-16T10:57:35Z

Closing in favour of #61

jagreehal added 4 commits December 19, 2019 22:23

added Stencil example

0492df6

updated @stencil/postcss

52bbd46

updated README

e88e3fc

Reverted prettier change for italics

a332b1c

jagreehal force-pushed the master branch from 1727c43 to a332b1c Compare December 19, 2019 22:24

updated example to stencil-1.8.2

c47095b

emilbryggare and others added 6 commits January 16, 2020 08:07

Update packages

68d3f42

Remove next-css as not needed in Next 9.2

dcbc718

Fix PostCSS config.

19ab10e

Changes in syntax are documented in NextJS canary release. See https://github.com/zeit/next.js/pull/10119/files

Update README.md

b5d0522

Add PurgeCSS explanation to README.md

5e67036

Merge pull request tailwindlabs#50 from emilbryggare/master

974ac28

Updated example for Next.js 9.2

kaydwithers reviewed Feb 20, 2020

View reviewed changes

examples/stencil/README.md Show resolved Hide resolved

sfmskywalker reviewed Mar 31, 2020

View reviewed changes

elclanrs mentioned this pull request Apr 13, 2020

CSS imports broken with Stencil >v1.10.0 stencil-community/stencil-postcss#25

Open

jagreehal added 4 commits April 14, 2020 10:29

added Stencil example

1b212f3

updated @stencil/postcss

4583e04

updated README

233fbee

Reverted prettier change for italics

38ef8cc

jagreehal added 2 commits April 14, 2020 10:29

updated example to stencil-1.8.2

de9514b

Merge branch 'master' of github.com:jagreehal/setup-examples

496f322

jagreehal closed this Apr 16, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds Stencil Example #24

Adds Stencil Example #24

jagreehal commented Jun 9, 2019

davelsan commented Dec 19, 2019 •

edited

jagreehal commented Dec 19, 2019

davelsan commented Dec 20, 2019 •

edited

davelsan commented Dec 20, 2019 •

edited

jagreehal commented Dec 21, 2019

diondree commented Jan 7, 2020

jasonhulbert commented Jan 30, 2020

jagreehal commented Feb 9, 2020

sfmskywalker Mar 31, 2020

sfmskywalker Mar 31, 2020

jagreehal Apr 14, 2020

sfmskywalker Mar 31, 2020

sfmskywalker Mar 31, 2020

jagreehal Apr 14, 2020

sfmskywalker Mar 31, 2020

jagreehal Apr 14, 2020

elclanrs commented Apr 13, 2020 •

edited

jagreehal commented Apr 14, 2020

elclanrs commented Apr 14, 2020

jagreehal commented Apr 16, 2020

Adds Stencil Example #24

Adds Stencil Example #24

Conversation

jagreehal commented Jun 9, 2019

davelsan commented Dec 19, 2019 • edited

jagreehal commented Dec 19, 2019

davelsan commented Dec 20, 2019 • edited

Resolved/Non-existent Issue

davelsan commented Dec 20, 2019 • edited

jagreehal commented Dec 21, 2019

diondree commented Jan 7, 2020

jasonhulbert commented Jan 30, 2020

jagreehal commented Feb 9, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elclanrs commented Apr 13, 2020 • edited

jagreehal commented Apr 14, 2020

elclanrs commented Apr 14, 2020

jagreehal commented Apr 16, 2020

davelsan commented Dec 19, 2019 •

edited

davelsan commented Dec 20, 2019 •

edited

davelsan commented Dec 20, 2019 •

edited

elclanrs commented Apr 13, 2020 •

edited