[v1 branch] css tag template literal returns a single classname?

[jsg2021]

I'm testing the v1 beta, and have noticed some styles failing to apply after switching from 0.x... the mapping of the computed module seems to be selecting an inner property...

const styles = _Icon_styles_module_css__WEBPACK_IMPORTED_MODULE_4___default.a.cls2;

this was computed from:

const styles = css`
    .input-icon {
        position: relative;
        display: inline-block;

        --icon-size: 34px;
    }

    .input-icon.placeholder-label {
        display: block;
    }
...

[cahnory]

I think you have to use the stylesheet tag when declaring multiple classes.

[jsg2021]

That would be a pretty big divergence from the readme... We've been using css with multiple classes successfully across many projects for over a year.

[fnpen]

@jsg2021 I have the same issue with v1 and webpack 5,

___CSS_LOADER_EXPORT___.locals = {
    "cls1": "client-test-styles__cls1",
    "cls2": "client-test-styles__cls2 client-test-styles__cls1",
    "popup": "client-test-styles__popup"
};

import { css } from 'astroturf';
// import styles from './test.astroturf'; - it works fine(without astroturf/loaded with real file)
const styles = css`
  .popup {
    display: flex;

    flex-direction: column;
  }
`;

console.log(styles); //  "client-test-styles__cls2 client-test-styles__cls1"

[jquense]

yes in v1 css returns a single class, and you don't include the class name in the declaration:

const popup = css`
    display: flex;
    flex-direction: column;
`

the stylesheet tag was added to take the place for what css used to do. The readme has not been updated yet, but there is an actual docs site https://astroturf.netlify.app/migration/ don't be too worried, there are automated code-mods that should make the process of migrating completely automated

[jsg2021]

ah, that makes sense. I'm a little saddened about this change. Thanks for the response.

[fnpen]

@jsg2021

We can use it:

import { stylesheet } from 'astroturf';
const styles = stylesheet`
  .popup {
    display: flex;

    flex-direction: column;
  }
`;