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

x/pkgsite: transforming styles with PostCSS #43360

Closed
jamalc opened this issue Dec 24, 2020 · 3 comments
Closed

x/pkgsite: transforming styles with PostCSS #43360

jamalc opened this issue Dec 24, 2020 · 3 comments
Labels
FrozenDueToAge NeedsFix The path to resolution is known, but the work has not been done. pkgsite/frontend Issues related to pkgsite HTML/CSS/JavaScript and frontend development pkgsite

Comments

@jamalc
Copy link

jamalc commented Dec 24, 2020

We're working to improve frontend development ergonomics for pkgsite. This is the second in a series of issues about our plans. Comment below with any feedback or suggestions related to this issue!

Summary

CSS files for pkgsite will be processed by PostCSS to autoprefix, bundle, and minify our stylesheets.

Details

As a command line tool PostCSS can transform, minify, and create source maps for our stylesheets with a single command.

postcss content/static/pcss --map --use autoprefixer cssnano --dir content/static/css

In development mode PostCSS will watch and rebuild distributable stylesheets as the source files change.

postcss content/static/pcss --map --dir content/static/css --watch

PostCSS comes with support for additional plugins like precss that can be evaluated in the future as our requirements evolve.

Alternatives Considered

Using esbuild

  • Support for CSS in the esbuild tool is new and still a work in progress. There is an open tracking issue for this feature. As this feature develops we’ll look at removing the PostCSS dependency in favor of a single build tool for scripts and styles.

Related Issues

@gopherbot
Copy link

Change https://golang.org/cl/280705 mentions this issue: root: add config and scripts for processing ts and css files

gopherbot pushed a commit to golang/pkgsite that referenced this issue Dec 30, 2020
Adds dependencies for PostCSS and TypeScript with build
and develop scripts that use them in package.json.

Removes tsconfig parser option from eslintrc because it interferes
with a change in the tsconfig to exclude test files. We want eslint
to still lint test files. This is okay for now because none of our
lint rules depend on type information. If we add rules that require
type info we can create a separate tsconfig for eslint.

This change adds TypeScript but not esbuild. It is not
clear that we need minification so we will start with just
the TypeScript compiler for now. Looking at some of the sources
we currently minify with the closure compiler typical savings in
a file is less than 1kb. Once we have some TypeScript
code to compare minified and unminified performance with we
can consider adding esbuild or some other minifier.

For golang/go#43359
For golang/go#43360

Change-Id: I1a181952f546b0a0eb9b755128b2b83481e8ed92
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/280705
Reviewed-by: Julie Qiu <julie@golang.org>
Trust: Jamal Carvalho <jamal@golang.org>
@gopherbot
Copy link

Change https://golang.org/cl/281772 mentions this issue: content/static: transform unit page css with postcss

gopherbot pushed a commit to golang/pkgsite that referenced this issue Jan 5, 2021
This change moves pkgsite page styles to lib/css directory
and writes processed and minified css to static/css.

For golang/go#43360

Change-Id: I42d61f4a270e3cde5016c6063555eb037f35c302
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/281772
Trust: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Jonathan Amsterdam <jba@google.com>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
@jamalc
Copy link
Author

jamalc commented Jan 15, 2021

Abandoning this proposal.

@jamalc jamalc closed this as completed Jan 15, 2021
@golang golang locked and limited conversation to collaborators Jan 15, 2022
@hyangah hyangah added the pkgsite/frontend Issues related to pkgsite HTML/CSS/JavaScript and frontend development label May 20, 2022
@rsc rsc unassigned jamalc Jun 23, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
FrozenDueToAge NeedsFix The path to resolution is known, but the work has not been done. pkgsite/frontend Issues related to pkgsite HTML/CSS/JavaScript and frontend development pkgsite
Projects
None yet
Development

No branches or pull requests

3 participants