alga-css - npm Package Compare versions

Comparing version 1.0.0-sapphire-0 to 1.0.0-sapphire-1

package.json

 {
   "name": "alga-css",
-  "version": "1.0.0-sapphire-0",
+  "version": "1.0.0-sapphire-1",
   "description": "Alga CSS is a scope or component-first CSS toolkit for quickly mix or compose CSS components and properties",
@@ -5,0 +5,0 @@ "main": "./src/index.js",

README.md

@@ -24,3 +24,3 @@ <p align="center">
 5. Custom CSS helpers (preset, define, color, screen, etc.)
-6. Extract classes from Vue, HTML (Petite-Vue, Alpine.js), Astro, and Svelte
+6. Extract classes from Vue, HTML (Petite-Vue, Alpine.js), Astro, Svelte, and JSX/TSX
 
@@ -46,3 +46,10 @@ ## Installation and Setup
     algacss({
-      extract: ['./src/**/*.vue', './src/**/*.html', './src/**/*.astro', './src/**/*.svelte'],
+      extract: [
+        './src/**/*.vue', 
+        './src/**/*.html', 
+        './src/**/*.astro', 
+        './src/**/*.svelte', 
+        './src/**/*.jsx', 
+        './src/**/*.tsx'
+      ],
       src: './src/styles/*.alga'
@@ -71,2 +78,4 @@ })
 width-100pct
+height-250px
+padding-1.75rem
 
@@ -77,8 +86,15 @@ /* class structure: screen, ss (extra small), sr (smaller), sm (small), md (medium), lg (large), lr (larger), ls (largest), wd (wide), wr (wider) */
 /* class structure: mode */
-dark:backgroundColor-hex333
-light:backgroundColor-hexfff
+dark:backgroundColor-hex242424
+light:backgroundColor-hexf2f2f2
 
+/* (prefers-color-scheme: light) { [data-mode=dark] .backgroundColor-hex242424 {} } */
+toDark:backgroundColor-hex242424
+
+/* (prefers-color-scheme: dark) { [data-mode=light] .backgroundColor-hexf2f2f2 {} } */
+toLight:backgroundColor-hexf2f2f2
+
 mode:backgroundColor-hexfff /* for [data-mode=dark] .backgroundColor-hexfff {} */
 
 /* class structure: state */
+hover:backgroundColor-hex2f2f2f
 facus:paddingLeft-3px
@@ -85,0 +101,0 @@ ```

src/configs/properties.js

@@ -1,1 +0,1 @@
-module.exports = ['accentColor', 'alignContent', 'alignItems', 'alignSelf', 'all', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'backdropFilter', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundRepeat', 'backgroundSize', 'border', 'borderBottom', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderColor', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxDecorationBreak', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'captionSide', 'caretColor', 'clear', 'clip', 'clipPath', 'color', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'content', 'counterIncrement', 'counterReset', 'cursor', 'direction', 'display', 'emptyCells', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'float', 'font', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontWeight', 'gap', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'hangingPunctuation', 'height', 'hyphens', 'imageRendering', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maskImage', 'maskMode', 'maskOrigin', 'maskPosition', 'maskRepeat', 'maskSize', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'mixBlendMode', 'objectFit', 'objectPosition', 'opacity', 'order', 'orphans', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowWrap', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'perspective', 'perspectiveOrigin', 'pointerEvents', 'position', 'quotes', 'resize', 'right', 'rowGap', 'scrollBehavior', 'tabSize', 'tableLayout', 'textAlign', 'textAlignLast', 'textDecoration', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textDecorationThickness', 'textIndent', 'textJustify', 'textOverflow', 'textShadow', 'textTransform', 'top', 'transform', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'userSelect', 'verticalAlign', 'visibility', 'whiteSpace', 'widows', 'width', 'wordBreak', 'wordSpacing', 'wordWrap', 'writingMode', 'zIndex', 'placeContent', 'placeSelf', 'placeItems', 'inset', 'appearance', 'colorScheme', 'fontSynthesis', 'fontSmoothing', 'osxFontSmoothing', 'textSizeAdjust', 'textRendering']
+module.exports = ['accentColor', 'alignContent', 'alignItems', 'alignSelf', 'all', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'backdropFilter', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundRepeat', 'backgroundSize', 'border', 'borderBottom', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderColor', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxDecorationBreak', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'captionSide', 'caretColor', 'clear', 'clip', 'clipPath', 'color', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'content', 'counterIncrement', 'counterReset', 'cursor', 'direction', 'display', 'emptyCells', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'float', 'font', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontWeight', 'gap', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'hangingPunctuation', 'height', 'hyphens', 'imageRendering', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maskImage', 'maskMode', 'maskOrigin', 'maskPosition', 'maskRepeat', 'maskSize', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'mixBlendMode', 'objectFit', 'objectPosition', 'opacity', 'order', 'orphans', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowWrap', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'perspective', 'perspectiveOrigin', 'pointerEvents', 'position', 'quotes', 'resize', 'right', 'rowGap', 'scrollBehavior', 'tabSize', 'tableLayout', 'textAlign', 'textAlignLast', 'textDecoration', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textDecorationThickness', 'textIndent', 'textJustify', 'textOverflow', 'textShadow', 'textTransform', 'top', 'transform', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'userSelect', 'verticalAlign', 'visibility', 'whiteSpace', 'widows', 'width', 'wordBreak', 'wordSpacing', 'wordWrap', 'writingMode', 'zIndex', 'placeContent', 'placeSelf', 'placeItems', 'inset', 'appearance', 'colorScheme', 'fontSynthesis', 'fontSmoothing', 'osxFontSmoothing', 'textSizeAdjust', 'textRendering', 'willChange']

src/cores/declaration.js

@@ -289,3 +289,7 @@ const postcss = require('postcss')
         if(entryVal?.selector) {
-          newRule = postcss.rule({ selector: entryVal.selector +' '+ selectorItemKey, source: entryVal.source })
+          if(selectorItemKey.trim() === 'html') {
+            newRule = postcss.rule({ selector: selectorItemKey+''+entryVal.selector, source: entryVal.source })
+          } else {
+            newRule = postcss.rule({ selector: entryVal.selector +' '+ selectorItemKey, source: entryVal.source })
+          }
         }
@@ -292,0 +296,0 @@ for(let [key, val] of Object.entries(itemValue)) {

src/cores/extraction.js

@@ -18,9 +18,16 @@ const glob = require('glob')
   } else if(rp.endsWith('.svelte')) {
-    regexp = /class:([\w]+|[\s\w]+|[\s\w\-_.:\d\(\)]+)\s/g
-    replaceData = data.replace(/=|\>/ig, ' ')
-    classes = [...replaceData.matchAll(regexp)].flat().filter(i => i.indexOf('class') === -1)
-  } else { //.html, .astro, .edge, .blade.php, .twig
-    regexp = /(v-bind:class|x-bind:class|:class|class)="([\w]+|[\s\w]+|[\s\w\-_\.:\d\(\)]+)"/g
+    regexp = /(?<=class:).*?(?=\>|\s|=)|(?<=class=").*?(?=")/gs
+    replaceData = data.replace(/\[|\]|',|,\s|'|\<|\>|\{|\}/ig, ' ').replace(/\s+/ig, ' ')
+    classes = [...replaceData.matchAll(regexp)].map(i => i[0].split(' ').filter(w => w !== '')).flat(2).filter(i => i.includes('-'))
+  } else if(rp.endsWith('.jsx') || rp.endsWith('.tsx')) {
+    regexp = /(?<=className="|class=").*?(?=")/gs
+    replaceData = data.replace(/\[|\]|',|,\s|'|\<|\>|\{|\}/ig, ' ').replace(/\s+/ig, ' ')
+    classes = [...replaceData.matchAll(regexp)].map(i => i[0].split(' ').filter(w => w !== '')).flat(2).filter(i => i.includes('-'))
+  } else { //.html, .astro, .edge, .blade.php, .twig, .js, or .ts
+    /*regexp = /(v-bind:class|x-bind:class|:class|class|className)="([\w]+|[\s\w]+|[\s\w\-_\.:\d\(\)]+)"/g
     replaceData = data.replace(/\[|\]|',|,\s|'|\(|\)|\<|\>|\{|\}/ig, ' ').replace(/:\s/ig, '')
-    classes = [...replaceData.matchAll(regexp)].flat().filter(i => i.indexOf('class') === -1)
+    classes = [...replaceData.matchAll(regexp)].flat().filter(i => i.indexOf('class') === -1)*/
+    regexp = /(?<=v-bind:class="|x-bind:class="|:class="|class="|className=").*?(?=")/gs
+    replaceData = data.replace(/\[|\]|',|,\s|'|\<|\>|\{|\}/ig, ' ').replace(/\s+/ig, ' ')
+    classes = [...replaceData.matchAll(regexp)].map(i => i[0].split(' ').filter(w => w !== '')).flat(2).filter(i => i.includes('-'))
   }
@@ -27,0 +34,0 @@ if(classes) {

No alert changes

Improved metrics

Total package byte prevSize

162528

increased by1.6%

Lines of code

2039

increased by0.54%

Number of lines in readme file

141

increased by12.8%

No dependency changes