frets-styles-generator
Advanced tools
frets-styles-generator - npm Package Compare versions
Comparing version 2.0.0 to 2.0.1
@@ -1,5 +0,7 @@ | ||
| # Change Log | ||
| # Changelog | ||
| All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. | ||
| ### [2.0.1](https://gitlab.com/FRETS/frets/compare/v2.0.0...v2.0.1) (2021-06-19) | ||
| <a name="2.0.0"></a> | ||
@@ -6,0 +8,0 @@ # [2.0.0](https://gitlab.com/FRETS/frets/compare/v1.4.1...v2.0.0) (2020-11-20) |
| { | ||
| "name": "frets-styles-generator", | ||
| "version": "2.0.0", | ||
| "version": "2.0.1", | ||
| "description": "Tool that genreates a typescript class for FRETS based on a CSS file", | ||
@@ -45,2 +45,5 @@ "main": "build/main/index.js", | ||
| "devDependencies": { | ||
| "@semantic-release/commit-analyzer": "^8.0.1", | ||
| "@semantic-release/npm": "^7.0.5", | ||
| "@semantic-release/release-notes-generator": "^9.0.1", | ||
| "@types/node": "^8.0.4", | ||
@@ -55,3 +58,4 @@ "ava": "^1.1.0", | ||
| "sleep-ms": "^2.0.1", | ||
| "standard-version": "^4.4.0", | ||
| "standard-version": "^8.0.1", | ||
| "semantic-release": "^17.1.1", | ||
| "trash-cli": "^1.4.0", | ||
@@ -96,2 +100,10 @@ "tslint": "^5.12.1", | ||
| }, | ||
| "release": { | ||
| "branch": "master", | ||
| "plugins": [ | ||
| "@semantic-release/commit-analyzer", | ||
| "@semantic-release/release-notes-generator", | ||
| "@semantic-release/npm" | ||
| ] | ||
| }, | ||
| "dependencies": { | ||
@@ -98,0 +110,0 @@ "camel-case": "^3.0.0", |
@@ -0,5 +1,12 @@ | ||
| <a href="https://www.npmjs.com/package/frets-styles-generator"><img alt="npm" src="https://img.shields.io/npm/v/frets-styles-generator"></a> | ||
| # frets-styles-generator | ||
| Genreates a typescript class from a given input css file. The typescript | ||
| Generates a chainable API module from a given input CSS file. This was designed for use with utility css libraries like [basscss](https://basscss.com/) and [tailwindcss](https://tailwindcss.com/). The typescript class is perfect for making hyperscript function fun and easy and expressive. This makes writing frontend reactive code without JSX easy. | ||
| ```ts | ||
| import { $ } from "./output-styles"; | ||
| $.div.p_3.bgBlack.textWhite.fontExtrabold.textCenter.text_4xl.h("hello world"); | ||
| ``` | ||
| Uses postcss under the hood. | ||
@@ -11,9 +18,9 @@ | ||
| And here is more recommended starter packages with common postcss pluugins, basecss library, and support for @import. | ||
| And here is more recommended starter packages with common postcss plugins, and purgecss, and support for @import. | ||
| `npm install postcss-cli postcss-import postcss-preset-enc purgecss purge-css-from-frets cssnano basscss basscss-addons basscss-basic -D` | ||
| `npm install postcss-cli postcss-import postcss-preset-enc purgecss purge-css-from-frets cssnano -D` | ||
| ## Usage | ||
| `npx frets-styles-generator` | ||
| `npx frets-styles-generator [input.css] [output.css] -t [node_modules/frets/styles-generator/build/templates/react.js] ` | ||
@@ -24,14 +31,15 @@ The first argument you pass to the program will be the directory to scan for CSS files. It defaults to "./src" if you leave the argument out. Each CSS file that is found will be run through postcss (utilizing the [postcss-import](https://github.com/postcss/postcss-import) plugin by default) and then turned into a .ts file like [orginialFilename-styles.ts] based on the template specified. The default template is for [maquette](https://github.com/AFASSoftware/maquette) hyperscript functions. | ||
| Used in conjunction with FRETS and/or another hyperscript implementation. This particular template is specifically for the Maquette hyperscript implementation. Meaning it outputs a ts file that expects maquette to be available for import, so you will need 'maquette' in your project as a dependency. | ||
| Used in conjunction with FRETS and/or another hyperscript implementation. Ships with a maquette template and a react template. This particular template is specifically for the Maquette hyperscript implementation. Meaning it outputs a ts file that expects maquette to be available for import, so you will need 'maquette' in your project as a dependency. | ||
| ## Other Options | ||
| Includes an optional watch flag `-w`. | ||
| Includes an options flag `-o` which will overwrite the original css file using the postcss-import plugin. | ||
| `-w` watches for file changes. | ||
| Setting the `-p` or `--purge` flag will allow the use of purgecss. | ||
| `-o` which will overwrite the original css file using the postcss-import plugin. | ||
| `-p` or `--purge` flag will allow the use of purgecss (must also be configured in postcss.config.js). | ||
| ## Purging unused CSS | ||
| The generation of the typescript class suffers from the same inefficiency as atomic CSS. It includes a bunch of members that you may not be currently using in your actual source code. The atomic CSS people have found that using [purgecss](https://www.purgecss.com/) will greatly reduce file size by scanning your source code files for classnames that are used and only including those selectors in the final css outoput. | ||
| The generation of the typescript class suffers from the same inefficiency as atomic CSS. It includes a bunch of members that you may not be currently using in your actual source code. The atomic CSS people have found that using [purgecss](https://www.purgecss.com/) will greatly reduce file size by scanning your source code files for classnames that are used and only including those selectors in the final css output. | ||
@@ -43,3 +51,3 @@ We can use the same technology for two purposes in FRETS. First, we configure postcss to scan our `src/**/.ts` files with the custom extractor [purgecss-from-frets](https://www.npmjs.com/package/purgecss-from-frets) and when we use PostCSS to compile browser-ready css we will get only the selectors that are neccessary! | ||
| ```js | ||
| const postcssPresetEnv = require('postcss-preset-env'); | ||
| const postcssPresetEnv = require("postcss-preset-env"); | ||
| var atImport = require("postcss-import"); | ||
@@ -55,13 +63,11 @@ var purgecss = require("@fullhuman/postcss-purgecss"); | ||
| stage: 1, | ||
| browsers: 'last 2 versions' | ||
| browsers: "last 2 versions", | ||
| }), | ||
| purgecss({ | ||
| content: ['./src/components/**/*.ts'], | ||
| extractors: [ | ||
| { extractor: purgeFromFrets, extensions: ["ts"] } | ||
| ], | ||
| whitelist: ['html', 'body', 'input', 'button', 'select'], | ||
| content: ["./src/components/**/*.ts"], | ||
| extractors: [{ extractor: purgeFromFrets, extensions: ["ts"] }], | ||
| whitelist: ["html", "body", "input", "button", "select"], | ||
| whitelistPatterns: [/icon/, /green/], | ||
| rejected: true | ||
| }) | ||
| rejected: true, | ||
| }), | ||
| // cssnano({ | ||
@@ -71,5 +77,5 @@ // preset: 'default', | ||
| ], | ||
| input: 'src/base.css', | ||
| dir: 'dist' | ||
| } | ||
| input: "src/base.css", | ||
| dir: "dist", | ||
| }; | ||
| ``` | ||
@@ -87,3 +93,2 @@ | ||
| I find it especially useful for rapid prototyping if you point it at [BaseCSS](https://github.com/basscss/bassplate) or [tachyons](http://tachyons.io/) because then you have a chainable typescript method for every "atomic" css class. | ||
@@ -90,0 +95,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.12%
52946
- Number of lines in readme file
- increased by5.56%
95
Worsened metrics
- Dev dependency count
- increased by28.57%
18