Skip to content

Conversation

@vardumper
Copy link
Contributor

@vardumper vardumper commented Oct 19, 2025

Please ignore everything PHP (especially in src/ folder). It just helps me auto-generate files. Everything PHP will not be in the final PR - unless useful.

This pull request updates the composer.json file to add Composer package management support for the project. The most important changes include specifying a new dependency and configuring autoloading for the source code.

Composer integration and configuration:

  • Added a require section to include the vardumper/extended-htmldocument package as a dependency.
  • Added an autoload section using PSR-4 to map the PicoCss\Pico namespace to the src/ directory.

@vardumper
Copy link
Contributor Author

vardumper commented Oct 19, 2025

The idea is to move styles into HTML element scss files. The benefit I want to have is having to learn less PicoCSS SCSS "madness", but being able to write themes by allowing me to work with the well-known HTML elements' scss, rather than modules.
Using a postcss plugin, it should be possible to merge duplicate css rules back into the current pico.css format.

Once I modify src/Resources/picocss.yaml, I run php bin/console merge:specs. This gives me an updated HTML5 specification file (src/Resources/picocss-html5-specification.yaml).

Then I run vendor/bin/ext-html make:all --specification=src/Resources/picocss-html5-specification.yaml which updates all Html\Element\Classes and all Html\Enum\Classes.

Finally I run php bin/console make:sass which is creating new scss/inline|block folders and add more scss files.

Basically, the only things I want to actually really manually refactor here are content forms folders - these I want to replace with the new inline/block folders. void elements are intentionally left out due to not being visible.

@vardumper vardumper force-pushed the feature/base-on-html5-elements-refactor branch from 54b0523 to 64abdfc Compare October 23, 2025 15:17
@vardumper vardumper force-pushed the feature/base-on-html5-elements-refactor branch from 10a411f to c4d8e12 Compare November 1, 2025 12:35
@vardumper
Copy link
Contributor Author

I think the purpose of this branch needs further clarification.
In my previous attempts to generate a schema-first HTML5 Storybook I really wanted to set theme to false, in order to have each elements style closely tied to its story. But since Picocss styles needed for a anchor.stories.js are all over the place, import 'anchor.scss'; was not doable at least I wasn't able to automate or extract per-element styles.

So with this new structure in place, I am positive to get there soon.
This will also allow me to auto-generate Storybooks for Picocss for multiple loaders/languages. (Twig, Vue, React, etc.)

As an example, a story for links would sit in a anchor folder, and I'd be able to configure storybook vite, a sass and twig loader to look like this:

|— anchor
­­­|   |— anchor.stories.js
|   |— anchor.twig
|    — anchor.scss

This will make the process of creating new custom components much easier. Plus it will allow to do theming in a atoms/molecules/organisms fashion.

For reference:
https://github.com/vardumper/extended-htmldocument (is where I have the HTML5 specs, and render stories, twig files, etc.)
https://github.com/vardumper/picocss-storybook/tree/develop/stories/html (an example storybook with plain JS stories)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants