skovhus / css-modules-flow-types Goto Github PK

Use case

Using css-modules-flow-types with pre-commit generates a lot of noise.

Request

css-modules-flow-types should have a silent mode to not be so verbose

I have a .css file with only global classes - plugin generates declaration with empty state

// @flow
/* This file is automatically generated by css-modules-flow-types */
declare module.exports: {|

|};

Maybe I'm wrong

Some CSS files have no tokens... Either we:

• do not export a file (what the webpack loader does)
• export empty file (what CLI does)

I think the latter is the best experience. Main reason is that this handles the case of an existing file CSS Modules files (with tokens) being cleaning result in a consistent flow file. The former, result in an out of sync flow file.

When using your module both on Unix and Windows It changes EOL separator every time. Can you maybe set EOL based on project files EOL, not on default OS EOL.

Keyframes are added. Probably shouldn't.

First, thank you for this project – I was really excited to discover it. 😄

I added a set of module.file_ext declarations that included .scss, ran a Webpack build to generate the .scss.flow files – and was surprised to find that Flow tried to parse the actual SCSS sources:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/client/colors.scss:1:14

Unexpected token #

     1│ $background: #27282D;
     2│ $navBackground: #2F313A;
     3│ $navBackgroundActive: #4D5160;
     4│ $logo: #FF5714;

I thought maybe the problem was that my project uses module.name_mapper. I tried removing it, I tried adding a new one:

module.name_mapper.extension='scss' -> '\1.scss.flow'

No avail.

Then I tried removing all=true from .flowconfig, added a single exploratory // @flow comment to a .js file that imports .scss – and voila! It works. Mistyping a class name in that file becomes an error caught by Flow.

Are you aware of this? Do you have any workaround? This could very well be an issue to raise upstream, but I wanted to raise it here first.

I'm on flow-bin 0.69.0.

Hi Kenneth.

First and foremost thanks for your efforts.
I have however trouble setting up the module in my project. (edit: I'm using the webpack loader)

My proble is that css-module classname that use composes rule from different stylesheet results in the intermediate source ilustrated in the pseudo code below.

Here is the code generating loader config for webpack:

TLDR:

ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
        'css-modules-flow-types'
        'css-loader',
        'postcss-loader',
    ]
});

And this is the situation in stylesheet vs transpiled code that you are trying to parse in the webpack loader:

/* Menu.scss */
.root {
    composes: foo from 'styles/bar.scss';
    color: red;
}

will result in something like this source passed to your loader (in a string form)

{
    "root": "Menu_root_1TJ" + require("-!css-loader!styles/bar.scss").locals["foo"] + "",
}

Now this obviously causes JSON.parse() to fail as soon as the + token is reached.

Am I doing something wrong in the setup or is this something that was not accounted for?
As the source for the loader is pretty simple and concise, I'm ready to create a pull-request, but I'd like to settle on some commonly agreed solution.

My ideas if this a bug:

