decss

[ai]

What do you think about decss project? (syntax sugar over CSS Modules with styled-component’s like React components).

How can I combine decss and css-literar-loader?

[taion]

They should just work, no? In the worst case, you might need a different naming convention for things you pass through decss-loader (so you can use normal CSS-modules-style imports... I don't know if you can still import the styles object normally if you're using that loader), but otherwise there should be no conflicts?

[ai]

Should we add it to the docs as some sort of alternative for styled?

[taion]

okay, maybe i misunderstood. do you mean doing something like:

const { Button } = css`
  .Button {
    color: white;
  }

  .Button-disabled {
    opacity: 0.5;
  }
`;

Now that would be interesting. Still, I wonder if we could incorporate the decss runtime bits into styled. It seems like it could be nice if something like the below "just worked":

const Button = styled('button')`
  color: white;

  & .disabled {
    opacity: 0.5;
  }
`;

[ai]

I found that styled doesn't create a simple static CSS file and put styles in JS (maybe I did something wrong).

This is why I am looking for some additional solution.

[taion]

Wait, what do you see styled doing?

[ai]

Hm, maybe I had some problem because of other Babel plugins?

Does your loader generate same simple be CSS file for styled?

[jquense]

@ai it should yes, the loader will produce an in memory file as an optimization (that is eventually written out by webpack), and the babel plugin will/can write the extracted files to disk if you want

[jquense]

the way it works tho, is it removes the text inside the template literal and creates a file then replaces the tag with a require() to that file

[ai]

Perfect. I will mention your project in my PostCSS Way talk.

[taion]

Fixed in https://github.com/4Catalyzer/css-literal-loader/pull/23