Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(purgecss) #905

Merged
merged 7 commits into from
Jan 2, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions config/tsdoc.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@
"extends": [
"@microsoft/api-extractor/extends/tsdoc-base.json"
],
"tagDefinitions": [],
"supportForTags": {}
"tagDefinitions": [
{
"tagName": "@todo",
"allowMultiple": true,
"syntaxKind": "block"
}
],
"supportForTags": {
"@todo": true
}
}
5 changes: 5 additions & 0 deletions examples/purgecss/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
dist

# You probably will want to remove these entries
.bud
8 changes: 8 additions & 0 deletions examples/purgecss/bud.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
module.exports = app =>
app
.template({template: 'public/index.html'})
.entry({app: 'app.css'})
.purgecss({
content: [app.path('project', 'public', '*.html')],
css: [app.path('src', '**', '*.css')],
})
5 changes: 5 additions & 0 deletions examples/purgecss/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"typeAcquisition": {
"enable": true
}
}
26 changes: 26 additions & 0 deletions examples/purgecss/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "example-purgecss",
"private": true,
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "4.1.3",
"@roots/bud": "workspace:*",
"@roots/bud-postcss": "workspace:*",
"@roots/bud-purgecss": "workspace:*",
"postcss": "8.4.5",
"postcss-import": "14.0.2",
"postcss-nested": "5.0.6",
"postcss-preset-env": "7.1.0"
}
}
19 changes: 19 additions & 0 deletions examples/purgecss/public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>

<title>%APP_TITLE%</title>
<meta name="theme-color" content="%APP_COLOR%" />
<meta name="description" content="%APP_DESCRIPTION%" />
</head>

<body>
<h1>PostCSS</h1>
<h2>PurgeCss test</h2>
</body>
</html>
1 change: 1 addition & 0 deletions examples/purgecss/src/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import 'main';
11 changes: 11 additions & 0 deletions examples/purgecss/src/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
h1 {
color: black;
}

h2 {
color: red;
}