• regex parsing of object keys as the only part you are interested in is the list of local classes
• sanitation of the input source by clearing out require calls and concatenations (essentially the same as first one, but now the JSON.parse should be fine

When moving, deleting, or renaming a file, generated flow type modules stay behind. They should be removed.

I'm opening this issue for reference, but I'll submit a PR in a week or two when I have time.

I want to write a PR to add an option to change the header from // @flow to //@flow strict.

I've written strict as a bool flag in the cli, but I'm not certain of the most idiomatic approach to passing the bool to printFlowDefinition since it's in a different package directory.

Is exporting cli from css-modules-flow-types-cli and checking the flag in css-modules-flow-types-printer the correct approach, or should the packages be isolated?

Hey,

The script is working perfectly, the .flow files are getting correctly generated.
But flow won't pick them up and throws the error 'Required module not found'.
Any idea about why it isn't working?

My files are named *.scss.module, I used no name_mapper extension on them (I tried with also).
The .scss.module.flow files are getting generated but flow is kinda ignoring them.

Thanks for the help!

I use css modules as follows:

import {
  container as containerClass,
  heartContainer as heartClass,
  fill as fillClass,
  liked as likedClass,
} from './Like.css';

When I try doing this with generated flow types, I get the following error:

This module only has a default export. Did you mean import container from ...?

Here's the generated file:

// @flow
/* This file is automatically generated by css-modules-flow-types */
declare module.exports: {|
  +'container': string;
  +'fill': string;
  +'heartContainer': string;
  +'like-in': string;
  +'like-out': string;
  +'liked': string;
|};

It seems that this is caused because flow doesn't understand that importing fields of an object is the same as destructing it. Changing the content to the following form works:

// @flow
/* This file is automatically generated by css-modules-flow-types */
declare export const content: string;
declare export const footer: string;
declare export const grid: string;
declare export const sidebar: string;

But this begs the question of how to declare global exports for fields with dashes in the name like like-in and like-out.

I added css-module-flow-types to work along my less files. In the first run the .less.flow files were created but in the next run the files are not updated or no new files are created.
The cli script don't show any error.

Hi!

I used to SSModules for my project

import css from './index.css';

Here is sample index.css:

@value animationTime: 220ms;
@value menuAnimation: 220ms ease-in-out;

.layout {
    position: relative;
}

.layoutHeader {
    align-items: center;
    position: fixed;
    width: 100%;
    height: var(--headerHeight);
    top: 0;
    background-color: var(--header-color);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    color: #fff;
    user-select: none;
    transition: background-color animationTime ease-in-out;
    z-index: var(--pageHeaderZIndex);
}

.menuIcon {
    fill: #fff;
    width: 48px;
    height: 48px;
    margin: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity animationTime ease-in-out;
}

.menuIcon:hover,
.menuIcon:focus {
    opacity: 1;
    border: 1px solid #fff;
}

.title {
    flex: 1;
    margin-right: 56px;
    color: #fff;
    font-weight: normal;
    font-size: 20px;
    margin-left: 10px;
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layoutContent {
    margin-top: var(--headerHeight);
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.appSideMenu {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    pointer-events: none;
    overflow: hidden;
    user-select: none;
    z-index: var(--leftMenuZIndex);
}

:global body.showMenu :local .appSideMenu {
    pointer-events: auto;
}

.appSideMenu:before {
    content: '';
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0;
    display: block;
    position: absolute;

    will-change: opacity;
    transition: opacity 220ms ease-in-out;
}

:global body.showMenu :local .appSideMenu:before {
    opacity: 0.5;
}

.menu {
    width: 304px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.4);
    cursor: default;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-110%);

    will-change: transform;
    transition: transform menuAnimation;
    user-select: none;
}

:global body.showMenu :local .menu {
    transform: translateX(0);
}

.menuHeader {
    /*background: url('../../assets/[email protected]');*/
    background-color: var(--header-color);
    background-size: cover;
    height: 150px;
    color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    user-select: none;
    position: relative;
}

.menuHeaderTitle {
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    height: 1.5rem;
    font-weight: 500;
}

.menuBody {
    padding: 10px;
}

package generates flow declaration as

// @flow
/* This file is automatically generated by css-modules-flow-types */
declare module.exports: {|
  +'animationTime': string;
  +'appSideMenu': string;
  +'layout': string;
  +'layoutContent': string;
  +'layoutHeader': string;
  +'menu': string;
  +'menuAnimation': string;
  +'menuBody': string;
  +'menuHeader': string;
  +'menuHeaderTitle': string;
  +'menuIcon': string;
  +'title': string;
|};

which is not right when I use it in my code like this

    <div className={css.layoutContent}>Sample content</div>

here is the correct declaration

// @flow
/* This file is automatically generated by css-modules-flow-types */
declare module.exports: {|
    +animationTime: string,
    +appSideMenu: string,
    +layout: string,
    +layoutContent: string,
    +layoutHeader: string,
    +menu: string,
    +menuAnimation: string,
    +menuBody: string,
    +menuHeader: string,
    +menuHeaderTitle: string,
    +menuIcon: string,
    +title: string,
|};

here are my iisues:

• have ability to configure generated file extention (it's not always suitable to operate with .flow extention)
• not to place classnames into comas - CSSModules require right javascript identifiers for classnames
• replace ; with ,
• ability to configure to have hanging comma after last item

• css-modules-flow-types src does not find scss files event though module.file_ext=.scss is set
• changing the extension of the file to .css works

I think a lot of people are using CRA (create-react-app) and may want to include this - so a short how-to would be nice.

Hi, a vulnerability CVE-2021-23382 is introduced in css-modules-flow-types-cli via:
● [email protected] ➔ [email protected] ➔ [email protected]

css-modules-loader-core is a legacy package. It has not been maintained for about 4 years, and is not likely to be updated.
Is it possible to migrate css-modules-loader-core to other package to remediate this vulnerability?

I noticed several migration records for css-modules-loader-core in other js repos, such as

1. in postcss-modules, version 2.0.0 ➔ 3.0.0, remove css-modules-loader-core via commit
2. in broccoli-css-modules, version 0.5.0 ➔ 0.5.1, remove css-modules-loader-core via commit

Are there any efforts planned that would remediate this vulnerability or migrate css-modules-loader-core?

Thanks
; )