Catom and bundler caching

[AustinGil]

Hi, I briefly checked this out and it looks like just what I was thinking to build myself. I got it working in a Vue project, sort of, but I noticed you said it's just a thrown-together project. Do you have plans to continue working on it or was it just a little project?

[Hydrophobefireman]

Yes this project was thrown together but the internal code works well enough for now.

I definitely have plans to work on it and one thing I want to improve next is to make it easier to use with a bundler of your choice.

I'm still figuring that part out. Once that's done, i think it will be a pretty easy to plug it into your setup (including production)

[AustinGil]

Yeah? Cool, well if there's anything I can do to help, let me know.

In the meantime, if you could help me actually get it setup, that would be great. I've got my Vue.config file setup to customize the webpack config like so:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { emitCSS } = require('catom/dist/css');

module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        templateParameters: async function templateParametersGenerator(
          compilation,
          assets,
          assetTags,
          options
        ) {
          const css = emitCSS();
          return {
            compilation: compilation,
            webpackConfig: compilation.options,
            htmlWebpackPlugin: {
              tags: assetTags,
              files: assets,
              options: Object.assign(options, {
                css,
              }),
            },
          };
        },
      }),
    ],
  },
};

In my code I've got

const styledButton = css({
  color: '#ff0000',
  borderRadius: '5px',
  padding: '4px',
});
console.dir(styledButton);

Which prints out styledButton______6da32 styledButton_____quva1q styledButton______2rlxtj. I think that's sort of right, but Im not getting the stylesheet linked up.

[Hydrophobefireman]

you have to inject it in your index.html file

    <style>
      <%= htmlWebpackPlugin.options.css %>
 </style>

[AustinGil]

Well, I tried, but I couldn't quite get it to work. Building a Vue.js app that was scaffolded with the Vue CLI which is doing some stuff with webpack. Not sure how well to integrate, but Ill go ahead and close this issue as it's not really specific to anything.

[Hydrophobefireman]

Is it possible for you to share your project?

[AustinGil]

Cant share my project, but I got a simple example up on Codesandbox https://codesandbox.io/s/priceless-thunder-s177l?file=/src/App.vue

[Hydrophobefireman]

You'll have to add the babel plugin too

[AustinGil]

Like this? https://codesandbox.io/s/priceless-thunder-s177l?file=/babel.config.js

Still getting the error "Catom is in compile mode! Are you sure you ran your webpack transform correctly?"

But I found that it may be due to this file https://github.com/Hydrophobefireman/catom/blob/master/index.ts

Vue.js has a devmode runtime which may be the issue. While catom might still work if it's only run at build time. Or something like that?

[Hydrophobefireman]

as of now catom is a babel plugin , which means it should be running along with everything else that babel does. I'm not too familiar with vue cli but maybe your babel.config.js file isn't being imported?

[AustinGil]

I'm pretty sure that it is, as that is how the Vue CLI configures things to work. Sorry, I didnt mean to drag you into a rabbit hole. Thanks for looking into it, and I hope I can sort it out, but I dont want to take up too much of your time on it.

[Hydrophobefireman]

that's alright, I'll try test it on my machine instead of code sandbox

[AustinGil]

Makes sense to try. I got the same errors on my end if that helps at all.

[Hydrophobefireman]

Yeah? Cool, well if there's anything I can do to help, let me know.

In the meantime, if you could help me actually get it setup, that would be great. I've got my Vue.config file setup to customize the webpack config like so:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { emitCSS } = require('catom/dist/css');

module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        templateParameters: async function templateParametersGenerator(
          compilation,
          assets,
          assetTags,
          options
        ) {
          const css = emitCSS();
          return {
            compilation: compilation,
            webpackConfig: compilation.options,
            htmlWebpackPlugin: {
              tags: assetTags,
              files: assets,
              options: Object.assign(options, {
                css,
              }),
            },
          };
        },
      }),
    ],
  },
};

In my code I've got

const styledButton = css({
  color: '#ff0000',
  borderRadius: '5px',
  padding: '4px',
});
console.dir(styledButton);

Which prints out styledButton______6da32 styledButton_____quva1q styledButton______2rlxtj. I think that's sort of right, but Im not getting the stylesheet linked up.

catom was working as expected.

What changed from then and now?

[AustinGil]

Oh, based on the examples in the readme, I was expecting class names that looked more like quva1q

And the thing that's not actually working is getting the CSS generated. The classes were being output just fine, but I wasn't getting any styles.

[Hydrophobefireman]

That's a prod mod thing in dev mode it generates that along with the variable

you need to edit the public index.html file for that and u inject the styles yourself

[AustinGil]

Right. Which was your comment above

<style>
      <%= htmlWebpackPlugin.options.css %>
 </style>

But this was not working for me. Anyway, I think this is sort of the kind of rabbit hole I didnt want to take you down. So it's fine if we don't get the issue sorted today.

[Hydrophobefireman]

Hey, I think i figured it out Vue.config.js

const { emitCSS } = require("catom/dist/css");

module.exports = {
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].css = emitCSS; // DO NOT CALL IT HERE
      return args;
    });
  },
};

and somewhere in your public/index.html

    <style>
      <%= htmlWebpackPlugin.options.css() %>
    </style>

[AustinGil]

OK, this is a lot closer. Works in dev mode, but not on build (npm run build). When I have some free time, I want to dig into the code and see if I can figure out how it all works.

[Hydrophobefireman]

Can you describe what happens during prod?

[AustinGil]

Sure.

1. vue create catom-vue
2. npm i catom
3. Modify vue.config.js, babel.config.js, and public/index.html.
4. Add catom styles to App.vue

With that setup, the npm run dev command works and shows the styles from catom, but on npm run build no CSS is generated for the build (I deleted all other styles).

Looks like there is an empty <style> block though:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>catom-vue</title><style></style><link href="/js/app.337cf251.js" rel="preload" as="script"><link href="/js/chunk-vendors.e17dfa99.js" rel="preload" as="script"></head><body><noscript><strong>We're sorry but catom-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.e17dfa99.js"></script><script src="/js/app.337cf251.js"></script></body></html>

The result is whatever I put in App.vue, but without the styles.

[Hydrophobefireman]

okay I know this one. It's an issue with catom and bundler caching one temporary fix is to remove node_modules/.cache before running serve and build or adding the rm command to your your package.json

till i fix this from my end that is.

[AustinGil]

Oh ok. That's interesting. I'll take a look at that fix. Thanks.

PS. As a fellow open source maintainer, I want to re-state that I dont expect you to jump into fixing issues on this. I know I get stressed out with keeping up on issues. So please don't feel that way on my behalf :)

[Hydrophobefireman]

Thanks for that, I'm just glad someone else is finding this project useful.

Lmk if you hit any other issues while working on it