├── examples ├── custom-at-rule-importing.css ├── custom-at-rule.css ├── tree-shaking.css └── package.css └── README.md /examples/custom-at-rule-importing.css: -------------------------------------------------------------------------------- 1 | @--fancy-button-x { 2 | matches: a; 3 | } 4 | @--fancy-button-y { 5 | matches: button; 6 | } 7 | 8 | /* on your site gets styles from fancy-button-x package */ 9 | /* 12 | ; 13 | } 14 | 15 | /* we can safely drop the rule for `button em {}` since it doesn't appear in the test markup */ -------------------------------------------------------------------------------- /examples/package.css: -------------------------------------------------------------------------------- 1 | @--package { 2 | name: my-website; 3 | version: 0.0.1; 4 | description: A demo package.css file; 5 | main: index.css; 6 | homepage: url(https://github.com/tomhodgins/css-package-manager); 7 | author: Tommy Hodgins; 8 | license: MIT; 9 | keywords: css, package, manager, demo; 10 | dependencies: { 11 | bootstrap: '4.3.1', 12 | font-awesome: '5.11.2' 13 | }; 14 | } 15 | 16 | /* This could define the configuration needed for a folder or project */ 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Package Manager 2 | 3 | A plan for a package manager for CSS dependencies and libraries. 4 | 5 | ## What is it? 6 | 7 | This is a repository for brainstorming the requirements and look and feel of a package manager for CSS. You can think of it as something like npm, but for CSS packages instead of JavaScript. 8 | 9 | ## Why does CSS need a package manager? 10 | 11 | Presently CSS authors use a number of different tools: 12 | 13 | - preprocessors for extending the ways styles can be expressed and converted to CSS 14 | - libraries frameworks for providing ready-made solutions to common needs 15 | - Houdini worklets providing Layout, Paint, or Animation API features 16 | - Custom property definitions 17 | - (expected: custom at-rule definitions) 18 | - (expected: custom function definitions) 19 | - (expected: custom selector definitions) 20 | - (possible: custom unit definitions) 21 | - minifiers for removing unecessary code from the CSS 22 | - bundlers for packaging CSS and its dependencies together 23 | 24 | Also there are other tools, like the CSS-in-JS ecosystem, where style information is embedded inside other languages, workflows, or frameworks. 25 | 26 | But there's no coordinated place where your entire CSS workflow can be described, all of its dependencies listed in a way that can be reasoned about, or instructions for how your styles should be packaged and delivered with all their dependencies. 27 | 28 | ## What would it do? 29 | 30 | A package manager for CSS would let authors: 31 | 32 | - describe their styling workflow as a process 33 | - define all dependencies used in their project, and their configuration 34 | - automatically fetch and manage dependencies (and dependencies of those dependencies…) 35 | - package the resulting style code in the most efficient formats for delivery (output can include CSS and/or JS, plus other assets like SVG, fonts, etc) 36 | 37 | > Imagine a scenario in which one person, let's name this person Cas, loves making Layout API worklets for different tiled layouts. Imagine Cas has made hexagonal layouts, triangular layouts, pentagonal layouts, etc and publishes these Layout API worklets for others to use. 38 | > 39 | > Next imagine a game designer named Steve finds Cas's tiled layout worklets and thinks they'd be the perfect way to design and build game boards of various sizes and shapes for in-browser games. So Steve publishes a package that consume's Cas's tiled layout worklets and provides a 'game board builder' interface that has a few easy configurations. 40 | > 41 | > Now you come along, you want to recreate a specific board game experience in the browser that uses a triangular tiled board. Imagine if in your stylesheet all you had to define was this: 42 | > 43 | > ``` 44 | > main { 45 | > display: layout(game-board); 46 | > --shape: triangle; 47 | > --size: 100; 48 | > } 49 | > ``` 50 | > And once you ran that through a tool, it fetches both Steve's `game-board` package, which itself also requires Cas's triangular tile layout. 51 | > 52 | > To take things one step further, even if Steve's `game-board` layout supports triangular, hexagonal, and pentagonal tiled layouts, since _only_ the triangular mode was used it only bundles that code, leaving the code for supporting hexagonal layouts or pentagonal layouts out of your final build. 53 | 54 | ## What would it look like? 55 | 56 | That's a great question - currently there are many different ideas of how this could be exposed in valid CSS syntax inside CSS stylesheets. Any of the following might be ways this could work: 57 | 58 | - a `package.css` file to define folder-wide or project-wide how style information in that folder or project should be 59 | 60 | - custom at-rules in CSS that provide a declarative way to describe importing and configuring external dependencies used in that stylesheet 61 | 62 | - **can you think of other ways?** open an issue to discuss! 63 | 64 | ## How does it work? 65 | 66 | That part I'm not sure about - I've never built a package manager before, but thankfully many already exist that can be learned from both in what to do and what not to do. Here are two that we can probably learn from as the flesh this one out: 67 | 68 | - [pika](https://pika.dev/) 69 | - [gnu guix](http://guix.gnu.org/) 70 | - [npm](https://www.npmjs.com/) 71 | 72 | ## How can I help? 73 | 74 | Open an issue to discuss any idea related to this! 75 | --------------------------------------------------------------------------------