jaredpalmer / tsdx

Zero-config CLI for TypeScript package development
https://tsdx.io
MIT License
11.26k stars 508 forks source link

Using Example App, CSS isn't included when `inject: false` #1015

Closed stephencweiss closed 3 years ago

stephencweiss commented 3 years ago

Current Behavior

My application is using CSS Modules. These are being exported correctly with the following tsdx.config.js:

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          autoprefixer(),
          tailwindcss(),
          cssnano({
            preset: 'default',
          }),
        ],
        inject: false,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
      })
    );
    // config.external = ['react', 'react-dom']
    return config;
  },
};

You can see the modules are being properly placed in the built .css file: Screen Shot 2021-04-20 at 7 46 01 AM

However, when I run the example app, while the classes are being applied, the style sheet seems to be missing and so no actual CSS properties are being attached.

Screen Shot 2021-04-20 at 7 46 58 AM

I've tried adding a postcssrc (and postcss.config.js) like so:

const postcss = require('postcss-modules');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');

module.exports = {
  modules: true,
  plugins: [
    autoprefixer(),
    tailwindcss(),
    cssnano({
      preset: 'default',
    }),
  ],
  inject: false,
};

Expected behavior

The styles are applied because the stylesheet is included in the parcel bundle.

Suggested solution(s)

An example of how to make better use of the example app so that it mirrors that exported assets would be appreciated.

Additional context

Your environment

System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 130.66 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.16.0 - ~/.volta/tools/image/node/14.16.0/bin/node
    Yarn: 1.22.4 - ~/.volta/tools/image/yarn/1.22.4/bin/yarn
    npm: 6.14.11 - ~/.volta/tools/image/node/14.16.0/bin/npm
  Browsers:
    Brave Browser: 90.1.23.71
    Chrome: 90.0.4430.72
    Firefox: 87.0
    Safari: 14.0.3
    Safari Technology Preview: 14.2
  npmPackages:
    tsdx: ^0.14.1 => 0.14.1 
    typescript: ^4.2.3 => 4.2.3 
agilgur5 commented 3 years ago

Sounds like a duplicate of #959 which is mostly a duplicate of https://github.com/formium/tsdx/discussions/947#discussioncomment-224566

stephencweiss commented 3 years ago

Thanks @agilgur5 ! Apologies for the duplicate.