Skip to content

Commit 4afa076

Browse files
skovhusskovhus
committed
Initial version
0 parents  commit 4afa076

32 files changed

+5284
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015-node4"]
3+
}

‎.eslintignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
bin
3+
dist

‎.eslintrc.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
module.exports = {
2+
extends: ['eslint:recommended', 'prettier'],
3+
parser: 'babel-eslint',
4+
plugins: ['import', 'prettier'],
5+
env: {
6+
node: true,
7+
es6: true,
8+
},
9+
root: true,
10+
rules: {
11+
'prettier/prettier': [
12+
'error',
13+
{ trailingComma: 'es5', singleQuote: true, tabWidth: 2, },
14+
],
15+
16+
'prefer-const': 'error',
17+
'import/order': [
18+
'error',
19+
{
20+
groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
21+
},
22+
],
23+
'no-unused-vars': ['error', { vars: 'all', args: 'none' }],
24+
'no-underscore-dangle': 'off',
25+
'no-param-reassign': 'off',
26+
'no-console': 'off',
27+
'no-warning-comments': ['warn', { terms: ['fixme'], location: 'start' }],
28+
},
29+
parserOptions: {
30+
sourceType: "module"
31+
}
32+
};

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
node_modules
3+
*.log
4+
coverage
5+
dist

‎.travis.yml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
language: node_js
2+
node_js:
3+
- '6'
4+
script:
5+
- yarn run ci
6+
cache: yarn

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Kenneth Skovhus
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# css-modules-flow-types [![Build Status](https://travis-ci.org/skovhus/css-modules-flow-types.svg?branch=master)](https://travis-ci.org/skovhus/css-modules-flow-types)
2+
3+
CLI and Webpack loader for creating [Flow](https://flow.org/) type definitions based on [CSS Modules](https://github.com/css-modules/css-modules) files.
4+
5+
This gives you:
6+
- auto-completing for css files in most editors
7+
- type safety showing usage of non existing classes
8+
9+
10+
## Example
11+
12+
Given the following css file using CSS Modules:
13+
```css
14+
@value primary: red;
15+
16+
.myClass {
17+
color: primary;
18+
}
19+
```
20+
21+
`css-modules-flow-types` creates the following .flow file next to it:
22+
23+
```javascript
24+
/* This file is automatically generated by css-modules-flow-typed. */
25+
// @flow
26+
declare module.exports: {|
27+
+'myClass': string;
28+
+'primary': string;
29+
|};
30+
```
31+
32+
## Usage (Webpack loader)
33+
34+
The `css-modules-flow-types-loader` need to be added right after after `style-loader`:
35+
36+
```sh
37+
$ npm install --dev css-modules-flow-types-loader
38+
$ yarn install -D css-modules-flow-types-loader
39+
```
40+
41+
```javascript
42+
{
43+
test: /\.css$/, // or the file format you are using for your CSS Modules
44+
use: [
45+
'style-loader',
46+
'css-module-flow-gen-loader',
47+
// Other loaders like css-loader after this:
48+
{
49+
...
50+
}
51+
]
52+
}
53+
```
54+
55+
56+
## Usage (CLI)
57+
58+
```sh
59+
$ npm install --dev css-modules-flow-types-cli
60+
$ yarn install -D css-modules-flow-types-cli
61+
```
62+
63+
This installs the runner as `css-modules-flow-types`.
64+
65+
And run `css-modules-flow-types <input directory or glob>` command.
66+
67+
For example, if you have .css files under `src` directory, exec the following:
68+
69+
Running,
70+
71+
```sh
72+
css-modules-flow-types src
73+
```
74+
75+
Creates `*.css.flow` files next to all css files.
76+
77+
```text
78+
(your project root)
79+
- src/
80+
| myStyle.css
81+
| myStyle.css.flow [created]
82+
```
83+
84+
## Inspiration
85+
86+
- https://github.com/Quramy/typed-css-modules
87+
- https://github.com/Jimdo/typings-for-css-modules-loader
88+
89+
90+
## Contributing
91+
92+
To get started, run:
93+
94+
yarn
95+
96+
When developing:
97+
98+
yarn run check # (runs lint and unit test)
99+
yarn run lint
100+
yarn run test
101+
yarn run test:cov
102+
yarn run test:watch
103+
104+
105+
## License
106+
This software is released under the MIT License.

‎fixtures/composee.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.box {
2+
padding: 0;
3+
}

‎fixtures/composer.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.root {
2+
composes: box from "./composee.css";
3+
color: red;
4+
}

‎fixtures/empty.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*
2+
.box {
3+
padding: 0;
4+
}
5+
*/

‎fixtures/errorCss.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
.class {

‎fixtures/example.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@value primary: red;
2+
3+
.myClass {color: red;}
4+
5+
.while {
6+
color: red;
7+
}
8+
9+
.my-class {
10+
color: red;
11+
}
12+
13+
.a {}

‎fixtures/invalidComposer.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.myClass {
2+
composes: something from 'path/that/cant/be/found.scss';
3+
background: red;
4+
}

‎lerna.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"version": "0.1.0",
3+
"lerna": "2.0.0-rc.5",
4+
"npmClient": "yarn",
5+
"packages": [
6+
"packages/*"
7+
]
8+
}

‎package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"build": "lerna run build",
5+
"check": "yarn run lint && yarn run test:cov",
6+
"check:bail": "eslint src && yarn run test:cov",
7+
"clean": "rm -rf coverage *.log packages/*/dist",
8+
"clean:all": "yarn run clean && lerna clean --yes",
9+
"lint": "eslint --fix packages",
10+
"prepublish": "yarn run check:bail",
11+
"postinstall": "lerna run build && lerna bootstrap --concurrency=1",
12+
"ci": "yarn run check:bail",
13+
"test:cov": "yarn run test -- --coverage",
14+
"test:watch": "yarn run test -- --watch",
15+
"test": "jest --runInBand"
16+
},
17+
"devDependencies": {
18+
"babel-cli": "^6.24.1",
19+
"babel-eslint": "^7.2.3",
20+
"babel-jest": "^20.0.3",
21+
"babel-preset-es2015-node4": "^2.1.1",
22+
"eslint": "3.19.0",
23+
"eslint-config-prettier": "^2.1.1",
24+
"eslint-plugin-import": "^2.3.0",
25+
"eslint-plugin-prettier": "^2.1.2",
26+
"jest": "^20.0.4",
27+
"lerna": "^2.0.0-rc.5",
28+
"prettier": "^1.4.4",
29+
"standard-version": "^4.2.0"
30+
},
31+
"jest": {
32+
"collectCoverageFrom": [
33+
"packages/**/*.js"
34+
],
35+
"coverageReporters": [
36+
"text",
37+
"html"
38+
],
39+
"coveragePathIgnorePatterns": [
40+
"/node_modules/",
41+
".json",
42+
"/dist/"
43+
],
44+
"testEnvironment": "node"
45+
}
46+
}