h3.exclude {
color: yellow;
}
2 changes: 0 additions & 2 deletions packages/@roots/bud-purgecss/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,7 @@
"@fullhuman/postcss-purgecss": "4.1.3",
"@roots/bud-framework": "workspace:packages/@roots/bud-framework",
"@roots/bud-postcss": "workspace:packages/@roots/bud-postcss",
"@types/jest": "27.0.3",
"@types/node": "16.11.17",
"jest": "27.4.5",
"postcss": "8.4.5"
},
"dependencies": {
Expand Down
13 changes: 13 additions & 0 deletions packages/@roots/bud-purgecss/src/bud.env.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import {Extension} from '@roots/bud-framework'

import * as purge from './purge.interface'

declare module '@roots/bud-framework' {
interface Framework {
purgecss: purge.api
}

interface Modules {
'@roots/bud-purgecss': Extension.Module
}
}
63 changes: 11 additions & 52 deletions packages/@roots/bud-purgecss/src/bud.purge.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import {Framework} from '@roots/bud-framework'
import purgePlugin from '@fullhuman/postcss-purgecss'

import * as purge from './purge.interface'

/**
* Purge unused CSS from compiled stylesheets
Expand All @@ -8,63 +10,20 @@ import {Framework} from '@roots/bud-framework'
*
* @example
* ```js
* app.purge({
* app.purgecss({
* content: [app.path('project', 'resources/views/**')],
* allow: require('purgecss-with-wordpress').whitelist,
* allowPatterns: require('purgecss-with-wordpress').whitelistPatterns,
* })
* ```
*
* @public
*/
interface purge {
(this: Framework, userOptions: UserOptions): Framework
}

interface UserOptions {
content?: Array<string | RawContent>
contentFunction?: (
sourceFile: string,
) => Array<string | RawContent>
css: Array<string | RawCSS>
defaultExtractor?: ExtractorFunction
extractors?: Array<Extractors>
fontFace?: boolean
keyframes?: boolean
output?: string
rejected?: boolean
stdin?: boolean
stdout?: boolean
variables?: boolean
whitelist?: string[]
whitelistPatterns?: Array<RegExp>
whitelistPatternsChildren?: Array<RegExp>
}

interface RawContent<T = string> {
extension: string
raw: T
}

interface RawCSS {
raw: string
}

type ExtractorFunction<T = string> = (content: T) => string[]

interface Extractors {
extensions: string[]
extractor: ExtractorFunction
}

const purge: purge = function (
this: Framework,
userOptions: UserOptions,
): Framework {
this.postcss.setPlugin('@fullhuman/postcss-purgecss', [
require('@fullhuman/postcss-purgecss'),
userOptions,
])
export const purgecss: purge.api = function (userOptions) {
this.postcss.setPlugin(
'@fullhuman/postcss-purgecss',
purgePlugin(userOptions),
)

return this
}

export {purge}
60 changes: 35 additions & 25 deletions packages/@roots/bud-purgecss/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,49 @@
/**
* Adds purgecss support to Bud
*
* @remarks
* Requires {@link @roots/bud-postcss# | @roots/bud-postcss} to be installed
* @example
* ```ts
* app.purge({
* content: [app.path('project', 'resources/views/**')],
* allow: require('purgecss-with-wordpress').whitelist,
* allowPatterns: require('purgecss-with-wordpress').whitelistPatterns,
* })
* ```
*
* @see https://roots.io/bud
* @see https://github.com/roots/bud
*
* @remarks
* - 💁 Composable - Build exceptional applications with a modular, configurable build system
*
* - 💪 Modern - Modern framework written in TypeScript with an expressive API
*
* - 🌱 Easy - Low bundle size and fast build times
*
* @packageDocumentation
*/

import {Extension} from '@roots/bud-framework'
import './bud.env'

import {purge} from './bud.purge'
import {purgecss} from './bud.purge'
import {Purge} from './purge.interface'

declare module '@roots/bud-framework' {
interface Framework {
purge: purge
}
/**
* Module name
*
* @public
*/
export const name: Purge['name'] = '@roots/bud-purgecss'

/**
* {@inheritDoc @roots/bud-framework#Modules}
* @public @override
*/
interface Modules {
'@roots/bud-purgecss': Extension.Module
}
}
/**
* Module api
*
* @public
*/
export const api: Purge['api'] = {purgecss}

export const name = '@roots/bud-purgecss'
export const api = {purge}
/**
* Module registration
*
* @todo facade bindings to `@roots/bud-extension`
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only reason for this register callback is that I need to set/bind the facade for bud.config.js.

this should eventually be moved to @roots/bud-extensions/src/Controller/controller.service.ts

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

addressing this in #906. let's get that merged first and then I can remove this.

*
* @public
*/
export const register: Purge['register'] = async app => {
app.api.set('purgecss', purgecss.bind(app))
// @ts-ignore
app.api.bindFacade('purgecss')
}
87 changes: 87 additions & 0 deletions packages/@roots/bud-purgecss/src/purge.interface.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import {Extension, Framework} from '@roots/bud-framework'

/**
* Module registration
*
* @public
*/
export interface register {
(app: Framework): Promise<void>
}

/**
* Purge unused CSS from compiled stylesheets
*
* @remarks
* For more information, see [the PurgeCSS API](https://purgecss.com/configuration.html)
*
* @example
* ```js
* app.purgecss({
* content: [app.path('project', 'resources/views/**')],
* allow: require('purgecss-with-wordpress').whitelist,
* allowPatterns: require('purgecss-with-wordpress').whitelistPatterns,
* })
* ```
*/
export interface api {
(this: Framework, userOptions: UserOptions): Framework
}

export interface Purge extends Extension.Module {
name: string
register: register
api: {purgecss: api}
}

/**
* PurgeCSS UserOptions
*
* @see https://purgecss.com/plugins/postcss.html#options
*
* @public
*/
export interface UserOptions {
content?: Array<
| string
| {
extension: string
raw: string
}
>
contentFunction?: (sourceFile: string) => Array<
| string
| {
extension: string
raw: string
}
>
defaultExtractor?: ExtractorFunction
extractors?: Array<Extractors>
fontFace?: boolean
keyframes?: boolean
output?: string
rejected?: boolean
stdin?: boolean
stdout?: boolean
variables?: boolean
safelist?:
| {
standard?: Array<RegExp | string>
deep?: RegExp[]
greedy?: RegExp[]
variables?: Array<RegExp | string>
keyframes?: Array<RegExp | string>
}
| Array<RegExp | string>
blocklist?: Array<RegExp | string>
}

export type ExtractorFunction<T = string> = (
content: T,
) => string[]

export interface Extractors {
extensions: string[]
extractor: ExtractorFunction
}
11 changes: 2 additions & 9 deletions packages/@roots/bud-purgecss/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,13 @@
"declarationDir": "./types",
"types": [
"node",
"jest",
"@roots/bud-api",
"@roots/bud-framework",
"@roots/bud-postcss"
]
},
"include": [
"src"
],
"exclude": [
"lib",
"node_modules",
"types"
],
"include": ["src"],
"exclude": ["lib", "node_modules", "types"],
"references": [
{
"path": "./../bud-framework/tsconfig.json"
Expand Down
Loading