Initial cssProps feature

[B-Teague]

Hi @cristianbote, this is still very much a work in progress (so don't merge yet), but wanted to get your feedback before I go too far down the rabbit hole.

Can you create an official feature branch in the goober repo, and we can merge rough draft updates to that branch and squash all the commits before merging the branch to master once it is ready for production?

I need your feedback on how you want to setup the import paths: import '@goober/css' and also review the new package.json file. Let me know if you like the new directory structure / folder names.

There are five main features:

• atRules - Ex: @media
• functions - Ex: rgb()
• props - Ex: color, fontSize
• units - Ex: px, em, cm
• pseudo - Ex: :hover

Great news, the syntax is even simpler than my initial issue #382.

import { minWidth, color, BLUE, background, fontSize, hover, media, px, em } from '@goober/css'

const StyledContainer = styled("div")((props) => [
    minWidth(px(20)),
    hover([
        color(BLUE),
        background(props.theme.color)
    ]),
    media(SCREEN, AND, `(min-width: ${px(900)})`, [
        fontSize(em(5))
    ])
])

There is still a lot of work to do before this is production ready, but I got several tests working.

Design Goals:

• Source code, type definitions, and readme 100% generated from templates based on mdn-data
• Clean up development code to make contributions easier (need official feature branch to work from?)

Todo:

• [x] define import paths for production. Ex: 'goober/cssProps/pseudo'?
• [ ] update templates to include final newline character
• [ ] update integration tests to use production paths instead of relative paths
• [ ] create functions for the properties used by atRules
• [x] generate imports for constants per function based on mdn-data syntax. Example: flex, span, blue, green, etc.
• [x] generate integration tests for every function using a headless browser (need to make sure syntax is correct)
• [x] generate readme docs for each library (pseudo, units, etc) including docs for every function (include mdn links?)
• [ ] add non-standard props based on which props need vendor prefixing
• [x] improve function signatures for atRules like @media based on mdn-data types
• [ ] Fix as many typos as possible
• [ ] Build and deploy to production

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/cristianbote/goober-rocks/C5vaEo8p2XUiNsjhRBxDfagBzdGM
✅ Preview: https://goober-rocks-git-fork-b-teague-cssprops-cristianbote.vercel.app

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f23d677ed3869b5cb8c0b002574eb4f1dad4ff2f:

Sandbox	Source
Vanilla	Configuration

[ksenginew]

@B-Teague Looks like functions and at-rules are amazing. You can use something like this to power css functions

let fn = (name) => (...args) => `${name}(${args.join()})`

let rgb = fn('rgb')

// Removed old syntax
/*
css({
    "color": "rgb(224,224,224)",
    "backgroundColor": "rgb(32,32,32)"
})
*/
css({
  color: rgb(224, 224, 224),
  backgroundColor: rgb(32,32,32)
})

// Removed old syntax
/*
styled`
    color: ${({ color: { r, g, b } }) => `rgb(${r}, ${g}, ${b})`};
    background-color:  ${({ color: { r, g, b } }) => `rgb(${r}, ${g}, ${b})`};
`
*/
styled`
    color: ${({ color: { r, g, b } }) => rgb(r, g, b)};
    background-color: ${({ color: { r, g, b } }) => rgb(r, g, b)};
`

Can I join to this pr???

[B-Teague]

I'm having too much trouble with creating an automatic way to generate the function signatures based on the syntax. (The syntax gets crazy complicated)

I think the best approach is all function signatures use this with spaces as default delimiter

export default function height() {
    return {
        height: appendArgs(arguments, delim)
    };
}

Then I manually modify each function signature to best match the syntax with some helper functions and constants for more difficult syntax. For example, grid can be many things:

grid(qts("a"), px(100), qts("b"), fr(1)); //space delimited
grid(rowCol(px(100), px(200)); //rowCol is "/" delimited
grid(
   rowCol(
      minmax(px(400), MIN_CONTENT), 
      repeat(AUTO_FILL, px(50))
   )
);

/* <'grid-template'> values */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? values */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> values */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
goober-rocks	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 11, 2023 at 0:57AM (UTC)

[B-Teague]

@cristianbote This is finally ready for a serious review. I still expect quite a few changes from review, but cssProps is 90% done.

Take a look at the readme here: https://github.com/B-Teague/goober/tree/cssProps/cssProps

1879 tests pass, 5 failed (@rules)