Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
stephencweiss opened this issue Apr 20, 2021 · 2 comments
Closed

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

stephencweiss opened this issue Apr 20, 2021 · 2 comments
Labels
kind: support Asking for support with something or a specific use case scope: integration Related to an integration, not necessarily to core (but could influence core) solution: duplicate This issue or pull request already exists solution: intended behavior This is not a bug and is expected behavior

Comments

@stephencweiss
Copy link

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 agilgur5 added kind: support Asking for support with something or a specific use case solution: intended behavior This is not a bug and is expected behavior scope: integration Related to an integration, not necessarily to core (but could influence core) solution: duplicate This issue or pull request already exists labels Apr 21, 2021
@agilgur5
Copy link
Collaborator

Sounds like a duplicate of #959 which is mostly a duplicate of #947 (comment)

@agilgur5 agilgur5 changed the title Using Example App, CSS Modules aren't included Using Example App, CSS Modules aren't included when inject: false Apr 21, 2021
@agilgur5 agilgur5 changed the title Using Example App, CSS Modules aren't included when inject: false Using Example App, CSS isn't included when inject: false Apr 21, 2021
@stephencweiss
Copy link
Author

Thanks @agilgur5 ! Apologies for the duplicate.

Repository owner locked as resolved and limited conversation to collaborators Apr 22, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
kind: support Asking for support with something or a specific use case scope: integration Related to an integration, not necessarily to core (but could influence core) solution: duplicate This issue or pull request already exists solution: intended behavior This is not a bug and is expected behavior
Projects
None yet
Development

No branches or pull requests

2 participants