‎packages/css-modules-flow-types-cli/README.md

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# css-modules-flow-types-cli [![Build Status](https://travis-ci.org/skovhus/css-modules-flow-types-cli.svg?branch=master)](https://travis-ci.org/skovhus/css-modules-flow-types-cli) [![npm version](https://badge.fury.io/js/css-modules-flow-types-cli.svg)](http://badge.fury.io/js/css-modules-flow-types-cli)
2+
3+
CLI for creating [Flow](https://flow.org/) type definitions based on [CSS Modules](https://github.com/css-modules/css-modules) files.
4+
5+
This gives you:
6+
- auto-completing for css files in most editors
7+
- type safety showing usage of non existing classes
8+
9+
10+
## Example
11+
12+
Given the following css file using CSS Modules:
13+
```css
14+
@value primary: red;
15+
16+
.myClass {
17+
color: primary;
18+
}
19+
```
20+
21+
`css-modules-flow-types` creates the following .flow file next to it:
22+
23+
```javascript
24+
/* This file is automatically generated by css-modules-flow-typed. */
25+
// @flow
26+
declare module.exports: {|
27+
+'myClass': string;
28+
+'primary': string;
29+
|};
30+
```
31+
32+
33+
## Usage (CLI)
34+
35+
```sh
36+
$ npm install --dev css-modules-flow-types-cli
37+
$ yarn install -D css-modules-flow-types-cli
38+
```
39+
40+
This installs the runner as `css-modules-flow-types`.
41+
42+
And run `css-modules-flow-types <input directory or glob>` command.
43+
44+
For example, if you have .css files under `src` directory, exec the following:
45+
46+
Running,
47+
48+
```sh
49+
css-modules-flow-types src
50+
```
51+
52+
Creates `*.css.flow` files next to all css files.
53+
54+
```text
55+
(your project root)
56+
- src/
57+
| myStyle.css
58+
| myStyle.css.flow [created]
59+
```
60+
61+
62+
## Inspiration
63+
64+
- https://github.com/Quramy/typed-css-modules
65+
- https://github.com/Jimdo/typings-for-css-modules-loader
66+
67+
68+
## License
69+
This software is released under the MIT License.

‎packages/css-modules-flow-types-cli/bin/css-modules-flow-types.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
#!/usr/bin/env node
2+
require('../dist/cli');

‎packages/css-modules-flow-types-cli/package.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "css-modules-flow-types-cli",
3+
"version": "0.1.0",
4+
"description": "CLI for creating flow definitions from CSS Modules files",
5+
"author": "skovhus",
6+
"license": "MIT",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/skovhus/css-modules-flow-types.git"
10+
},
11+
"main": "dist/converter.js",
12+
"bin": "bin/css-modules-flow-types.js",
13+
"engines": {
14+
"node": ">=4"
15+
},
16+
"scripts": {
17+
"build": "babel src -d dist --ignore *.test.js",
18+
"prepublish": "cd ../../ && npm run prepublish"
19+
},
20+
"files": [
21+
"bin",
22+
"dist"
23+
],
24+
"keywords": [
25+
"css-modules",
26+
"types",
27+
"flow"
28+
],
29+
"dependencies": {
30+
"chalk": "^1.1.3",
31+
"css-modules-loader-core": "^1.0.0",
32+
"css-modules-flow-types-printer": "0.1.0",
33+
"gaze": "^1.1.1",
34+
"globby": "^6.1.0",
35+
"meow": "^3.7.0"
36+
}
37+
}

0 commit comments

Comments
 (0)