fylgja / fylgja Goto Github PK
View Code? Open in Web Editor NEWThe modular highly customisable CSS framework. Powered by CSS Components, Utilities and Props for building your Web UI.
Home Page: https://fylgja.dev
License: MIT License
The modular highly customisable CSS framework. Powered by CSS Components, Utilities and Props for building your Web UI.
Home Page: https://fylgja.dev
License: MIT License
This is caused by the export rules, for example with @fylgja/sizes
package.json there is an explicit export rule for specific files:
{
"name": "@fylgja/sizes",
...
"type": "module",
"main": "index.cjs",
"unpkg": "sizes.css",
"style": "sizes.css",
"module": "index.js",
"exports": {
".": {
"import": "./index.js",
"require": "./index.cjs",
"default": "./index.cjs"
}
},
...
}
Sadly the style
export rule is not used when combined with the exports
export rule.
To resolve this, the css export needs used as the default export option in exports
export rule until postcss adds support for this, see: postcss/postcss-import#492
or Fylgja needs a second export option for CSS
When using visibility on a positioned element the element stays visable after closing dialog.
Consider adding the block default behavior for images (jensimmons/cssremedy#14)
This will drop the legacy solution for the aspect-ratio.
Instead this Fylgja Component will become to a CSS token package.
There is no use for the older solution with the native CSS option
Currently when using the menu component, as a PostCSS import, with Tailwind in a Hyva project.
The actions-toolbar
will also combine with the menu item auto selector since the not selector is just the class .btn
.
Using the [class*=btn]
will fix this behaviour.
Most margins and other direction aware properties are static, this should be made dynamic.
The current base package is made ready for v2.
Only the code needs to be activated after v1.2 is released
Many of the Fylgja components have slowly added and dropped specify features,
to keep backward compatibility, these options are kept.
For v2 we will drop these options.
This upgrade will make it easier to create multi rowed sliders,
and drop the need to wait for flex gap.
Although Fylgja v2 will drop Safari 13 version need,
making this reason obsolete.
This update will need to check how it handles slide item auto sizing if no value is given.
Current solution can be the unit min-content
.
Extra note: Drop the -webkit-overflow-scrolling
from the styles, not needed since Safari 13
Currently it is not possible to load both the utilpack or any of the default utilities found in the utilpack,
without getting an error from Sass,
that any of those default are already loaded.
Example using the defaults with map marge to overrule specific parts.
@use "@fylgja/utilpack/defaults/spacers" as *;
$new-spacers: ();
$new-spacers-map: map.merge($utilpack-defaults-spacers, $new-spacers);
@use "@fylgja/utilpack" with (
$utilpack-defaults-spacers: $new-spacers-map,
);
This will not work.
Currently the design tokens are doing great.
The sizes version was to optimistic, and requires an split.
This will create more CSS vars, but is needed for other systems to work wel.
Split to;
Also add more options for;
Right now there's no way to change the border style for a disabled radio input with @fylgja/controls.
An example would be the material-style radio button in combination with a dashed border-style, which looks a bit funky.
Cool, thanks, peace out.
The @import
for the layer option (soon to release officially) breaks if used without extension
@import "@fylgja/button/layer";
It will import the scss version even if used with postcss-import
;
The way the file is built needs to change so that there is no scss version of the same name.
Originally posted by GrimLink May 29, 2022
Consider adding the block default behavior for images (jensimmons/cssremedy#14)
Sometimes when pressing the close button of a dialog the dialog stays visible in firefox.
This might be caused by the animation repeatedly being triggered
Currently we have supported both SCSS with @import
and @use
with this the SCSS variable prefix was required, as of Version 2 of Fylgja we are full dropping older SCSS versions, and so we can drop the prefix form each SCSS variable.
So $form-bg
will be just $bg
and scoped by the SCSS file.
Hi,
I'm trying to use fylgja inside a new Symfony project, on my local machine running a Debian-based Linux distribution.
I've installed the Symfony bundle Encore that provides a Webpack configuration.
Here is my webpack.config.js
:
const Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or subdirectory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/app.js')
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// configure Babel
// .configureBabel((config) => {
// config.plugins.push('@babel/a-babel-plugin');
// })
// enables and configure @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = '3.23';
})
// enables Sass/SCSS support
.enableSassLoader()
.enablePostCssLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use React
//.enableReactPreset()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
Here is my package.json
:
{
"devDependencies": {
"@babel/core": "^7.17.0",
"@babel/preset-env": "^7.16.0",
"@hotwired/stimulus": "^3.0.0",
"@symfony/stimulus-bridge": "^3.2.0",
"@symfony/webpack-encore": "^4.0.0",
"core-js": "^3.23.0",
"postcss-loader": "^7.0.0",
"regenerator-runtime": "^0.13.9",
"sass": "^1.60.0",
"sass-loader": "^13.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-notifier": "^1.15.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"@fylgja/mq": "^1.2.2",
"@fylgja/utilpack": "^1.2.1",
"fylgja": "^1.3.0"
}
}
And here is my app.scss
:
@use "@fylgja/theme" with ($color-theme: rebeccapurple,
$color-on-theme: white);
@use "@fylgja/base";
@use "@fylgja/details";
@use "@fylgja/table";
@use "@fylgja/list";
@use "@fylgja/breadcrumbs";
@use "@fylgja/pagination";
@use "@fylgja/avatar";
@use "@fylgja/button";
@use "@fylgja/container";
@use "@fylgja/section";
@use "@fylgja/card";
@use "@fylgja/hashlink";
@use "@fylgja/utilpack";
When I launch the encore dev-server
command, here is the output :
❯ yarn encore dev-server
yarn run v1.22.19
$ /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/.bin/encore dev-server
Running webpack-dev-server ...
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://[::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/bricebou/DEV/apprentissage/historiquetravaux/app/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
ERROR Failed to compile with 2 errors 18:07:27
error in ./assets/styles/app.scss 18:07:27
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
6 │ @use "@fylgja/mq/helper" as mq;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@fylgja/utilpack/_helper.scss 6:1 @forward
node_modules/@fylgja/utilpack/_index.scss 4:1 @use
node_modules/@fylgja/utilpack/utilpack.scss 4:1 @use
assets/styles/app.scss 19:1 root stylesheet
error in ./assets/styles/app.scss 18:07:27
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
6 │ @use "@fylgja/mq/helper" as mq;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@fylgja/utilpack/_helper.scss 6:1 @forward
node_modules/@fylgja/utilpack/_index.scss 4:1 @use
node_modules/@fylgja/utilpack/utilpack.scss 4:1 @use
assets/styles/app.scss 19:1 root stylesheet
at tryRunOrWebpackError (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/HookWebpackError.js:88:9)
at __webpack_require_module__ (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5058:12)
at __webpack_require__ (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5015:18)
at /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5086:20
at symbolIterator (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:3485:9)
at done (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:4993:43
at symbolIterator (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:3482:9)
at timesSync (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
6 │ @use "@fylgja/mq/helper" as mq;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@fylgja/utilpack/_helper.scss 6:1 @forward
node_modules/@fylgja/utilpack/_index.scss 4:1 @use
node_modules/@fylgja/utilpack/utilpack.scss 4:1 @use
assets/styles/app.scss 19:1 root stylesheet
at Object.<anonymous> (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[2]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[3]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[4]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/assets/styles/app.scss:1:7)
at /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
at Hook.eval [as call] (eval at create (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5060:39
at tryRunOrWebpackError (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/HookWebpackError.js:83:7)
at __webpack_require_module__ (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5058:12)
at __webpack_require__ (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5015:18)
at /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5086:20
at symbolIterator (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:3485:9)
at done (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:3527:9)
Generated code for /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[2]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[3]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[4]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/assets/styles/app.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n ╷\n6 │ @use \"@fylgja/mq/helper\" as mq;\n │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n ╵\n node_modules/@fylgja/utilpack/_helper.scss 6:1 @forward\n node_modules/@fylgja/utilpack/_index.scss 4:1 @use\n node_modules/@fylgja/utilpack/utilpack.scss 4:1 @use\n assets/styles/app.scss 19:1 root stylesheet");
Entrypoint app [big] 1.24 MiB = runtime.js 107 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_da-514134.js 1.11 MiB app.js 28 KiB
webpack compiled with 2 errors
The issue is coming from the last use
statement within the SCSS:
@use "@fylgja/utilpack";
The compilation works perfectly fine when removing this last line.
Any idea ?
Thanks a lot !
When compiling sources I'm bumping into multiple deprecation warnings with text Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0 because of lines like the following:
margin-left: ($x / -2);
Reference: https://sass-lang.com/documentation/breaking-changes/slash-div
Currently it is not possible to set the label-margin
trough scss syntax,
and can only be set with CSS variables.
Currently the colors are limited to just bright versions and are based on the Open Color, same as what Open Props is doing.
For V2 we want to drop the colors from Open Color and move to our own version build using the power of oklch.
Our goal is to stick to the 10 colors pallet but if this require a bit more this should not be an issue.
The pallet should not grow beyond to many options so the choice becomes to much.
This will make the utilpack easier to use for the defaults created with the SCSS mixin.
The SCSS mixin builder will stay the same at it's core and function,
only now each default will have its own @use
option,
and is build separately,
making it easier to use without any other tools (altrough still recommended).
Also each value will now be powered by the CSS tokens components from Fylgja.
Improve the docs and use for the CSS version the native syntax.
@import "@fylgja/avatar" layer(components);
Update the SCSS syntax to use the name as the on or off switch.
So that there is only 1 var that can set this behaviour, and is more in line with the CSS syntax;
Drop the older imports in v2 as per issue ->
With v1.2 we added the option to enable this behaviour, with v2 this will be the default and can be disabled of needed
The current syntax matches most frameworks out there, e.g. md-class-name
or class-md-name
;
But the md:class-name
is becoming more and more used, not just in TailwindCSS.
Research and consider setting the mq prefix values to \\:
to use the same syntax
When a selectbox has more content/text than the container width it will causes an overflow on the body
In v1 the outline is replaced with a custom focus state or is part of the hover state.
In v2 this should be dropped for native outline support and the hover should not target focus events anymore.
Actions:
Currently for older browser support we use, for example, padding-inline-start
and padding-inline-end
together in 1 class.
This can be replaced for just padding-inline
in the next major version.
With this all components will ship with the :where
selector, this will solve some issues with the menu and other nested class components.
We held back from adding this earlier, do our rule to support 3 browser's versions, with Safari 16 this options is possible
Note our current specificity is already very low do our other rule to keep everything one single class
:where
selector:host
selector, for shadow dom supportA declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.